#ButtonVideoOptions { position: relative; } #ButtonVideoOptions #DropdownVideoOptions.DropdownOpen { display: block; } #ButtonVideoOptions #DropdownVideoOptions .Link { cursor: pointer; } #ButtonVideoOptions #DropdownVideoOptions .LinkHidden { display: none !important; } @media (min-width: 600px) { #ButtonVideoOptions #DropdownVideoOptions { position: absolute; top: 40px; right: 0; width: max-content; } } .video-action-container .Headline a { color: var(--TextPrimary); } .video-action-container .VideoActionsButtons .ButtonBox .Button:not(:first-child) { margin-left: 4px; } .video-action-container .VideoChannelTitle { display: flex; align-items: center; gap: 5px; } .video-action-container .VideoChannelTitle .ChannelCheckmarkIcon { width: 20px; height: 15px; } #Preview.video-detail-container .Article { color: var(--Article); } #Preview.video-detail-container .Article a { color: var(--Primary) !important; text-decoration: none !important; } .browse-video-section .browse-video-header__title .browse-video-title { display: block; margin-bottom: 3px; font-size: 22px; color: #000000; text-transform: capitalize; } .browse-video-section .browse-video-absent { text-transform: capitalize; } .browse-video-section .after-player-livestream + div { max-width: 1200px; margin: auto; } .categoriesWrapper { border-bottom: none; } .categoriesWrapper__content { display: flex; flex-wrap: wrap; row-gap: 30px; margin-top: 30px; } .categoriesWrapper .categories-filter { display: flex; justify-content: flex-end; margin-bottom: 15px; } .categoriesWrapper .load-more-loading { margin: 30px auto; } .categoriesWrapper #PageNavigation { margin: 0; } .categoriesWrapper #PageNavigation .LoadMore { margin: 0; } .CoverDark { display: block; background-color: rgba(0, 0, 0, 0.85); width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 999997; } .categoriesWrapper { border-bottom: none; /* CHANNEL */ /* //////////////////////////////////////////////////////////////////// */ /* //////////////////////////////////////////////////////////////////// */ /* //////////////////////////////////////////////////////////////////// */ } .categoriesWrapper__content { display: flex; flex-wrap: wrap; row-gap: 30px; margin-top: 30px; } .categoriesWrapper .categories-filter { display: flex; justify-content: flex-end; margin-bottom: 15px; } .categoriesWrapper .load-more-loading { margin: 30px auto; } .categoriesWrapper #PageNavigation { margin: 0; } .categoriesWrapper #PageNavigation .LoadMore { margin: 0; } .categoriesWrapper .ChannelArtwork { display: block; pointer-events: none; border-radius: 8px; } .categoriesWrapper .ChannelArtwork img { border-radius: 8px; margin: 0px auto; width: 100%; } .categoriesWrapper .ChannelInfo { display: block; } .categoriesWrapper .ChannelInfoCol { display: block; vertical-align: top; } @media (max-width: 639.99px) { .categoriesWrapper .ChannelPhoto { display: none; } .categoriesWrapper .ChannelText { margin-bottom: 10px; } } @media (min-width: 640px) { .categoriesWrapper .ChannelInfo { display: table; width: 100%; min-height: 60px; } .categoriesWrapper .ChannelCol { display: table-cell; vertical-align: middle; } .categoriesWrapper .ChannelPhoto { width: 100px; padding-right: 20px; } .categoriesWrapper .ChannelText { width: auto; } .categoriesWrapper .ChannelButtons { width: 260px; padding-right: 20px; } .categoriesWrapper .ChannelPhoto .Photo { display: block; width: 90px; } .categoriesWrapper .ChannelPhoto .Photo img { border-radius: 50%; } } .categoriesWrapper .ChannelAbout { color: var(--TextPrimary); } .categoriesWrapper .ChannelAbout a { color: var(--Primary); } .categoriesWrapper .ChannelSearchBox { display: block; max-width: 320px; height: 30px; outline: solid 1px var(--Transparent); border: solid 1px var(--SearchBorder); border-radius: 3px; background-color: var(--Search); flex: 1; margin-right: auto; } .categoriesWrapper .ChannelSearchActive { outline-color: var(--Primary); } .categoriesWrapper .ChannelSearchTable { display: table; width: 100%; height: 100%; } .categoriesWrapper .ChannelSearchInput { display: table-cell; width: auto; vertical-align: middle; } .categoriesWrapper .ChannelSearchClear { display: table-cell; width: 24px; vertical-align: middle; padding: 0px 3px; } .categoriesWrapper .ChannelSearchSubmit { display: table-cell; width: 24px; vertical-align: middle; padding: 0px 5px; } .categoriesWrapper .ChannelSearchHide { display: none !important; } .categoriesWrapper .ChannelSearchInput input { width: 100%; height: 24px; font-size: var(--FS13); background-color: var(--Transparent); } .categoriesWrapper .ChannelSearchBox .ButtonIcon { width: 24px; height: 24px; padding: 2px; border-radius: 0px; } .categoriesWrapper .ChannelSearchBox .Icon { width: 20px; height: 20px; } .CoverDark { display: block; background-color: rgba(0, 0, 0, 0.85); width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 999997; } .channels__info { display: block; width: auto; margin: 0px auto 15px auto; } .channels__info--left { display: block; width: auto; padding-right: 15px; margin: 0px auto 10px auto; } .channels__info--left .name { display: block; margin-bottom: 3px; text-transform: capitalize; font-size: 22px; color: #000000; } .channels__info--left .stats { display: block; font-family: 'Roboto'; font-size: 14px; color: #999999; } .channels__info--left .stats a { color: #ed1a3b; text-decoration: none; } .channels__info--right { display: block; width: auto; } .video-action-container .Headline a { color: var(--TextPrimary); } .video-action-container .VideoActionsButtons .ButtonBox .Button:not(:first-child) { margin-left: 4px; } .video-action-container .VideoChannelTitle { display: flex; align-items: center; gap: 5px; } .video-action-container .VideoChannelTitle .ChannelCheckmarkIcon { width: 20px; height: 15px; } #ButtonVideoOptions { position: relative; } #ButtonVideoOptions #DropdownVideoOptions.DropdownOpen { display: block; } #ButtonVideoOptions #DropdownVideoOptions .Link { cursor: pointer; } #ButtonVideoOptions #DropdownVideoOptions .LinkHidden { display: none !important; } @media (min-width: 600px) { #ButtonVideoOptions #DropdownVideoOptions { position: absolute; top: 40px; right: 0; width: max-content; } } #Preview.video-detail-container .Article { color: var(--Article); } #Preview.video-detail-container .Article a { color: var(--Primary) !important; text-decoration: none !important; } .promo-featured-university-page .promo-featured-error { border-bottom: 8px; margin-bottom: 16px; color: red; } .promo-featured-university-page .promo-featured-header { font-size: 16px; font-weight: 700; color: #000; margin-bottom: 16px; text-transform: uppercase; } .promo-featured-university-page .promo-featured-hide-checkbox { margin-bottom: 16px; } .promo-featured-university-page .promo-featured-hide-checkbox .hide-checkbox { margin-right: 8px; } .promo-featured-university-page input.promo-featured-label { background-color: transparent; margin-bottom: 16px; padding: 16px; border: 2px solid #ececec; width: 100%; } .promo-featured-page { padding-right: 64px !important; border-right: 1px solid #ececec; } .promo-featured-page .promo-featured-error { border-bottom: 8px; color: red; } .promo-featured-page .promo-featured-header { font-size: 16px; font-weight: 700; color: #000; margin-bottom: 16px; text-transform: uppercase; } .promo-featured-page .promo-featured-hide-checkbox { margin-bottom: 16px; } .promo-featured-page .promo-featured-hide-checkbox .hide-checkbox { margin-right: 8px; } .promo-featured-page .promo-featured-label { margin-bottom: 16px; padding: 16px; border: 2px solid #ececec; } .promo-featured-page input.promo-featured-label { background-color: transparent; margin-bottom: 16px; padding: 16px; border: 2px solid #ececec; width: 100%; } .affiliate-products-page { padding-right: 64px !important; } .affiliate-products-page .affiliate-products-header { font-size: 16px; font-weight: 700; color: #000; margin-bottom: 16px; text-transform: uppercase; } .affiliate-products-page .affiliate-products-action { display: flex; justify-content: space-between; margin-bottom: 16px; } .affiliate-products-page .affiliate-products-action .affiliate-products-status-select { width: 300px; padding: 12px; background-color: transparent; border: 1px solid #ececec; border-radius: 8px; } .affiliate-products-page .affiliate-products-action .affiliate-products-status-select .affiliate-products-status-option { padding: 12px; } .affiliate-products-page .affiliate-products-action .affiliate-products-add-btn { padding: 0 36px; } .affiliate-products-page .affiliate-products-notice { font-size: 14px; color: #666666; } .affiliate-products-page .affiliate-products-products-carousel { margin-top: 24px; } .affiliate-products-page .affiliate-products-products-carousel .affiliate-products-warning { margin-top: 16px; color: red; } .verify-code #timer-text { color: #FFFFFF; justify-content: center; font-size: 12px; display: none; gap: 3px; margin-bottom: 20px; } .verify-code .form-send-new { margin-bottom: 20px; } .verify-code .form-send-new #send-new-code { cursor: pointer; color: var(--Primary); } .verify-code .form-send-new #send-new-code:hover { text-decoration: underline; color: var(--Primary); } .verify-code .form-input-block { margin-bottom: 10px !important; position: relative; display: block; } .verify-code .form-input-block .input-container { display: flex; justify-content: center; gap: 5px; } .verify-code .form-input-block .input-container input { width: 100%; padding: 10px !important; outline: solid 3px rgba(0, 0, 0, 0); border: solid 1px #424345; border-radius: 3px; font-size: 14px; max-width: 40px; margin: 0px 1px; padding: 12px 0px !important; text-align: center; background-color: #242529; color: #FFFFFF; font-weight: 600; height: 40px; } .verify-code .form-input-block .input-label-code { text-align: center; color: #FFFFFF; font-size: 12px; font-weight: 600; margin-bottom: 15px; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .captcha-wrapper { margin-bottom: 15px; } .captcha-image { display: block; height: 50px; width: auto; margin-bottom: 30px; } .captcha-image .form-label { font-size: 12px; font-weight: 600; margin-bottom: 5px; } .captcha-image img { height: 100%; } .captcha-image .btn { height: 32px; font-size: 12px; } .captcha-image-bg { background-color: #FFFFFF; } .captcha-image-group { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .captcha-image-input.form-control { border: 1px solid #ced4da !important; padding: 0 10px !important; } .captcha-image-input-group { display: flex; } .captcha-image-input-group .form__input { margin: 0 !important; } .captcha-image-input-group .btn { border: 1px solid #ced4da !important; } .captcha-image-input-group .btn:focus { box-shadow: none !important; } .captcha-refresh { font-size: 14px; font-weight: 600; cursor: pointer; } .premiumWrapper { border-bottom: none; } .premiumWrapper__content { display: flex; flex-wrap: wrap; row-gap: 30px; margin-top: 30px; border-bottom: solid 1px var(--SectionBorder); } .premiumWrapper__content .CollectionList { border-bottom: none; } .premiumWrapper__home { margin-top: 30px; } .premiumWrapper .premium-filter { display: flex; justify-content: flex-end; margin-bottom: 15px; } .premiumWrapper .load-more-loading { margin: 30px auto; } .premiumWrapper #PageNavigation { margin: 0; } .premiumWrapper #PageNavigation .LoadMore { margin: 0; } .CoverDark { display: block; background-color: rgba(0, 0, 0, 0.85); width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 999997; } .StickyTop { position: -webkit-sticky; position: sticky; top: 0px; z-index: 10; } #Top { display: block; position: fixed; left: 0px; top: 0px; z-index: 15; width: 100%; } .StripeElement { width: 100%; padding: 10px; outline: solid 3px var(--Transparent); border: solid 1px var(--InputBorder); border-radius: 3px; font-size: var(--FS14); -webkit-box-shadow: 0 0 0px 30px var(--Input) inset !important; -webkit-text-fill-color: var(--InputText) !important; background-clip: content-box !important; color: var(--InputText); } .StripeElement--focus { border-color: var(--Primary); outline-color: var(--Primary); } .InputContainer .ElementsApp input { color: var(--InputText); } .CCCode .__PrivateStripeElement { background-image: url(/static/logos/CC-Security.svg) !important; background-position: center right 8px !important; background-repeat: no-repeat !important; background-size: 24px !important; } .IconHide { -webkit-mask: url(/static/icons/new-ui/Icon-Hide.svg) no-repeat 50% 50%; mask: url(/static/icons/new-ui/Icon-Hide.svg) no-repeat 50% 50%; } .IconShow { -webkit-mask: url(/static/icons/new-ui/Icon-Show.svg) no-repeat 50% 50%; mask: url(/static/icons/new-ui/Icon-Show.svg) no-repeat 50% 50%; } .PurchaseCompleted.AuthPanel .Block a { color: var(--Primary); } .PurchaseVideo.AuthPanel .Block a { color: var(--Primary); } .PurchaseForm .InlineFormInput ._error { position: relative !important; bottom: 0px !important; } .PurchaseFormBody { width: 100%; min-height: 100vh; } .PlaylistVideoCount { padding: 6px 5px 5px 23px; background-color: rgba(0, 0, 0, 0.85); color: #FFFFFF; font-weight: 700; background-image: url(/static/icons/new-ui/Icon-Playlist-White.svg); background-position: center left 3px; background-repeat: no-repeat; background-size: 18px; left: 8px; top: 8px; display: inline-block; pointer-events: none; border-radius: 4px; text-align: center; white-space: nowrap; font-size: 11px; line-height: 100%; position: absolute; z-index: 1; } .ButtonPlayList { float: left; } .PlaylistOptions { border: solid 1px var(--ButtonBorder); } .PlaylistOptions .AutoIcon { min-width: 46px; } .PlaylistOptions .AutoText { font-size: 14px; } .Toastify__toast--success { background: var(--Primary); text-align: center; font-size: 16px; } .channel-template { /* POSTS */ /* //////////////////////////////////////////////////////////////////// */ /* ////////////////////////////////////////////////////////////////// */ /* COLLECTION/EPISODES */ /* --------------------------------- Rows */ /* --------------------------------- 2 per row*/ /* --------------------------------- 3 per row*/ /* --------------------------------- 4 per row*/ /* --------------------------------- 5 per row*/ /* //////////////////////////////////////////////////////////////////// */ /* //////////////////////////////////////////////////////////////////// */ /* COLLECTION LIST */ /* //////////////////////////////////////////////////////////////////// */ /* COLLECTION FEATURED */ /* //////////////////////////////////////////////////////////////////// */ /* COLLECTION RELATED */ /* //////////////////////////////////////////////////////////////////// */ /* COLLECTION PLAYLIST */ /* //////////////////////////////////////////////////////////////////// */ } .channel-template .PlaylistCount { padding: 6px 5px 5px 23px; background-color: var(--Duration); color: var(--White); font-weight: var(--FW700); background-image: url(/static/icons/new-ui/Icon-Playlist-White.svg); background-position: center left 3px; background-repeat: no-repeat; background-size: 18px; left: 8px; top: 8px; } .channel-template .playlist-options { display: flex; justify-content: flex-end; } .channel-template .Collection .CollectionList, .channel-template .Collection .Collection { border: none !important; } .channel-template .Post { display: block; margin: 0px auto; } .channel-template .Post .Photo { display: block; margin: 0px auto; } .channel-template .Post .Photo .Thumb img { border-radius: 5px; } .channel-template .Post .Photo .ThumbNew { border-radius: 5px; background-color: var(--Gray60); opacity: 0; } .channel-template .Post .Text { display: block; margin: 0px auto; padding-top: 15px; } @media (min-width: 680px) { .channel-template .Post .Text { padding-right: 8px; } } .channel-template .Post .Title { display: block; margin: 0px 0px 4px 0px; color: var(--TextPrimary); } .channel-template .Post .Title a { color: var(--TextPrimary); text-decoration: none; } .channel-template .Post .EpisodeChannel { display: block; margin: 0px auto; color: var(--TextSecondary); white-space: normal; } .channel-template .Post .EpisodeChannel a { color: var(--TextSecondary); text-decoration: none; } .channel-template .Post .EpisodeChannel a:hover { color: var(--TextPrimary); } .channel-template .Post .Info { display: block; margin: 0px auto; color: var(--TextSecondary); white-space: normal; } .channel-template .Post .Info a { color: var(--TextSecondary); text-decoration: none; } .channel-template .Post .Info a:hover { color: var(--TextSecondary); } .channel-template .Post .Description { display: block; margin: 0px auto; color: var(--TextSecondary); white-space: normal; } .channel-template .Post .Description > a { color: var(--TextSecondary); text-decoration: none; } .channel-template .Post .Description > a:hover { color: var(--TextSecondary); } .channel-template .Post .EpisodeInfo { display: table; width: 100%; margin: 0px auto; } .channel-template .Post .EpisodeAvatar { display: table-cell; width: 46px; vertical-align: top; padding-right: 10px; } .channel-template .Post .EpisodeText { display: table-cell; width: auto; vertical-align: top; } .channel-template .Post .EpisodeAvatar img { border-radius: 50%; } .channel-template .Post .EpisodeAvatar .ThumbNew { border-radius: 50%; } .channel-template .Post .PostOptions { position: absolute; width: 30px; height: 30px; right: 5px; top: 5px; z-index: 1; border-radius: 5px; background-color: var(--TransparentDark); opacity: 0; } .channel-template .Post:hover .PostOptions { opacity: 1; } .channel-template .Post .PostOptions .Icon svg { color: var(--White); } .channel-template .PostActive .PostOptions { opacity: 1; } .channel-template .Post .EpisodeDetails { display: table; width: 100%; margin: 0px auto; } .channel-template .Post .EpisodeDetailsAvatar { display: table-cell; width: 46px; vertical-align: top; padding-right: 10px; } .channel-template .Post .EpisodeDetailsText { display: table-cell; width: auto; vertical-align: top; } .channel-template .Post .EpisodeDetailsAvatar img { border-radius: 50%; } .channel-template .Post .EpisodeDetailsAvatar .ThumbNew { border-radius: 50%; } .channel-template .Collection { border-bottom: solid 1px var(--SectionBorder); } .channel-template .Collection:after { content: ''; display: table; clear: both; } .channel-template .Collection .Post { display: inline; float: left; margin-bottom: 40px; } .channel-template .Collection .Post .Title { font-size: var(--FS14); font-weight: var(--FW600); } .channel-template .Collection .Post .EpisodeChannel { font-size: var(--FS13); font-weight: var(--FW500); } .channel-template .Collection .Post .Info { font-size: var(--FS12); font-weight: var(--FW500); } .channel-template .Collection .Post .EpisodeDetailsAvatar { display: none; } @media (max-width: 759.9px) { .channel-template .Collection .Post .EpisodeAvatar { display: none; } } @media (max-width: 449.9px) { .channel-template .Collection { padding: 0px !important; } .channel-template .Collection .Post .Photo .Thumb img { border-radius: 0px; } .channel-template .Collection .Post .Photo .ThumbNew { border-radius: 0px; } } @media (min-width: 450px) and (max-width: 639.9px) { .channel-template .Collection .Post { display: table; width: 100%; margin: 0px auto 25px auto; } .channel-template .Collection .Post .Photo { display: table-cell; width: 45%; max-width: 260px; vertical-align: top; } .channel-template .Collection .Post .Text { display: table-cell; width: auto; vertical-align: top; padding: 0px 0px 25px 15px; } } @media (min-width: 640px) and (max-width: 899.9px) { .channel-template .Collection .Post { width: 50%; } .channel-template .Collection .Post:nth-child(1) { padding: 0px 24px 0px 0px; } .channel-template .Collection .Post:nth-child(2n + 2) { padding: 0px 0px 0px 24px; } .channel-template .Collection .Post:nth-child(2n + 3) { padding: 0px 24px 0px 0px; clear: both; } .channel-template .Collection5 .Post:nth-child(n + 3) { display: none; } .channel-template .Collection15 .Post:last-child { display: none; } .channel-template .Collection25 .Post:last-child { display: none; } } @media (min-width: 900px) and (max-width: 1139.9px) { .channel-template .Collection .Post { width: 33.33%; } .channel-template .Collection .Post:nth-child(1) { padding: 0px 24px 0px 0px; } .channel-template .Collection .Post:nth-child(3n + 2) { padding: 0px 12px 0px 12px; } .channel-template .Collection .Post:nth-child(3n + 3) { padding: 0px 0px 0px 24px; } .channel-template .Collection .Post:nth-child(3n + 4) { padding: 0px 24px 0px 0px; clear: both; } .channel-template .Collection0 .Post:last-child { display: none; } .channel-template .Collection5 .Post:nth-child(n + 4) { display: none; } .channel-template .Collection10 .Post:last-child { display: none; } .channel-template .Collection20 .Post:nth-last-child(-n + 2) { display: none; } .channel-template .Collection25 .Post:last-child { display: none; } } @media (min-width: 1140px) and (max-width: 1639.9px) { .channel-template .Collection .Post { width: 25%; } .channel-template .Collection .Post:nth-child(1) { padding: 0px 24px 0px 0px; } .channel-template .Collection .Post:nth-child(4n + 2) { padding: 0px 16px 0px 8px; } .channel-template .Collection .Post:nth-child(4n + 3) { padding: 0px 8px 0px 16px; } .channel-template .Collection .Post:nth-child(4n + 4) { padding: 0px 0px 0px 24px; } .channel-template .Collection .Post:nth-child(4n + 5) { padding: 0px 24px 0px 0px; clear: both; } .channel-template .Collection5 .Post:nth-child(n + 5) { display: none; } .channel-template .Collection10 .Post:nth-last-child(-n + 2) { display: none; } .channel-template .Collection15 .Post:nth-last-child(-n + 3) { display: none; } .channel-template .Collection25 .Post:last-child { display: none; } .channel-template .Collection30 .Post:nth-last-child(-n + 2) { display: none; } } @media (min-width: 1640px) { .channel-template .Collection .Post { width: 20%; } .channel-template .Collection .Post:nth-child(1) { padding: 0px 24px 0px 0px; } .channel-template .Collection .Post:nth-child(5n + 2) { padding: 0px 18px 0px 6px; } .channel-template .Collection .Post:nth-child(5n + 3) { padding: 0px 12px 0px 12px; } .channel-template .Collection .Post:nth-child(5n + 4) { padding: 0px 6px 0px 18px; } .channel-template .Collection .Post:nth-child(5n + 5) { padding: 0px 0px 0px 24px; } .channel-template .Collection .Post:nth-child(5n + 6) { padding: 0px 24px 0px 0px; clear: both; } } .channel-template .CollectionFeatured .Post { margin-bottom: 20px; } .channel-template .CollectionList { border-bottom: solid 1px var(--SectionBorder); max-width: 1000px; } .channel-template .CollectionList .Post { margin-bottom: 40px; } .channel-template .CollectionList .Post .Title { font-size: var(--FS14); font-weight: var(--FW600); } .channel-template .CollectionList .Post .EpisodeChannel { font-size: var(--FS13); font-weight: var(--FW500); } .channel-template .CollectionList .Post .Info { font-size: var(--FS12); font-weight: var(--FW500); } @media (min-width: 450px) { .channel-template .CollectionList .Post { display: table; width: 100%; margin: 0px auto 25px auto; } .channel-template .CollectionList .Post .Photo { display: table-cell; width: 35%; max-width: 220px; vertical-align: top; } .channel-template .CollectionList .Post .Text { display: table-cell; width: auto; vertical-align: top; padding: 0px 0px 25px 15px; } } @media (max-width: 759.9px) { .channel-template .CollectionList .Post .EpisodeDetailsAvatar { display: none; } .channel-template .CollectionList .Post .EpisodeAvatar { display: none; } } @media (min-width: 760px) { .channel-template .CollectionList .Post .Title { font-size: var(--FS16); margin-bottom: 15px; } .channel-template .CollectionList .Post .EpisodeChannel { font-size: var(--FS15); } .channel-template .CollectionList .Post .Info { font-size: var(--FS14); } .channel-template .CollectionList .Post .EpisodeAvatar { display: none; } } .channel-template .CollectionFeatured { border-bottom: solid 1px var(--SectionBorder); max-width: 100%; } .channel-template .CollectionFeatured .Post { margin-bottom: 40px; } .channel-template .CollectionFeatured .Post .Title { font-size: var(--FS14); font-weight: var(--FW600); } .channel-template .CollectionFeatured .Post .Info { font-size: var(--FS12); font-weight: var(--FW500); margin-bottom: 5px; } .channel-template .CollectionFeatured .Post .Description { font-size: var(--FS11); font-weight: var(--FW500); } @media (max-width: 499.9px) { .channel-template .CollectionFeatured .Post .Description { display: none; } } @media (min-width: 860px) { .channel-template .CollectionFeatured .Post { display: table; width: 100%; margin: 0px auto 25px auto; } .channel-template .CollectionFeatured .Post .Photo { display: table-cell; width: 50%; max-width: 260px; vertical-align: top; } .channel-template .CollectionFeatured .Post .Text { display: table-cell; width: auto; vertical-align: top; padding: 0px 0px 25px 15px; } .channel-template .CollectionFeatured .Post .Info { max-width: 640px; margin: 0px 0px 5px 0px; } .channel-template .CollectionFeatured .Post .Description { max-width: 640px; margin: 0px; } .channel-template .CollectionFeatured .Post:nth-child(1) { padding: 0px !important; } .channel-template .CollectionFeatured .Post .Photo { padding-right: 24px; } .channel-template .CollectionFeatured .Post .Text { padding-left: 0px; } .channel-template .CollectionFeatured .Post .Title { font-size: var(--FS18); } .channel-template .CollectionFeatured .Post .Description { font-size: var(--FS14); } } @media (min-width: 860px) and (max-width: 899.9px) { .channel-template .CollectionFeatured .Post .Photo { width: 50%; } } @media (min-width: 900px) and (max-width: 1139.9px) { .channel-template .CollectionFeatured .Post .Photo { width: 33.33%; } } @media (min-width: 1140px) and (max-width: 1639.9px) { .channel-template .CollectionFeatured .Post .Photo { width: 25%; } } @media (min-width: 1640px) { .channel-template .CollectionFeatured .Post .Photo { width: 20%; } } .channel-template .CollectionRelated { border-bottom: solid 1px var(--SectionBorder); max-width: 100%; } .channel-template .CollectionRelated .Post { margin-bottom: 40px; } .channel-template .CollectionRelated .Post .Title { font-size: var(--FS14); font-weight: var(--FW600); } .channel-template .CollectionRelated .Post .Info { font-size: var(--FS12); font-weight: var(--FW500); margin-bottom: 5px; } @media (min-width: 640px) { .channel-template .CollectionRelated .Post { display: table; width: 100%; margin: 0px auto 15px auto; } .channel-template .CollectionRelated .Post .Photo { display: table-cell; width: 130px; vertical-align: top; } .channel-template .CollectionRelated .Post .Text { display: table-cell; width: auto; vertical-align: top; padding: 0px 0px 0px 10px !important; } .channel-template .CollectionRelated .Post .Info { max-width: 640px; margin: 0px 0px 5px 0px; } .channel-template .CollectionRelated .Post .Photo { padding-right: 0px; } .channel-template .CollectionRelated .Post .Text { padding-left: 0px; } .channel-template .CollectionRelated .Post .Title { font-size: var(--FS12); } } @media (min-width: 1200px) { .channel-template .CollectionRelated .Post .Photo { width: 150px; } .channel-template .CollectionRelated .Post .Title { font-size: var(--FS13); } } .channel-template .CollectionPlaylist { display: table; width: 100%; } .channel-template .CollectionPlaylist .Post { display: table-row; } .channel-template .CollectionPlaylist .Post .Number { display: table-cell; width: 20px; vertical-align: middle; padding: 5px; } .channel-template .CollectionPlaylist .Post .Photo { display: table-cell; width: 100px; vertical-align: top; padding: 5px 0px; } .channel-template .CollectionPlaylist .Post .Text { display: table-cell; width: auto; vertical-align: top; padding: 5px 5px 5px 10px; } .channel-template .CollectionPlaylist .Post .Info { margin: 0px 0px 5px 0px; } .channel-template .CollectionPlaylist .Post .Number .Text { font-size: var(--FS12); font-weight: var(--FW500); } .channel-template .CollectionPlaylist .Post .Title { font-size: var(--FS12); font-weight: var(--FW600); } .channel-template .CollectionPlaylist .Post .Info { font-size: var(--FS11); font-weight: var(--FW500); } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .subscription-form .form-control { background: none; border: none; } .subscription-form__has-error .subscription-form__error { display: block; color: #FBFB62; font-size: 12px; font-weight: 500; margin-top: 5px; } .subscription-form__use-submit .InlineFormTable { background-color: unset; outline: none; border: none; } .subscription-form__use-submit .InlineFormTable .InlineFormInput { background-color: var(--Input); outline: solid 3px var(--Transparent); border: solid 1px var(--InputBorder); } .subscription-form__use-submit .InlineFormTable .BottomBarButtons { margin-left: 8px; } @media (max-width: 600px) { .subscription-form__use-submit .InlineFormTable { display: flex; flex-direction: column; row-gap: 8px; align-items: center; } .subscription-form__use-submit .InlineFormTable .BottomBarButtons { margin-left: 0; width: 120px; } .subscription-form__use-submit.subscription-form__has-error .InlineFormTable { row-gap: 24px; } } .brighteon-analytics__wrapper .table thead td { font-weight: bold; text-align: center; } .brighteon-analytics__wrapper .table tr:nth-child(even) { background-color: #f2f2f2; } .brighteon-analytics__wrapper .table .btn-more-details { border: 0px; background: transparent; color: #3366FF; text-transform: capitalize; } .brighteon-analytics__wrapper .list__no-items { text-align: center; justify-content: center; } .brighteon-analytics__wrapper .brighteon-analytics__nav-text { font-size: 14px; color: #000000; font-weight: 700; } .brighteon-analytics__wrapper .brighteon-analytics .nav-item .nav-link { background: #EFEFEF !important; } .brighteon-analytics__wrapper .brighteon-analytics__nav-text.active { color: #3366FF; } .brighteon-analytics__wrapper .brighteon-analytics__stat-number { display: block; font-size: 20px; text-align: center; } .brighteon-analytics__wrapper .brighteon-analytics__title { font-size: 16px; } .brighteon-analytics__wrapper .brighteon-analytics__avatar { margin-right: 15px; cursor: pointer; } .brighteon-analytics__wrapper .brighteon-analytics__avatar img { width: 100%; height: 100%; } .brighteon-analytics__wrapper .brighteon-analytics__avatar.border-rounded { height: 40px; width: 40px; min-width: 40px; } .brighteon-analytics__wrapper .brighteon-analytics__avatar.border-rounded img { border-radius: 50%; } .brighteon-analytics__wrapper .brighteon-analytics__avatar.border-rectangle { max-width: 80px; aspect-ratio: 16/9; } .brighteon-analytics__wrapper .nav-underline .nav-link { font-size: 14px; font-weight: 700; background: #EFEFEF; } .brighteon-analytics__wrapper .nav-underline .nav-link a { color: #000000; } .brighteon-analytics__wrapper .nav-underline .nav-link.active { border-top: 3px solid #3366FF; background: #FFFFFF; color: #3366FF; } .brighteon-analytics__wrapper .overview-diagram__wrapper .tab-content { padding: 5px 15px 30px 15px; border: 1px solid #dee2e6; } .brighteon-analytics__wrapper .trending-wrapper .list-header__title { font-weight: 700; } .brighteon-analytics__wrapper .trending-wrapper .nav-item { background-color: #ffffff; } .brighteon-analytics__wrapper .trending-wrapper .nav-link { font-weight: 700; color: #000000; } .brighteon-analytics__wrapper .trending-wrapper .nav-link.active { color: #3366FF; border-bottom: 2px solid #3366FF; } .brighteon-analytics__wrapper .trending-wrapper .btn-view-more { color: #3366FF; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; align-self: center; margin-left: auto; } .brighteon-analytics__wrapper .trending-wrapper .btn-view-more a { color: #3366FF; } .brighteon-analytics__wrapper .main-header { color: #000; font-size: 28px; font-style: normal; font-weight: 700; line-height: normal; text-transform: unset; margin-bottom: 30px; } .brighteon-analytics__tab .nav-item .nav-link { background: #EFEFEF !important; cursor: pointer; } .brighteon-analytics__tab .nav-item .nav-link.active { border-top: 3px solid #3366FF; background: #FFFFFF !important; } .brighteon-analytics__tab__nav-text.active { color: #3366FF; } .brighteon-analytics__horizontal-stats-bar { height: 20px; background-color: #3366FF; float: left; } .brighteon-analytics__table-item { vertical-align: middle !important; text-align: center; } .brighteon-analytics__table-item__title-thumbnail { text-align: left !important; width: 30%; } .brighteon-analytics__table-item__title-thumbnail a { text-decoration: none; color: #212529; } .brighteon-analytics__table-item__video-title a { text-decoration: none; color: #212529; } .brighteon-analytics__table-item__stats-bar-number { width: 50%; } .brighteon-analytics__table-item__more-details { width: 15%; } .brighteon-analytics__table-item__video-thumbnail { width: 120px; height: 68px; cursor: pointer; } .brighteon-analytics__table-item__channel-thumbnail { width: 68px; height: 68px; cursor: pointer; border-radius: 50%; } .brighteon-analytics__table-item__channel-thumbnail img { border-radius: 50%; } .modal-brighteon-analytics .modal-window__title { text-wrap: wrap; height: 60px; display: block; width: 95%; } .analytics__card { border-top: 1px solid #cccccc; padding-top: 10px; } .analytics__text { font-size: 12px; line-height: 2; } .platform-wrapper .list-header__title { font-weight: 700; } .platform-wrapper .brighteon-traffic-horizontal-line { padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6; } .platform-wrapper .brighteon-traffic-horizontal-line .horizontal-bar { background-color: #f1f1f1; width: 80%; } .platform-wrapper .brighteon-traffic-horizontal-line .horizontal-bar .horizontal-progress { height: 100%; } .platform-wrapper .brighteon-traffic-horizontal-line .horizontal-bar .horizontal-progress.first { background-color: #2c2d67; } .platform-wrapper .brighteon-traffic-horizontal-line .horizontal-bar .horizontal-progress.second { background-color: #5c5da9; } .platform-wrapper .brighteon-traffic-horizontal-line .horizontal-bar .horizontal-progress.third { background-color: #7674b6; } .platform-wrapper .brighteon-traffic-horizontal-line .horizontal-bar .horizontal-progress.fourth { background-color: #9c97ca; } .platform-wrapper .brighteon-traffic-horizontal-line .horizontal-bar .horizontal-progress.fifth { background-color: #bebbdd; } .platform-wrapper .brighteon-traffic-horizontal-line .horizontal-bar .horizontal-progress.sixth { background-color: #e5e6e6; } .platform-wrapper__top-source table td:nth-child(1) { width: 70%; } .platform-wrapper__top-source table td:nth-child(2) { width: 30%; } .modal-visior-analytics-details .modal-window__content { height: 600px; overflow: auto; } .modal-visior-analytics-details .modal-window__content table { border-top: 0px; } .modal-visior-analytics-details .modal-window__content table thead td { border-top: 0px; font-weight: bold; } .TabBox { display: block; width: 100%; overflow-x: auto; overflow-y: hidden; overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; } .TabBox::-webkit-scrollbar { height: 0px; } .TabTable { display: table; position: relative; } .TabCol { display: table-cell; width: auto; vertical-align: middle; padding-right: 10px; cursor: pointer; } .TabHighlight { width: 0px; height: 2px; position: absolute; bottom: 0px; left: 0px; z-index: 1; } .PanelBox { display: block; } .Panel { display: none; } .PanelActive { display: block; } #BrowseTabs .TabCol { padding: 0px 5px 8px 5px; font-size: var(--FS12); font-weight: var(--FW600); } #BrowseTabs .Tab:hover { border-bottom: solid 2px var(--TextSecondary); } #BrowseTabs .TabActive { color: var(--TextPrimary); font-weight: var(--FW600); border-bottom: solid 2px var(--TextPrimary); } #BrowseTabs .TabActive:hover { color: var(--TextPrimary); } @media (min-width: 500px) { #BrowseTabs .TabCol { font-size: var(--FS14); } } @media (min-width: 600px) { #BrowseTabs .TabCol { padding: 0px 10px 8px 10px; } } #NotificationsTabs { display: block; border-bottom: solid 1px var(--NotificationsBorder); background-color: var(--Notifications); } #NotificationsTabs .TabBox { display: block; } #NotificationsTabs .TabTable { display: table; position: relative; width: 100%; } #NotificationsTabs .TabCol { display: table-cell; width: auto; cursor: pointer; padding: 0px 5px 15px 5px; font-size: var(--FS12); color: var(--TextSecondary); } #NotificationsTabs .TabCol:hover { color: var(--TextSecondary); } #NotificationsTabs .TabActive { color: var(--TextPrimary); border-bottom: solid 2px var(--Primary); } #NotificationsTabs .TabActive { font-weight: var(--FW500); } #NotificationsTabs .TabActive:hover { color: var(--TextPrimary); } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .Header-Notifications { background-color: var(--Notifications); } .Header-Notifications .TabBox { border-bottom: solid 1px var(--NotificationsBorder); } .Header-Notifications .StatBox { background-color: var(--StatBox) !important; } .Header-Notifications .Headline { color: var(--TextPrimary); } .Header-Notifications .NotificationBox { border-bottom: solid 1px var(--NotificationsBorder); } .Header-Notifications .NotificationBox:hover { background-color: var(--NotificationsHover); } .Header-Notifications { width: 460px; border: solid 1px; border-radius: 5px; padding: 5px 5px 10px 0px; position: fixed; top: 0px; right: 0px; z-index: 20; } @media (max-width: 599px) { .Header-Notifications { width: 100%; height: 100%; } } .Header-Notifications .StatBox .Headline { font-size: 22px; font-weight: 700; } .Header-Notifications .ButtonIcon.Close { display: block !important; } .Header-Notifications .NotificationsHeader { padding-bottom: 5px; margin-bottom: 15px; } .Header-Notifications .NotificationsHeader .Auto .AutoText { font-size: 16px; } .Header-Notifications .TabBox { display: block; } .Header-Notifications .TabTable { display: table; position: relative; width: 100%; } .Header-Notifications .TabCol { display: table-cell; width: auto; cursor: pointer; padding: 0px 5px 15px 5px; text-align: center; text-align: -webkit-center; font-size: 12px; color: var(--TextSecondary); } .Header-Notifications .TabCol:hover { color: var(--TextPrimary); } .Header-Notifications .TabActive { font-weight: 500; } .Header-Notifications .Panels { padding-top: 15px; overflow-y: scroll; max-height: 68vh; } .NotificationBox { display: block; cursor: pointer; position: relative; } .NotificationBox .Thumb img { width: 100%; height: 100%; } .NotificationBox .Unread { top: 20px; left: 7px; } .NotificationBox .NotificationOptions { position: absolute; top: 5px; right: 5px; z-index: unset; } .NotificationBox .NotificationOptions .Dropdown { padding: 5px 0; min-width: 165px; } .NotificationBox .ButtonSmall { padding: 12px; font-weight: 500; } .NotificationBox a { display: block; padding: 15px 20px 20px 20px; text-decoration: none; } .NotificationBox a:hover { text-decoration: none; } .NotificationBox a .Button { font-weight: 600; } .NotificationTable { display: table; width: 100%; } .NotificationPhoto { display: table-cell; width: 130px; vertical-align: middle; padding: 0px 15px 0px 0px; } .NotificationPhoto .AutoBadge { position: absolute; top: 5px; left: 5px; width: 36px; } .NotificationIcon { display: table-cell; width: 55px; vertical-align: middle; padding: 0px 15px 0px 0px; } .NotificationIcon .Icon svg { color: var(--White); } .NotificationText { display: table-cell; width: auto; vertical-align: middle; } .NotificationCryptoTip { background-color: var(--Gold); } .NotificationStrike { background-color: var(--Orange); } .NotificationSuspension { background-color: var(--Red); } .NotificationMessage { background-color: var(--Blue); } .NotificationUpgrade { background-color: var(--Purple); } .NotificationStats { display: table; width: 100%; text-decoration: none; cursor: auto; } a.NotificationStats:hover { text-decoration: none; } .NotificationStatsCol { display: table-cell; width: auto; vertical-align: top; } .NotificationStats .NotificationStatsCol:nth-child(1) { width: 33.3%; padding-left: 20px; } .NotificationStats .NotificationStatsCol:nth-child(2) { width: 33.4%; padding: 0px 10px; } .NotificationStats .NotificationStatsCol:nth-child(3) { width: 33.3%; padding-right: 15px; } .StatBox { display: block; padding: 15px; background-color: var(--StatBox); border-radius: 3px; } .NotificationCount { display: table; width: 18px; height: 18px; background-color: var(--Red); border-radius: 50%; } .NotificationCount span { display: table-cell; width: auto; vertical-align: middle; text-align: center; color: var(--White); font-size: var(--FS10); line-height: var(--FS10); font-weight: var(--FW600); } .NotificationChannel .AutoIcon { padding: 0px !important; width: 20px; } .NotificationChannel .AutoIcon .AvatarPic { width: 20px; height: 20px; margin-left: 0px; } .DropdownNotificationSetting { z-index: 999999 !important; } .DropdownNotificationSetting .DropdownSetting { min-width: 210px; padding: 5px 0; } .PromoText { word-wrap: break-word; overflow-wrap: break-word; } .ButtonWrap { white-space: normal !important; } .CategoryCard { padding: 0; border-radius: 5px; } .CategoryCard .CardsColCategory { min-height: 156px; } .CategoryCard .ThumbCategory { min-height: 156px; border-radius: 6px; } .CategoryCard .ThumbCategory img { width: 100%; min-height: 156px; object-fit: cover; } @media (max-width: 639.9px) { .CategoryCardsSlider .slick-track { width: 1520px !important; } .CategoryCardsSlider .slick-slide { width: 84px !important; } } @media (min-width: 640px) { .CategoryCardsSlider .slick-slide { width: 114px !important; } } .CategoryCardsSlider .slick-next { right: -5px !important; } .FilterOptionsWrapper { display: inline-block; } .FilterOptionsWrapper .FilterOptionsOverlay { display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.85); width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 999997; } .FilterOptionsWrapper .FilterOptionsOverlay.hidden { visibility: hidden; } .FilterOptionsWrapper .FilterOptionsOverlay .FilterOptionsContent { position: relative; background-color: var(--Modal); padding: 40px; border-radius: 15px; } .FilterOptionsWrapper .FilterOptionsOverlay .FilterOptionsContent .ButtonIconClose { position: absolute; top: 8px; right: 8px; padding: 3px; border-radius: 5px; cursor: pointer; } .FilterOptionsWrapper .FilterOptionsOverlay .FilterOptionsContent .ButtonIconClose:hover { background-color: var(--TransparentHover); } .FilterOptionsWrapper .FilterOptionsOverlay .FilterOptionsContent .FilterOptionsValues { display: flex; } .FilterOptionsWrapper .FilterOptionsOverlay .FilterOptionsContent .FilterOptionsValues .OptionGroupName { color: var(--PrimaryText); text-transform: uppercase; } .FilterOptionsWrapper .FilterOptionsOverlay .FilterOptionsContent .FilterOptionsValues .FilterOptionsGroup { display: flex; flex-direction: column; } .FilterOptionsWrapper .FilterOptionsOverlay .FilterOptionsContent .FilterOptionsValues .FilterOptionsGroup .OptionGroupOptions .OptionName { height: 36px; cursor: pointer; padding-bottom: 15px; font-size: var(--FS13); color: var(--TextSecondary); } .FilterOptionsWrapper .FilterOptionsOverlay .FilterOptionsContent .FilterOptionsValues .FilterOptionsGroup .OptionGroupOptions .OptionName.selected { font-weight: var(--FW700); color: var(--TextPrimary); position: relative; } .FilterOptionsWrapper .FilterOptionsOverlay .FilterOptionsContent .FilterOptionsValues .FilterOptionsGroup .OptionGroupOptions .OptionName.selected:before { content: '\A'; width: 6px; height: 6px; border-radius: 50%; background: var(--Primary); display: inline-block; position: absolute; transform: translateX(calc(-100% - 8px)); } @media (min-width: 600px) { .FilterOptionsWrapper .FilterOptionsOverlay .FilterOptionsContent .FilterOptionsValues .OptionGroupName { padding-bottom: 15px; border-bottom: solid 1px var(--SearchBorder); } .FilterOptionsWrapper .FilterOptionsOverlay .FilterOptionsContent .FilterOptionsValues .FilterOptionsGroup { padding-right: 10px; } .FilterOptionsWrapper .FilterOptionsOverlay .FilterOptionsContent .FilterOptionsValues .FilterOptionsGroup.fourCols { width: 140px; } .FilterOptionsWrapper .FilterOptionsOverlay .FilterOptionsContent .FilterOptionsValues .FilterOptionsGroup.twoCols { width: 210px; } .FilterOptionsWrapper .FilterOptionsOverlay .FilterOptionsContent .FilterOptionsValues .FilterOptionsGroup .OptionGroupOptions .OptionName.selected:before { top: 6px; left: 0; } } @media (max-width: 599px) { .FilterOptionsWrapper .FilterOptionsOverlay { align-items: flex-end; } .FilterOptionsWrapper .FilterOptionsOverlay .FilterOptionsContent { width: 100%; height: 100%; max-height: 80%; position: relative; border-radius: 5px 5px 0 0; overflow: auto; } .FilterOptionsWrapper .FilterOptionsOverlay .FilterOptionsContent .FilterOptionsValues { flex-direction: column; padding-bottom: 20px; } .FilterOptionsWrapper .FilterOptionsOverlay .FilterOptionsContent .FilterOptionsValues .FilterOptionsGroup .OptionGroupOptions .OptionName.selected:before { top: 6px; right: 0; } .FilterOptionsWrapper .FilterOptionsOverlay .FilterOptionsContent .FixedButtons { position: fixed; } } #AlertBar { padding: 10px 20px; margin: 0 auto; font-size: 14px; } #AlertBar a { font-size: 14px; text-decoration: none; } #AlertBar a:hover { text-decoration: underline; } .Blur { -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } .request-invitation-container { min-height: 100vh; background-color: #090A0C; } .request-invitation-container .RegisterTitle { font-weight: 600 !important; } .request-invitation-container__dim { background-color: #061726; } .request-invitation-container__dim .helper { background-color: #04111C !important; border-color: #0A2034 !important; } .request-invitation-container__dim .helper-strength-range { background-color: #0A2034 !important; } .request-invitation-container__night { background-color: #1B192E; } .request-invitation-container__night .helper { background-color: #070A0D !important; border-color: #100E1F !important; } .request-invitation-container__night .helper-strength-range { background-color: #100E1F !important; } .request-invitation-container__light { background-color: #F7F7F9; } .request-invitation-container__light .helper { background-color: #FFFFFF !important; border-color: #ECECEC !important; } .request-invitation-container__light .helper-strength { color: #828282 !important; } .request-invitation-container__light .helper-strength-range { background-color: #ECECEC !important; } .request-invitation-container__light .helper-desc { color: #828282 !important; } .request-invitation-container__light .register-form-toggle { background-color: #171819 !important; } .request-invitation-container div { line-height: 130% !important; font-family: 'Inter', arial, helvetica, sans-serif !important; font-weight: 400; } .request-invitation-container a { color: #1A7EFA; } .request-invitation-container .form-error-global-msg { background-color: #ff0000; text-align: center; color: #fff; font: 600 13.3333px Arial; line-height: 1.6; text-align: center; padding: 10px 5px 10px; margin-bottom: 15px; } .request-invitation-container .Button { border: none 0px; outline: none 0px; cursor: pointer; border-radius: 3px; text-align: center; box-sizing: border-box; text-decoration: none !important; position: relative; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; white-space: nowrap; color: #FFFFFF; } .request-invitation-container .Button:hover { background-color: #2A87F9; } .request-invitation-container .Button:disabled { opacity: 0.2; } .request-invitation-container .register-form-error { margin-top: 10px; color: red; font-size: 12px; } .request-invitation-container .invitation { display: block; margin: 0px auto; padding: 40px; background-color: #17181C; border: solid 1px #17181C; text-align: left; border-radius: 15px; width: 100%; max-width: 500px; } .request-invitation-container .invitation__dim { background-color: #0A2034; border-color: #0F2B44; } .request-invitation-container .invitation__dim .illustration { background-color: #204ECF !important; } .request-invitation-container .invitation__dim .illustration__finish { background-color: #204ECF !important; } .request-invitation-container .invitation__dim a { color: #204ECF !important; } .request-invitation-container .invitation__dim input[type=submit], .request-invitation-container .invitation__dim .button-continue { background-color: #204ECF !important; } .request-invitation-container .invitation__dim input[type=text], .request-invitation-container .invitation__dim input[type=email], .request-invitation-container .invitation__dim input[type=password] { border-color: #233B51 !important; background-color: #0F2B44 !important; } .request-invitation-container .invitation__dim input[type=text]:focus, .request-invitation-container .invitation__dim input[type=email]:focus, .request-invitation-container .invitation__dim input[type=password]:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .request-invitation-container .invitation__light { background-color: #FFFFFF; border-color: #ECECEC; } .request-invitation-container .invitation__light input[type=text], .request-invitation-container .invitation__light input[type=email], .request-invitation-container .invitation__light input[type=password] { border-color: #ECECEC !important; background-color: #F7F7F9 !important; color: #121212 !important; } .request-invitation-container .invitation__light .Headline { color: #121212 !important; } .request-invitation-container .invitation__night { border-color: #312D4D; background-color: #26233E; } .request-invitation-container .invitation__night .illustration { background-color: #204ECF !important; } .request-invitation-container .invitation__night .illustration__finish { background-color: #204ECF !important; } .request-invitation-container .invitation__night a { color: #5E48ED !important; } .request-invitation-container .invitation__night input[type=submit], .request-invitation-container .invitation__night .button-continue { background-color: #5E48ED !important; } .request-invitation-container .invitation__night input[type=text], .request-invitation-container .invitation__night input[type=email], .request-invitation-container .invitation__night input[type=password] { border-color: #4E4B68 !important; background-color: #312D4D !important; } .request-invitation-container .invitation__night input[type=text]:focus, .request-invitation-container .invitation__night input[type=email]:focus, .request-invitation-container .invitation__night input[type=password]:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .request-invitation-container .invitation .button-submit { width: 100%; } .request-invitation-container .invitation .button-cancel { width: 100%; background-color: transparent !important; font-size: 14px; } .request-invitation-container .invitation .register-form { display: block; width: 100%; margin-bottom: 20px; position: relative; } .request-invitation-container .invitation .register-form .helper { position: absolute; width: 250px; background: #FFFFFF; z-index: 999999; right: 10px; pointer-events: none; padding: 15px; font-size: 12px; border-radius: 5px; border: 1px solid #17181C; background-color: #090A0C; color: #B0B3B8; display: flex; flex-direction: column; gap: 10px; } .request-invitation-container .invitation .register-form .helper-header-available { color: #45BD62; } .request-invitation-container .invitation .register-form .helper-header-unavailable { color: #E0203C; } .request-invitation-container .invitation .register-form .helper-desc { color: #B0B3B8; } .request-invitation-container .invitation .register-form .helper-strength { display: flex; flex-direction: column; gap: 10px; color: #B0B3B8; } .request-invitation-container .invitation .register-form .helper-strength-range { width: 100%; background-color: #0A2034; height: 6px; border-radius: 3px; position: relative; } .request-invitation-container .invitation .register-form .helper-strength-range-progress { display: block; width: 100%; height: 6px; border-radius: 3px; position: absolute; top: 0px; left: 0px; z-index: 1; opacity: 0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .request-invitation-container .invitation .register-form .helper-strength-range-progress__Poor { background-color: #E0203C; width: 25%; opacity: 1; } .request-invitation-container .invitation .register-form .helper-strength-range-progress__Fair { background-color: #FF3300; width: 50%; opacity: 1; } .request-invitation-container .invitation .register-form .helper-strength-range-progress__Good { background-color: #1A7EFA; width: 75%; opacity: 1; } .request-invitation-container .invitation .register-form .helper-strength-range-progress__Strong { background-color: #45BD62; width: 100%; opacity: 1; } .request-invitation-container .invitation .register-form .helper-status { font-weight: 600; } .request-invitation-container .invitation .register-form .helper-status span.available { color: #45BD62; } .request-invitation-container .invitation .register-form .helper-status span.unavailable { color: #E0203C; } .request-invitation-container .invitation .register-form-label { font-size: 12px; font-weight: 600; margin-bottom: 5px; } .request-invitation-container .invitation .register-form-toggle { display: inline-block; width: 24px; height: 100%; position: absolute; top: 0px; right: 12px; cursor: pointer; background-color: #FFFFFF; } .request-invitation-container .invitation .register-form-toggle-show { -webkit-mask: url(/static/icons/Icon-Show-Password.svg) no-repeat 50% 50%; mask: url(/static/icons/Icon-Show-Password.svg) no-repeat 50% 50%; } .request-invitation-container .invitation .register-form-toggle-hide { -webkit-mask: url(/static/icons/Icon-Hide-Password.svg) no-repeat 50% 50%; mask: url(/static/icons/Icon-Hide-Password.svg) no-repeat 50% 50%; } .request-invitation-container .invitation .register-form-input { width: 100%; padding: 10px; outline: solid 3px rgba(0, 0, 0, 0); border: solid 1px #424345; border-radius: 3px; font-size: 14px; box-sizing: border-box; transition: all 0.2s ease; color: #FFFFFF; background-color: #242529; height: 40px; } .request-invitation-container .invitation .register-form-input:focus { border-color: #1A94FA !important; outline-color: #1A94FA !important; } .request-invitation-container .invitation__start { display: flex; align-items: center; flex-direction: column; font-size: 14px; text-align: center; } .request-invitation-container .invitation__start .button-continue { font-size: 14px; font-weight: 600; line-height: 14px; padding: 15px 20px; width: 100%; background-color: #1A7EFA; } .request-invitation-container .invitation__start__illustration { display: block; width: 220px; height: 140px; pointer-events: none !important; background-color: #1A7EFA; -webkit-mask: url(/static/icons/Illustration-Sign-Up-Begin.svg) no-repeat 50% 50%; mask: url(/static/icons/Illustration-Sign-Up-Begin.svg) no-repeat 50% 50%; margin-bottom: 10px; } .request-invitation-container .invitation__start__illustration__finish { display: block; width: 220px; height: 140px; pointer-events: none !important; background-color: #1A7EFA; -webkit-mask: url(/static/icons/Illustration-Sign-Up-Completed.svg) no-repeat 50% 50%; mask: url(/static/icons/Illustration-Sign-Up-Completed.svg) no-repeat 50% 50%; margin-bottom: 20px; } .request-invitation-container .invitation__title__step { font-weight: 500; font-size: 12px; margin-bottom: 5px; } .request-invitation-container .invitation__title__title { font-weight: 600; font-size: 24px; margin-bottom: 15px; } .request-invitation-container .invitation__title__desc { font-size: 14px; margin-bottom: 30px; } .request-invitation-container .invitation input[type=submit] { font-size: 12px; font-weight: 700; text-transform: uppercase; padding: 12px 15px 13px 15px; cursor: pointer; background-color: #1A94FA; } .request-invitation-container .invitation input[type=submit]:disabled { cursor: no-drop; } .request-invitation-container .invitation .col-lg-6:first-child { padding-right: 40px; border-right: solid 1px #ececec; } @media (max-width: 960px) { .request-invitation-container .invitation .col-lg-6:first-child { padding-right: 15px; border-right: none; } } .request-invitation-container .invitation .col-lg-6:last-child { padding-left: 40px; } @media (max-width: 960px) { .request-invitation-container .invitation .col-lg-6:last-child { padding-left: 15px; } } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .header { left: 0px; top: 0px; position: sticky; top: 0; z-index: 999997; width: 100%; /* LINKS */ /* //////////////////////////////////////////////////////////////// */ /* MASTHEAD */ /* //////////////////////////////////////////////////////////////// */ /* //////////////////////////////////////////////////////////////// */ /* //////////////////////////////////////////////////////////////// */ /* //////////////////////////////////////////////////////////////// */ } .header__dim { background-color: #061726 !important; } .header__night { background-color: #26233E !important; } .header__dark { background-color: #090A0C !important; } .header__light { background-color: #FFFFFF !important; } .header__system { background-color: #090A0C !important; } .header #ButtonCreate .Dropdown { min-width: 170px; padding: 5px 0; } .header .Button { display: inline-block; vertical-align: middle; text-transform: uppercase; font-size: 11px; padding: 8px 12px; border: none 0px; outline: none 0px; cursor: pointer; border-radius: 3px; text-align: center; box-sizing: border-box; text-decoration: none !important; position: relative; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; white-space: nowrap; margin-left: 3px; } .header .ButtonOrange { background-color: #FF3300; color: #FFFFFF; } .header .ButtonPrimary { background-color: #1A7EFA; color: #FFFFFF; } .header .ButtonPrimary__night { background-color: #5E48ED; } .header .navigation { display: block; width: 252px; height: 100%; position: fixed; left: -252px; top: 0px; z-index: 99999; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .header .navigation__content { display: block; padding: 10px; } .header .navigation .links div { display: block; margin: 0px auto; padding: 10px; font-size: 13px; font-weight: 300; color: #ffffff; white-space: nowrap; } .header .navigation .links div a { display: block; color: #ffffff; text-decoration: none; text-decoration: none; cursor: pointer; } .header .dropdown-header { display: none !important; } .header .highlight { color: #ed1a3b !important; } .header .highlight__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 230px; } .header .navigation_open { left: -2px; } .header .navigation_close { left: -252px; } .header .menu_show { position: fixed; left: 248px; } .header .menu_close { position: absolute; left: 0px; } .header .btn__close { background-image: url(/static/icons/Button-Close.svg) !important; } .header .btn__cover { display: none; width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 8000; } @media (max-width: 1269px) { .header .btn__cover { display: block; } } .header .btn__login { font-size: 10px; font-weight: 700; text-align: left; text-transform: uppercase; background-color: transparent; color: #ffffff; border: none; outline: none; } .header .LinksBar { display: block; padding: 10px 45px; background-color: var(--Masthead); } .header .LinksTable { display: table; width: 100%; } .header .LinksCol { display: table-cell; vertical-align: middle; font-size: var(--FS10); line-height: var(--FS10); font-weight: var(--FW600); color: var(--TextSecondary); } .header .LinksCol a { text-decoration: none; color: var(--TextSecondary); white-space: nowrap; } .header .LinksCol a:hover { color: var(--TextPrimary); } .header .LinksColLeft { width: 50%; } .header .LinksColRight { width: 50%; text-align: right; } .header .LinksColLeft a { padding-right: 8px; } .header .LinksColRight a { padding-left: 8px; } @media (max-width: 999.9px) { .header .LinksBar { display: none; } } .header #Masthead { display: block; padding: 0px 40px 15px 40px; border-bottom: solid 1px var(--MastheadBorder); background-color: var(--Masthead); } .header #MastheadContent { display: table; width: 100%; } .header #MastheadMenu { display: table-cell; width: 40px; vertical-align: middle; padding-right: 10px; } .header #MastheadLogo { display: table-cell; width: 150px; min-width: 150px; vertical-align: middle; padding-top: 5px; } .header #MastheadSearch { display: table-cell; width: auto; vertical-align: middle; padding-left: 10px; padding-right: 10px; } .header #MastheadSearch .ButtonSearchIcon { display: none !important; } @media (max-width: 1083px) { .header #MastheadSearch .ButtonSearchIcon { display: block !important; } } .header #MastheadNavigation { display: table-cell; width: 200px; vertical-align: middle; } @media (max-width: 599px) { .header #ButtonNotifications .Dropdown { position: fixed !important; bottom: 0; transform: none !important; left: 0; top: auto !important; width: 100vw !important; height: 80vh !important; } } @media (max-width: 389.9px) { .header #ButtonNotifications { display: none !important; } } @media (max-width: 449.9px) { .header #ButtonStore { display: none !important; } } @media (max-width: 519.9px) { .header #MastheadMenu { padding-right: 10px; } .header #MastheadLogo { width: 130px; min-width: 130px; } .header #ButtonCreate { display: none !important; } } @media (max-width: 399.9px) { .header #ButtonDonate { display: none; } .header #ButtonShop { display: none; } .header #MastheadMenu .BI40 { width: 30px; height: 30px; padding: 3px; } .header #MastheadMenu .BI40 .Icon { width: 24px; height: 24px; -webkit-mask-size: 24px; } } @media (max-width: 689.9px) { .header #ButtonLogin { display: none; } .header #ButtonSignUp { display: none; } } @media (max-width: 999.9px) { .header #Masthead { display: block; padding: 15px 20px; } .header #MastheadSearch { display: none !important; } .header #MastheadNavigation { width: auto; padding-left: 10px; } } @media (max-width: 579.9px) { .header #ButtonDashboard { display: none !important; } } @media (min-width: 1000px) { .header #ButtonSearch { display: none !important; } .header #ButtonStore { display: none !important; } .header #MastheadNavigation { width: 200px; } } .header #ButtonShop { padding-left: 30px; padding-right: 30px; background-image: url(/static/icons/Icon-Shop-White.svg), url(/static/icons/Icon-Arrow-Down-White.svg); background-position: center left 8px, center right 8px; background-repeat: no-repeat, no-repeat; background-size: 18px, 18px; } .header #ButtonDonate { margin-right: 0px; } .header .MastheadTable { display: table; width: 100%; max-width: 1000px; margin: 0px auto; } .header .MastheadColLeft { display: table-cell; width: auto; vertical-align: middle; padding-right: 15px; } .header .MastheadColRight { display: table-cell; width: 170px; vertical-align: middle; } .header .MastheadLink { color: var(--TextSecondary); } .header .MastheadLink:hover { color: var(--TextPrimary); } .header .MastheadLink a { color: var(--TextSecondary); } .header .MastheadLink a:hover { color: var(--TextPrimary); } .header .masthead { display: table; width: 100%; margin: 0px auto; padding: 15px 20px; } .header .masthead__content { display: table-row; } .header .masthead__content .btn-menu { display: table-cell; width: 70px; cursor: pointer; background-repeat: no-repeat; background-position: center center; } .header .masthead__content .btn-menu__show { background-image: url(/static/icons/Button-Menu.svg); } .header .masthead__content .btn-menu__show__light { background-image: url(/static/icons/Button-Menu-Black.svg); } .header .masthead__content .btn-menu__close { background-image: url(/static/icons/Button-Close.svg); } .header .masthead__content__shop { display: table-cell; text-align: right; vertical-align: middle; } .header .masthead__content__shop span { display: none; } .header .masthead__content__shop .btn__donate { margin-left: 7px; } .header .masthead__content__shop .btn__donate:hover { color: #ffffff; } .header .masthead__content__shop .btn__books { background-color: #36f; margin-left: 7px; padding: 6px 0px; display: inline-block; } .header .masthead__content__shop .btn__books div { display: flex; align-items: center; } .header .masthead__content__shop .btn__books div span:first-child { display: inline-block; background: url(/static/icons/Icon-Book.svg); background-repeat: no-repeat; background-size: contain; width: 20px; min-width: 20px; height: 20px; margin: 0px 5px 0px 7px; padding: 0; } .header .masthead__content__shop .btn__books div span { display: inline-block; font-size: inherit; color: white; padding: 0; } .header .masthead__content__shop .btn__books:hover { color: #ffffff; } .header .masthead__content .logo { display: table-cell; width: auto; padding: 10px 0px; vertical-align: middle; } .header .masthead__content .logo img { max-width: 140px; width: 100%; max-height: 100%; } .header .masthead .search { display: none; } .header .search-mobile { display: block; padding: 10px; background-color: #ffffff; } .header .search-mobile__container { display: block; width: 100%; background-color: #ffffff; position: relative; } .header .search-mobile__container .form__input { margin-bottom: 0px; } .header .search-mobile--error { color: #ed1a3b; font-size: 12px; } .header .search-mobile__input { display: table-cell; width: auto; vertical-align: middle; } .header .search-mobile__input input { width: 95%; height: 24px; padding-left: 5px; font-size: 14px; color: #999999; border: none 0px; outline: none 0px; background-color: rgba(0, 0, 0, 0); } .header .search-mobile__submit { display: table-cell; text-align: center; vertical-align: middle; position: absolute; top: 5px; right: 0px; } .header #statusmessagediv { padding: 15px; background: #1b2c5a; color: #fff; text-align: center; font-weight: 600; } .header #statusmessagediv:empty { display: none; } @media screen and (max-width: 575px) { .header .search__input { width: 100%; min-width: auto; } .header .MastheadNavigation { display: table-cell; vertical-align: middle; } .header .MastheadNavigation #ButtonLogin { display: none; } .header .MastheadNavigation #ButtonSignUp { display: none; } .header .MastheadNavigation .ButtonBox { display: flex; align-items: center; justify-content: flex-end; } } @media screen and (max-width: 485px) { .header .btn-menu { width: auto !important; min-width: 40px; } .header .masthead__content__shop { width: auto; display: flex; padding: 10px 3px; } .header .btn__books .header--book__icon { margin-left: 0px !important; } } @media screen and (max-width: 375px) { .header .btn__books { display: none !important; } } @media screen and (min-width: 575px) { .header .menu_close { position: static; left: 0px; } .header .MastheadNavigation { display: table-cell; width: auto; vertical-align: middle; } .header .MastheadNavigation .ButtonBox { display: flex; justify-content: flex-end; align-items: center; gap: 5px; } .header .MastheadNavigation .ButtonBox .Button { display: inline-block; vertical-align: middle; text-transform: uppercase; font-size: 11px; padding: 8px 12px; border: none 0px; outline: none 0px; cursor: pointer; border-radius: 3px; text-align: center; box-sizing: border-box; text-decoration: none !important; position: relative; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; white-space: nowrap; margin-left: 3px; } } @media (min-width: 1000px) { .header .navigation { display: block; position: static; width: auto; height: auto; padding: 0px; border-bottom: solid 1px #333333; } .header .navigation__content { display: table; width: 100%; margin: 0px auto; padding: 10px 45px; } .header .navigation__content--left { display: table-cell; width: auto; text-align: left; width: 50%; padding: 0px; } .header .navigation__content--left .links { float: left; } .header .navigation__content--left .links div { display: table-cell; width: auto; padding: 0px 15px 0px 0px; border-bottom: none 0px; font-size: 10px; font-weight: 700; color: #666666; text-align: left; text-transform: uppercase; } .header .navigation__content--left .links div a { color: #666666; } .header .navigation__content--left .links div a:hover { color: #ffffff; } .header .navigation__content--right { display: table-cell; width: auto; text-align: right; padding: 0px; } .header .navigation__content--right .links { float: right; } .header .navigation__content--right .links div { display: table-cell; width: auto; padding: 0px 15px 0px 0px; border-bottom: none 0px; font-size: 10px; font-weight: 700; text-align: left; text-transform: uppercase; } .header .navigation__content--right .links div a { color: #666666; } .header .navigation__content--right .links div a:hover { color: #ffffff; } .header .navigation__content--right .links .hamburger_link { display: none; } .header .navigation__content--right .links .end_padding { padding-right: 19px; } .header .navigation__content--right .links .dropdown-header { display: table-cell; width: 24px; position: relative; height: 15px !important; } .header .navigation__content--right .links .dropdown-header .btn-dropdown { width: 24px; height: 12px; cursor: pointer; background-repeat: no-repeat; background-position: center center; background-image: url(/static/icons/Button-Menu-Small.svg); position: relative; top: 2px; } .header .navigation__content--right .links .dropdown-header .dropdown-content { display: none !important; position: absolute; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 9999999; right: 20px; top: 20px; background-color: #000000; border: 1px solid #212529; border-radius: 3px; padding: 0; } .header .navigation__content--right .links .dropdown-header .dropdown-content-open { display: block !important; } .header .navigation__content--right .links .dropdown-header .dropdown-content .dropdown-link { padding: 12px 16px; text-decoration: none; display: block; width: 100%; } .header .navigation__content--right .links .dropdown-header .dropdown-content .dropdown-link:hover { background-color: #212529; } .header .navigation__content--right .links .dropdown-header .dropdown-content .dropdown-link a { color: #ed1a3b !important; } .header .links { display: table; width: auto; margin: 0px 0px 0px 20px; } .header .links div { display: table-cell !important; width: auto; padding: 0px 15px 0px 0px; border-bottom: none 0px; font-size: 10px; font-weight: 700; color: #666666; text-align: left; text-transform: uppercase; } .header .links div a { color: #666666; text-decoration: none; } .header .links div a:hover { color: #ffffff; } .header .masthead { display: block; width: auto; padding: 5px 20px 5px 20px; } .header .masthead__content { display: table; width: 100%; margin: 0px auto; } .header .masthead__content__shop { width: auto; } .header .masthead__content__shop span { display: inline; font-family: 'Roboto'; font-size: 17px; font-weight: 700; color: #ffffff; padding-right: 12px; } .header .masthead__content .search { display: table-cell; width: auto; color: #ffffff; padding: 0px; vertical-align: middle; } .header .masthead__content .search__container { border: none 0px; position: relative; display: block !important; border-radius: 20px; background-color: var(--Search); } .header .masthead__content .search__container .form__input { margin-bottom: 0px; height: 40px; margin: 0px auto; padding-right: 80px; outline: solid 1px var(--Transparent); border: solid 1px var(--SearchBorder); border-radius: 20px; } .header .masthead__content .search__container .form__input__system { background-color: #424345; } .header .masthead__content .search__container .form__input__light { background-color: #F7F7F9; } .header .masthead__content .search__container .form__input__dark { background-color: #424345; border: solid 1px #242529; } .header .masthead__content .search__container .form__input__dim { background-color: #45586D; border: solid 1px #0F2B44; } .header .masthead__content .search__container .form__input__night { background-color: #3b375d; border: solid 1px #242529; } .header .masthead__content .search__container .form__input input.query_search { width: 100%; height: 36px; font-size: var(--FS14); background-color: var(--Transparent); color: var(--InputText); } .header .masthead__content .search__container--error { color: #ed1a3b; font-size: 12px; } .header .masthead__content .search__submit { position: absolute; right: 5px; top: 5px; display: flex; gap: 5px; padding-right: 10px; } .header .masthead__content .search__input { min-width: 300px; background: none; } .header .masthead__content .search-container { display: table; width: 100%; max-width: 1000px; margin: 0px auto; } .header .masthead__content .search__left { display: table-cell; width: auto; vertical-align: middle; padding-right: 15px; } .header .masthead__content .search__right { display: table-cell; width: 170px; vertical-align: middle; } .header .masthead__content .search__right .AutoLabel { text-transform: none; } .header .masthead__content .MastheadNavigation { display: table-cell; width: 200px; vertical-align: middle; } .header .masthead__content .MastheadNavigation .ButtonBox { display: block; } .header .masthead__content .MastheadNavigation .ButtonBox .Button { display: inline-block; vertical-align: middle; text-transform: uppercase; font-size: 11px; padding: 8px 12px; border: none 0px; outline: none 0px; cursor: pointer; border-radius: 3px; text-align: center; box-sizing: border-box; text-decoration: none !important; position: relative; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; white-space: nowrap; margin-left: 3px; } .header .masthead__content .MastheadNavigation .ButtonBox .ButtonIcon { display: inline-block; vertical-align: middle; width: 40px; height: 40px; border-radius: 5px; cursor: pointer; background-color: transparent; } .header .masthead__content .MastheadNavigation .ButtonBox .ButtonIcon .Icon { display: block; width: 24px; height: 24px; -webkit-mask-size: 24px; pointer-events: none !important; position: relative; fill: #5E48ED; color: #FFFFFF; } .header .masthead__content .MastheadNavigation .ButtonBox .ButtonIcon .Icon__light { color: #171819; } .header .masthead__content .MastheadNavigation .ButtonBox .ButtonIcon .Icon svg { width: 24px; height: 24px; } .header .masthead__content__container { position: relative; } .header .masthead__content__submit { position: absolute; right: 0; top: 0; } .header .masthead__content .logo { text-align: left; width: 140px; vertical-align: middle; position: relative; } .header .search-mobile { display: none; } } @media (min-width: 1200px) { .header .navigation__content--right .links .end_padding { padding-right: 19px; } } @media (min-width: 1400px) { .header .navigation__content--left .links { margin: 0px; } .header .navigation__content--right .links .end_padding { padding-right: 0px !important; } .header .links { margin: 0px; } } .header .AvatarPic { width: 36px; height: 36px; margin-left: 15px; display: inline-block; cursor: pointer; position: relative; vertical-align: middle; border-radius: 50%; } .header .AvatarPic img { border-radius: 50%; width: 100%; height: 100%; } .btn__search { background: transparent url(/static/icons/Icon-Submit-Search.svg) no-repeat right top !important; border: solid 0px #000000; width: 40px; height: 30px; } .ButtonRed { background-color: #E0203C; } .ButtonRed a { color: #FFFFFF; text-decoration: none; } .dropdown-menu .dropdown-item { padding: 0px; } .dropdown-menu .AutoIcon { padding: 4px 8px; display: table-cell; } .dropdown-menu .AutoIcon .Icon { height: 24px; width: 24px; } .dropdown-menu .AutoIcon .Icon svg { height: 24px; width: 24px; color: var(--Icon) !important; } .dropdown-menu .AutoLabel { padding: 4px 8px; display: table-cell; font-size: 14px; line-height: 130%; } .AlertStyle { text-align: center; } .ButtonIcon { display: inline-block; vertical-align: middle; border-radius: 5px; cursor: pointer; background-color: transparent; } .ButtonIcon .Icon { display: block; width: 24px; height: 24px; -webkit-mask-size: 24px; pointer-events: none !important; position: relative; fill: #5E48ED; color: #FFFFFF; } .ButtonIcon .Icon__light { color: #171819; } .ButtonIcon .Icon svg { width: 24px; height: 24px; fill: var(--Primary); color: var(--Icon); } .ButtonIcon .Icon .Notification { position: absolute; top: 0px; right: -15px; content: '\A'; width: 6px; height: 6px; border-radius: 50%; background: var(--Primary); display: inline-block; position: absolute; transform: translateX(calc(-100% - 8px)); } .SearchBox { display: block; height: 40px; margin: 0px auto; outline: solid 1px var(--Transparent); border: solid 1px var(--SearchBorder); border-radius: 20px; background-color: var(--Search); } .SearchActive { outline-color: var(--Primary); } .SearchTable { display: table; width: 100%; height: 100%; } .SearchInput { display: table-cell; width: auto; vertical-align: middle; padding-left: 15px; padding-right: 5px; } .SearchClear { display: table-cell; width: 40px; vertical-align: middle; } .SearchFilter { display: table-cell; width: 40px; vertical-align: middle; } .SearchSubmit { display: table-cell; width: 40px; vertical-align: middle; padding-right: 10px; } .SearchHide { display: none !important; } .SearchInput input { width: 100%; height: 36px; font-size: var(--FS14); background-color: var(--Transparent) !important; } /* //////////////////////////////////////////////////////////////////// */ #SearchHeader .Auto .AutoLabel { padding-left: 0px; } #SearchHeader .Auto .AutoIcon { padding: 0px 5px; width: 30px; } .BlurBackdrop { backdrop-filter: blur(10px); } #ButtonLogin a { color: var(--TextButton) !important; } #ButtonLogin a:hover { text-decoration: none; } #ButtonSignUp a:hover { text-decoration: none; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .ModalAdvancedSearch .MGB40 { margin-bottom: 40px; } .ModalAdvancedSearch .AutoText { color: var(--TextPrimary) !important; } .ModalAdvancedSearch .ButtonBoxRight { text-align: right; } .ModalAdvancedSearch .FormInput input { width: 100%; padding: 10px; outline: solid 3px var(--Transparent); border: solid 1px var(--InputBorder); border-radius: 3px; font-size: var(--FS14); background-color: var(--Input); } .ModalAdvancedSearch .FormInput input:focus { border-color: var(--Primary); outline-color: var(--Primary); } .ModalAdvancedSearch .FormLabel { display: block; color: var(--TextPrimary); } .ModalAdvancedSearch .ButtonMedium { padding: 10px 20px !important; font-size: 13px !important; line-height: 13px !important; font-weight: 600 !important; text-transform: none; } .ModalAdvancedSearch .Button { margin-left: 3px; } .ModalAdvancedSearch .FilterRadio { display: none; } .ModalAdvancedSearch .FilterLabel { display: block; padding-bottom: 15px; font-size: var(--FS13); color: var(--TextSecondary); cursor: pointer; position: relative; margin-bottom: 0; } .ModalAdvancedSearch .FilterActive { font-weight: var(--FW700); color: var(--TextPrimary); } .ModalAdvancedSearch .FilterActive::before { content: '\A'; width: 6px; height: 6px; border-radius: 50%; background: var(--Primary); display: inline-block; position: absolute; transform: translateX(calc(-100% - 8px)); } .ModalAdvancedSearch .FormLabel { padding-bottom: 15px; border-bottom: solid 1px var(--DARK_Gray50); text-transform: uppercase; } .ModalAdvancedSearch .FilterDisabled { pointer-events: none; } .ModalAdvancedSearch .FilterDisabled .FilterLabel { opacity: 0.2; } .ModalAdvancedSearch button:disabled { opacity: 0.2; } @media (max-width: 599px) { .ModalAdvancedSearch { width: 100% !important; height: 80% !important; transform: none !important; bottom: 0 !important; left: 0 !important; top: unset !important; padding: 20px !important; background-color: #17181c; } .ModalAdvancedSearch #AdvancedSearchForm { display: block; height: 100%; overflow-x: hidden; overflow-y: auto; } .ModalAdvancedSearch .FilterTable { display: block !important; padding: 0px 20px 0px 20px; overflow-x: hidden; overflow-y: scroll !important; height: 65%; } .ModalAdvancedSearch .FilterActive:before { top: 4px; right: -15px; } .ModalAdvancedSearch .ModalPanel { padding: 50px 20px 100px 20px; } .ModalAdvancedSearch .FixedButtons { position: relative; width: 100%; position: absolute; z-index: 21; bottom: 0px; left: 0px; padding: 20px 0px 0px 20px; border-top: solid 1px var(--ModalBorder); } .ModalAdvancedSearch .FixedHeader { position: relative !important; padding: 0px 10px 10px 5px; margin-bottom: 20px; } .ModalAdvancedSearch .ModalPanel { padding-right: 15px; } .FilterCol { margin-bottom: 20px; display: block; border-bottom: solid 1px var(--SearchBorder); } } @media (min-width: 600px) { .ModalAdvancedSearch .FilterCol { display: table-cell; width: 20%; padding-right: 10px; vertical-align: top; } .ModalAdvancedSearch .FilterCol .FormLabel { padding-bottom: 15px; border-bottom: solid 1px var(--SearchBorder); } .ModalAdvancedSearch .FilterActive:before { top: 8px; left: 0px; } .ModalAdvancedSearch .BW760 { width: 100%; max-width: 760px !important; } } .footer { display: block; padding: 30px; padding-top: 60px; margin: 0px auto 0px auto; width: 100%; color: var(--TextPrimary); background: var(--Page); } .footer .footer__content { display: block; margin: 0px auto; } .footer .footer__content img { max-width: 100%; max-height: 100%; border: none; } .footer .footer__content__newsletter_social { padding: 30px 0px; } .footer .footer__content__newsletter_social .Content { max-width: 600px; padding: 30px 0px; margin: 0px auto; } .footer .footer__content__newsletter_social .FooterSubhead { font-size: 15px; font-weight: 600; margin-bottom: 15px; } .footer .footer__content__newsletter_social .ButtonIcon { margin-right: 8px; border-radius: 50%; border: solid 1px var(--FooterBorder); } .footer .footer__content__newsletter_social .FooterCol { text-align: center; } .footer .footer__content__newsletter_social .FooterText { font-size: 14px; margin-bottom: 15px; } .footer .footer__content__newsletter_social .FooterPrivacy { font-size: 12px; } .footer .footer__content__newsletter_social .FooterForm { margin: 0px auto; } .footer .footer__content__newsletter_social .InlineFormTable { margin-bottom: 30px; } .footer .footer__content__newsletter_social .InlineFormSubmit .ButtonIcon { border: none 0px; } .footer .footer__content__newsletter_social .InlineFormSubmit .ButtonIcon:hover .Icon svg { color: var(--Primary); } .footer .footer__content__footer_links { display: none; padding: 20px 40px; } .footer .footer__content__footer_links .Content { max-width: 1000px; margin: 0px auto; display: block; } .footer .footer__content__footer_links .Content .FooterTable { display: table; width: 100%; } .footer .footer__content__footer_links .Content .FooterCol { display: table-cell; vertical-align: top; } .footer .footer__content__footer_links .Content .FooterCol { vertical-align: top; padding: 0px 20px; } .footer .footer__content__footer_links .Content .FooterCol:nth-child(1) { width: 33%; } .footer .footer__content__footer_links .Content .FooterCol:nth-child(2) { width: 34%; } .footer .footer__content__footer_links .Content .FooterCol:nth-child(3) { width: 33%; } @media (min-width: 600px) and (max-width: 1024px) { .footer .footer__content__footer_links { display: block; } } @media (min-width: 1024px) { .footer .footer__content__footer_links { display: block; } } .footer .footer__content__disclaimer { padding: 20px 40px; } .footer .footer__content__disclaimer .Content { max-width: 600px; margin: 0px auto; display: block; } .footer .footer__content__disclaimer .FooterCol { text-align: center; } .footer .footer__content__disclaimer .FooterCol a { text-decoration: underline; } .footer .footer__content__disclaimer .Logo { max-width: 200px; margin: 0px auto; } .footer .FooterCol { display: block; margin-bottom: 15px; font-size: 13px; } .footer .footer__content__newsletter_social .FooterSubhead { color: var(--extPrimary); } .footer .FooterCol { color: var(--TextSecondary); } .footer .FooterCol a { color: var(--TextPrimary); text-decoration: none; } @media (min-width: 768px) { .footer .footer__content { display: table; width: 100%; max-width: 1360px; } .footer .footer__content .footer__content--left { display: table-cell; vertical-align: top; width: 400px; } .footer .footer__content .footer__content--right { display: table-cell; vertical-align: top; width: auto; } } /* FOOTER */ .Footer { display: block; padding-top: 20px; padding-bottom: 20px; } .FooterTable { display: block; } .FooterCol { display: block; margin-bottom: 15px; color: var(--TextSecondary); font-size: var(--FS13); } .FooterCol a { color: var(--TextPrimary); text-decoration: none; } .FooterCol a:hover { color: var(--TextPrimary); text-decoration: underline; } .FooterGroup { display: block; } .FooterSubhead { font-size: var(--FS15); font-weight: var(--FW600); } .FooterLink { display: block; margin-bottom: 10px; font-size: var(--FS13); } .FooterText { font-size: var(--FS14); margin-bottom: 15px; } .FooterForm { display: block; } .FooterPrivacy { font-size: var(--FS12); } /* FOOTER NEWSLETTER/ SOCIAL */ #NewsletterSocial .Content { max-width: 600px; padding: 30px 0px; } #NewsletterSocial .FooterSubhead { color: var(--TextPrimary); } #NewsletterSocial .ButtonIcon { margin-right: 8px; border-radius: 50%; border: solid 1px var(--FooterBorder); } #NewsletterSocial .FooterCol { text-align: center; } #NewsletterSocial .FooterForm { margin: 0px auto; } #NewsletterSocial .InlineFormTable { margin-bottom: 30px; } #NewsletterSocial .InlineFormSubmit .ButtonIcon { border: none 0px; } #NewsletterSocial .InlineFormSubmit .ButtonIcon:hover .Icon svg { color: var(--Primary); } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .dashboard-top-bar { display: block; margin: 0 auto; border-bottom: 1px solid #ececec; padding: 15px 10px 15px 15px; } .dashboard-top-bar a { font-size: 13px; color: #666666; margin-top: 9px; } .dashboard-top-bar__wrapper { display: block; width: 100%; } .dashboard-top-bar--left { align-self: center; } .dashboard-top-bar--right { background: linear-gradient(to bottom, #ececec 0%, rgba(236, 236, 236, 0.5) 50%, rgba(255, 255, 255, 0) 100%); } .dashboard-top-bar__info { display: flex; } .dashboard-top-bar__info--left { display: flex; flex: 1; } .dashboard-top-bar__info__avatar--rounded { height: 40px; width: 40px; min-width: 40px; margin-right: 15px; } .dashboard-top-bar__info__avatar--rounded img { width: 100%; height: 100%; border-radius: 50%; } .dashboard-top-bar__info__main { vertical-align: top; padding-right: 15px; } .dashboard-top-bar__info__name { font-size: 1.15rem; } .dashboard-top-bar__info__submain { font-size: 1rem; } .dashboard-top-bar__info__submain a { color: #ed1a3b; } .dashboard-top-bar__info__setting button { text-transform: uppercase; font-size: 0.75rem; font-weight: 700; } @media (min-width: 1024px) { .dashboard-top-bar__info__setting { display: none; } } .dashboard-top-bar__menu { display: table; width: 100%; } .dashboard-top-bar__menu a:hover { text-decoration: none; color: #666666; } .dashboard-top-bar__menu .dropdown-item { color: #666666; font-size: 13px; cursor: pointer; } .dashboard-top-bar__menu .dropdown-item:hover { text-decoration: none; color: inherit; } .dashboard-top-bar__menu .dropdown-item:focus { outline: 0; background: transparent; } .dashboard-top-bar__menu__top, .dashboard-top-bar__menu__bottom { display: block; } .dashboard-top-bar__menu-item { display: block; border-bottom: solid 1px #ececec; margin-top: 0 !important; } .dashboard-top-bar__menu-item a { color: #333333 !important; font-size: 0.75rem; } .dashboard-top-bar__menu-item:last-child { border-bottom: none; } .dashboard-top-bar__icon { padding: 15px 15px 15px 45px; text-align: left; color: #333333; cursor: pointer; outline: none; background: transparent; background-repeat: no-repeat; background-position: 10px center; background-size: 30px 30px; } .dashboard-top-bar__icon:hover { background-color: #f1f1f1; } .dashboard-top-bar__icon_invite { background-image: url(/static/icons/Icon-Dashboard-Invites.svg); } .dashboard-top-bar__icon_bookmark { background-image: url(/static/icons/Icon-Dashboard-Bookmark.svg); } .dashboard-top-bar__icon_favorite { background-image: url(/static/icons/Icon-Dashboard-Favorite.svg); } .dashboard-top-bar__icon_home { background-image: url(/static/icons/Icon-Dashboard-Home.svg); } .dashboard-top-bar__icon_upload { background-image: url(/static/icons/Icon-Dashboard-Upload.svg); } .dashboard-top-bar__icon_video { background-image: url(/static/icons/Icon-Dashboard-Videos.svg); } .dashboard-top-bar__icon_subscriptions { background-image: url(/static/icons/Icon-Dashboard-Subscriptions.svg); } .dashboard-top-bar__icon_playlist { background-image: url(/static/icons/Icon-Dashboard-Playlist.svg); } .dashboard-top-bar__icon_sales { background-image: url(/static/icons/Icon-Dashboard-Sales.svg); } .dashboard-top-bar__icon_livestream { background-image: url(/static/icons/Icon-Dashboard-Live.svg); } .dashboard-top-bar__icon_transactions { background-image: url(/static/icons/Icon-Dashboard-Transactions.svg); } .dashboard-top-bar__icon_library { background-image: url(/static/icons/Icon-Dashboard-Library.svg); } .dashboard-top-bar__icon_comments { background-image: url(/static/icons/Icon-Dashboard-Comments.svg); margin-top: 0px !important; background-size: 26px 26px; } @media (min-width: 1024px) { .dashboard-top-bar__icon_comments { background-position: center 5px !important; background-size: 35px 35px !important; } } .dashboard-top-bar__icon_stats { background-image: url(/static/icons/Icon-Dashboard-Stats.svg); } .dashboard-top-bar__icon_account { background-image: url(/static/icons/Icon-Dashboard-Account.svg); } .dashboard-top-bar__icon_notification { background-image: url(/static/icons/Icon-Dashboard-Notification.svg); } .dashboard-top-bar__icon_notification-active { background-image: url(/static/icons/Icon-Dashboard-Notification-Active.svg); } .dashboard-top-bar__icon_admin { background-image: url(/static/icons/Icon-Dashboard-Admin.svg); } .dashboard-top-bar__icon_tokens { background-image: url(/static/icons/Icon-Dashboard-Tokens.svg); } .dashboard-top-bar__icon_livestream { background-image: url(/static/icons/Icon-Dashboard-Live.svg); } @media (min-width: 1024px) { .dashboard-top-bar { background-color: #ececec; padding-left: 15px; padding-right: 15px; } .dashboard-top-bar__wrapper { display: flex; } .dashboard-top-bar--right { flex: 1; display: block; width: 100%; } .dashboard-top-bar--right .collapse { display: block !important; } .dashboard-top-bar__menu { display: flex; width: auto; margin: 0px; float: right; } } @media (min-width: 1024px) and (max-width: 1578px) { .dashboard-top-bar__menu { flex-direction: column; float: left 20px; } } @media (min-width: 1024px) { .dashboard-top-bar__menu__top, .dashboard-top-bar__menu__bottom { display: flex; } .dashboard-top-bar__menu-item { display: flex; flex-direction: row; min-width: 90px; text-align: center; vertical-align: middle; background-position: top center; background-size: 20px 20px; padding: 20px 15px 15px 15px; color: #333333; border-left: 1px solid #cccccc; } .dashboard-top-bar__menu-item a { word-wrap: normal; width: 100%; } } @media (min-width: 1024px) and (max-width: 1578px) { .dashboard-top-bar__menu-item { width: 160px; } } @media (min-width: 1024px) and (max-width: 1384px) { .dashboard-top-bar__menu-item { width: 150px; } } @media (min-width: 1024px) and (max-width: 1314px) { .dashboard-top-bar__menu-item { width: 140px; } } @media (min-width: 1024px) and (max-width: 1244px) { .dashboard-top-bar__menu-item { width: 130px; } } @media (min-width: 1024px) and (max-width: 1174px) { .dashboard-top-bar__menu-item { width: 120px; } } @media (min-width: 1024px) and (max-width: 1104px) { .dashboard-top-bar__menu-item { width: 110px; } } @media (min-width: 1024px) { .dashboard-top-bar__menu-item:last-child { border-right: none; } } @media (min-width: 1025px) { .dashboard-top-bar { margin: 0; } .dashboard-top-bar__wrapper { max-width: 1475px; margin: 0 auto; padding: 0px; } .dashboard-top-bar__menu-item { padding: 30px 0 0px 0; background-size: 40px 40px; text-align: center; } } .menu-admin { display: inline; } @media (max-width: 960px) { .menu-admin { display: block; } } .menu-admin .dropdown-menu { transform: translate3d(-85px, 25px, 0px) !important; } @supports (-ms-ime-align: auto) { @media (max-width: 1544px) { .menu-admin .dropdown-menu { transform: none !important; right: 0 !important; top: auto !important; left: auto !important; } } } @media (max-width: 960px) { .menu-admin .dropdown-menu { top: -220px !important; left: 100px !important; } } .menu-admin .dropdown-menu .dropdown-item { padding: 0.25rem 1.5rem; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .bottom-banner { display: flex; justify-content: center; position: fixed; bottom: 0; width: 100%; height: 54px; background-color: #4646FE; color: #fff; z-index: 100; } .bottom-banner__inner { display: flex; align-items: center; justify-content: center; } .bottom-banner a, .bottom-banner a:hover { display: block; color: #fff; text-decoration: none; text-transform: uppercase; font-weight: 700; text-align: center; } .bottom-banner a, .bottom-banner form { padding: 0 7px; } .bottom-banner .subscription-form__form { width: 100%; } .bottom-banner .subscription-form__has-error .subscription-form__error { display: none; } .bottom-banner .subscription-form__has-error .subscription-form__input ::placeholder { font-weight: 700; color: #ed1a3b; } .bottom-banner__close { width: 26px; height: 26px; margin-left: 7px; background-image: url(/static/icons/Icon-White-Close.svg); background-position: center center; background-size: 13px 13px; background-repeat: no-repeat; cursor: pointer; } @media (max-width: 1099px) { .bottom-banner { height: auto; } .bottom-banner__inner { flex-direction: column; padding: 15px; max-width: 700px; } .bottom-banner a, .bottom-banner form, .bottom-banner .bottom-banner__close { padding: 7px; } .bottom-banner form { width: 100%; } .bottom-banner .subscription-form__input { width: calc(100% - 97px); } } .bottom-banner .btn_learn_more { display: none; background-color: #000000; padding: 10px 20px; border-radius: 3px; font-size: 13px; line-height: 15px; font-weight: 600; } @media (max-width: 600px) { .bottom-banner .btn_learn_more { display: block; } .bottom-banner .bottom-banner__text { margin: 0px auto 20px auto; text-align: center; } .bottom-banner .bottom-banner__close { position: absolute; top: 8px; right: 8px; } } .channel-videos { width: 100%; } .channel-section { width: 100%; } .channel-section__header .shop-now-small-screen { width: 224px; font-size: 12px; color: #FFFFFF; font-weight: 600; display: none; } .channel-section__header .shop-now-small-screen:hover { color: #FFFFFF; } @media (max-width: 600px) { .channel-section__header .shop-now-small-screen { display: block; } } .channel-section__header .channel-title { display: flex; flex-direction: row; } .channel-section__header .channel-title__thumbnail { padding-right: 15px; } .channel-section__header .channel-title__thumbnail .channel-thumbnail { width: 60px; height: 60px; min-height: 60px; border-radius: 50%; } .channel-section__header .channel-title__name .channel-info-button { font-size: 12px; font-weight: 700; text-transform: uppercase; border: none; border-radius: 3px; padding: 9px 12px; margin-right: 15px; cursor: pointer; } @media (max-width: 500px) { .channel-section__header .channel-title__name .channel-info-button { margin-right: 0.35em; } } .channel-section__header .channel-title__name .channel-info-button.rss { background-color: #ed1a3b; color: #fff; text-decoration: none; } .channel-section__header .channel-title__name .channel-info-button.subscribe { padding: 7px 12px; } .channel-section__header .channel-title__name .checkmark-icon { margin-left: 8px; width: 25px; } .channel-section__header .channel-navigation { display: flex; flex-direction: row; margin: 5px 0; } @media (max-width: 800px) { .channel-section__header .channel-navigation { flex-flow: column; } .channel-section__header .channel-navigation .search__container { width: 100%; } .channel-section__header .channel-navigation .channel-section__filter { margin-top: 15px; } } .channel-section__header .channel-navigation__tab { padding-right: 30px; display: flex; justify-content: center; align-items: center; } .channel-section__header .channel-navigation__tab .shop-now { width: 224px; font-size: 12px; color: #FFFFFF; font-weight: 600; } .channel-section__header .channel-navigation__tab .shop-now:hover { color: #FFFFFF; } @media (max-width: 600px) { .channel-section__header .channel-navigation__tab .shop-now { display: none; } } @media (max-width: 400px) { .channel-section__header .channel-navigation__tab { padding-right: 20px; } } .channel-section__header .channel-navigation__tab a, .channel-section__header .channel-navigation__tab .channel-navigation-tab-text { font-size: 14px; font-weight: 700; text-transform: uppercase; color: #666; } .channel-section__header .channel-navigation__tab a:hover, .channel-section__header .channel-navigation__tab .channel-navigation-tab-text:hover { cursor: pointer; text-decoration: none; } .channel-section__header .channel-navigation__tab_active:hover { color: red; } .channel-section__header .channel-navigation__tab a:hover { color: black; } .channel-section__header .channel-navigation__tab .channel-navigation-tab-text { color: red; border-bottom: 3px solid red; } .channel-section__header .channel-navigation__tabs { display: flex; } .channel-section__content .videos_no-videos { width: 100%; display: flex; justify-content: center; align-items: center; padding-top: 10px; } .channel-section__content .videos .item-list__actions__item .btn { font-size: 12px; background-color: transparent; color: #666666ba; text-transform: uppercase; border: none; font-weight: bold; } .channel-section__footer .editor-btn { margin: 0; padding: 12px 15px 13px; font-family: Roboto; font-size: 12px; font-weight: 700; color: #fff; text-transform: uppercase; border-radius: 3px; background-color: #ed1a3b; cursor: pointer; border: none; outline: 0; -webkit-appearance: none; } .channel-section__footer .editor-btn__checked { background-image: url(/static/icons/Icon-Following.svg); background-repeat: no-repeat; background-position: 10px; padding-left: 30px; background-color: #ccc; } .channel-section__filter { margin: 0; margin-right: 20px; } @media (max-width: 500px) { .channel-section__header { padding: 0 15px 15px; } } .page { display: block; width: 100%; position: absolute; top: 0px; left: 0px; z-index: 1000; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .body-container { flex-grow: 1; } .body-container__centered { flex-grow: 1; display: flex; justify-content: center; align-items: center; } .container-fluid-custom { max-width: 1360px !important; margin: 0 auto !important; padding: 20px !important; } @media (min-width: 600px) and (max-width: 960px) { .container-fluid-custom { padding: 15px !important; } } .btn__lg { margin: 0px; padding: 12px 15px 13px 15px; font-size: 12px; font-weight: 700; color: #ffffff !important; text-transform: uppercase; border-radius: 3px; background-color: #ed1a3b; cursor: pointer; border: none; outline: none; -webkit-appearance: none; } .mb-10 { margin-bottom: 10px; } .small { font-size: 12px; color: #666666; } .mt-20 { margin-top: 20px; } .dashboard-status-notification { text-align: center; padding: 5px; font-size: 17px; } .dashboard-status-notification a { color: #3366cc; } .dashboard-status-notification a:hover { color: #3366cc; } .dashboard-body-container { background-color: #ffffff; } .schedule-settings-desc { margin-top: -20px; font-size: 12px; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .popup-subscription { padding: 30px; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #4646FE !important; color: #FFFFFF; } .popup-subscription h3, .popup-subscription .subscription-text, .popup-subscription .sub-info { text-align: center; } .popup-subscription h3 { margin: 0 auto 20px auto; font-size: 40px; font-weight: 800; line-height: 130%; } .popup-subscription .subscription-text { font-size: 17px; margin-bottom: 20px; } .popup-subscription .iframe-box { width: 400px; } .popup-subscription .close-bottom-button { display: flex; justify-content: center; } .popup-subscription .close-bottom-button button { background-color: transparent; color: #fff; box-shadow: none; border: none; text-decoration: underline; cursor: pointer; text-transform: uppercase; font-size: 14px; } .popup-subscription .close-bottom-button button:hover, .popup-subscription .close-bottom-button button:active, .popup-subscription .close-bottom-button button:focus { border: none; outline: none; } .popup-subscription form { height: 80px; } .popup-subscription form .subscription-form__input { margin-right: 7px; } .popup-subscription form .subscription-form__input input:focus { outline: -webkit-focus-ring-color auto 1px; } .popup-subscription .sub-info { margin-bottom: 20px; font-size: 12px; line-height: 130%; } .popup-subscription .sub-info a { text-decoration: underline; color: inherit; } @media (max-width: 1023px) { .popup-subscription h3 { font-size: 40px; } .popup-subscription .subscription-text { font-size: 16px; } .popup-subscription .iframe-box { width: 100%; } .popup-subscription form { width: 100%; } .popup-subscription .subscription-form__input { width: calc(100% - 97px); } } .overlay__close.inside { width: 24px; height: 24px; } .overlay__close.inside svg { width: 24px; height: 24px; } .modal-window { border-radius: 5px; } @media (max-width: 600px) { .overlay { top: inherit; } .overlay .modal-window { top: auto !important; transition: top .3s ease-out; bottom: 0; left: 0 !important; width: 100%; transform: none !important; } } /* //////////////////////////////////////////////////////////////////// */ /* NEWSLETTER POPUP */ .PromoCover { display: none; width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 30; } .PromoBlur { -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } @media (min-width: 600px) { .PopUp { display: none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 40; } .PopUpContent { display: block; width: 100%; height: 100%; margin: 0px auto; overflow-y: auto; overflow-x: hidden; padding: 0px; } .PopUpTable { display: table; width: 100%; height: 100%; margin: 0px auto; } .PopUpCol { display: table-cell; vertical-align: middle; text-align: center; padding: 20px; } .PopUpBox { display: inline-block; margin: 0px auto; position: relative; } .PopUpBox .ButtonIcon.Close { position: absolute; z-index: 41; top: 8px; right: 8px; cursor: pointer; } .PopUpPanel { display: block; margin: 0px auto; padding: 40px; background-color: var(--PopUp); border: solid 1px var(--PopUpBorder); text-align: left; border-radius: 15px; } .PopUpPanel a { text-decoration: none; color: var(--Primary); } .PopUpPanel a:hover { text-decoration: underline; color: var(--PrimaryAlt); } .PopUpPanel *:focus { outline-color: var(--Primary); } .PopUpSubhead { display: block; font-size: var--FS16; color: var(--TextPrimary); font-weight: var(--FW600); } .PopUpClose { cursor: pointer; text-decoration: underline !important; } .PopUpNewsletter .PopUpPanel { background-color: var(--Promo); border: solid 1px var(--Promo); } } @media (max-width: 599px) { .PopUp { display: none; width: 100%; height: 100%; max-height: 80%; position: fixed; left: 0px; bottom: 0; border-top-left-radius: 5px; border-top-right-radius: 5px; z-index: 40; background-color: var(--PopUp); } .PopUpTable { display: table; width: 100%; height: 100%; } .PopUpCol { display: table-cell; width: auto; padding: 40px 10px 20px 5px; position: relative; } .PopUpBox { display: block; height: 100%; padding: 0px 20px 0px 20px; overflow-x: hidden; overflow-y: auto; } .PopUpPanel { display: block; text-align: left; } .PopUp .ButtonIcon.Close { position: absolute; z-index: 41; top: 8px; right: 8px; cursor: pointer; } .PopUpPanel a { text-decoration: none; color: var(--Primary); } .PopUpPanel a:hover { text-decoration: underline; color: var(--PrimaryAlt); } .PopUpPanel *:focus { outline-color: var(--Primary); } .PopUpSubhead { display: block; font-size: var--FS16; color: var(--TextPrimary); font-weight: var(--FW600); } .PopUpClose { cursor: pointer; text-decoration: underline !important; } .PopUpNewsletter { background-color: var(--Promo); } } /* //////////////////////////////////////////////////////////////////// */ .PopUpNewsletter .Headline { color: var(--White); } .PopUpNewsletter .FormInput { max-width: 400px; margin: 0px auto 10px auto; } .PopUpNewsletter .Button { width: 100%; max-width: 400px; } .PopUpNewsletter .FormInput input { text-align: center; background-color: var(--White); color: var(--Black); border: none 0px; outline: none 0px; } .PopUpNewsletter .FormInput input:-webkit-autofill, .PopUpNewsletter .FormInput input:-webkit-autofill:hover, .PopUpNewsletter .FormInput input:-webkit-autofill:focus, .PopUpNewsletter .FormInput input:-webkit-autofill:active { -moz-box-shadow: 0 0 0px 30px var(--White) inset !important; -webkit-box-shadow: 0 0 0px 30px var(--White) inset !important; -webkit-text-fill-color: var(--Black) !important; } .PopUpNewsletter ._error-inner { color: var(--PromoError); } .overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999998; backdrop-filter: blur(10px); } .overlay__close { display: block; width: 40px; height: 40px; margin: 0; position: absolute; top: 15px; right: 15px; z-index: 2; background-image: url(/static/icons/Button-Close.svg); background-repeat: no-repeat; background-position: center; background-size: 30px 30px; cursor: pointer; } @media (max-width: 600px) { .overlay__close { display: none; } } .overlay__close.inside { width: 30px; height: 30px; background: none; } @media (max-width: 600px) { .overlay__close.inside { display: block; } } .overlay--hidden { visibility: hidden; } .modal-window { position: fixed; cursor: default; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal-window__footer { display: flex; justify-content: flex-end; } .modal-window__footer__close { text-transform: uppercase; color: #666666; font-size: 14px; } .modal-window__footer__close:hover { text-decoration: none; } .modal-window__header { font-size: 18px; font-weight: 600; } .modal-window__content { position: relative; } .modal-window__content .ButtonIconClose { position: absolute; z-index: 22; top: 8px; right: 8px; display: block; width: 30px; height: 30px; padding: 3px; border-radius: 5px; cursor: pointer; } .modal-window__content .ButtonIconClose:hover { background-color: rgba(49, 45, 77, 0.7); } @media (min-width: 900px) { .modal-window { width: 100%; max-width: 600px; } } /* OVERLAY MODALS */ .ModalArea { display: block; padding: 20px; border-radius: 5px; background-color: var(--ModalSection); } .ModalCopy { color: var(--TextPrimary); font-weight: 600; cursor: pointer; } @media (min-width: 600px) { .Modal { display: none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 20; } .ModalContent { display: block; width: 100%; height: 100%; margin: 0px auto; overflow-y: auto; overflow-x: hidden; padding: 0px; } .ModalTable { display: table; width: 100%; height: 100%; margin: 0px auto; } .ModalCol { display: table-cell; vertical-align: middle; text-align: center; padding: 20px; } .ModalBox { display: inline-block; margin: 0px auto; position: relative; } .ModalBox .ButtonIcon.Close { position: absolute; z-index: 22; top: 8px; right: 8px; cursor: pointer; } .ModalBox .ButtonIcon.CloseConfirm { position: absolute; z-index: 22; top: 8px; right: 8px; cursor: pointer; } .ModalPanel { display: block; margin: 0px auto; padding: 40px; text-align: left; border-radius: 15px; min-width: 600px; } .ModalPanel a { text-decoration: none; color: var(--Primary); } .ModalPanel a:hover { text-decoration: underline; color: var(--PrimaryAlt); } .ModalPanel *:focus { outline-color: var(--Primary); } .ModalSubhead { display: block; font-size: 16px; font-weight: 600; color: var(--TextPrimary); } .ModalSubhead .ModalPanel { display: block; margin: 0px auto; padding: 40px; background-color: var(--Modal); border: solid 1px var(--ModalBorder); text-align: left; border-radius: 15px; } } @media (max-width: 599px) { .Modal { display: none; width: 100%; height: 100%; max-height: 80%; position: fixed; left: 0px; bottom: 0; border-top-left-radius: 5px; border-top-right-radius: 5px; z-index: 20; background-color: var(--Modal); } .ModalTable { display: table; width: 100%; height: 100%; } .ModalCol { display: table-cell; width: auto; padding: 40px 10px 20px 5px; position: relative; } .ModalBox { display: block; padding: 0px 20px 0px 20px; overflow-x: hidden; overflow-y: auto; width: 100%; height: 80vh; padding-top: 70px; } .ModalPanel { display: block; text-align: left; border: none !important; } .Modal .ButtonIcon.Close { position: absolute; z-index: 22; top: 8px; right: 8px; cursor: pointer; } .Modal .ButtonIcon.CloseConfirm { position: absolute; z-index: 22; top: 8px; right: 8px; cursor: pointer; } .ModalPanel a { text-decoration: none; color: var(--Primary); } .ModalPanel a:hover { text-decoration: underline; color: var(--PrimaryAlt); } .ModalPanel *:focus { outline-color: var(--Primary); } .ModalSubhead { display: block; font-size: var--FS16; color: var(--TextPrimary); font-weight: var(--FW600); } .FixedHeader { width: 100%; position: absolute; z-index: 21; top: 10px; left: 0px; padding: 10px 10px 10px 25px; border-bottom: solid 1px var(--ModalBorder); } .FixedButtons { width: 100%; position: absolute; z-index: 21; bottom: 0px; left: 0px; padding: 20px; border-top: solid 1px var(--ModalBorder); } } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .video-subscription { padding: 40px; margin-bottom: 30px; max-width: 600px; display: flex; align-items: center; justify-content: left; flex-direction: column; border: solid 1px #cccccc; } .video-subscription h3, .video-subscription .subscription-text, .video-subscription .sub-info { text-align: left; } .video-subscription h3 { margin: 0 auto 20px auto; font-size: 24px; font-weight: 900; color: #000000; } .video-subscription .subscription-text { font-size: 14px; margin-bottom: 20px; } .video-subscription form { height: 80px; width: 100%; } .video-subscription form .subscription-form__input { margin-right: 7px; width: calc(100% - 97px); } .video-subscription form .subscription-form__input input:focus { outline: -webkit-focus-ring-color auto 1px; } .video-subscription .sub-info { font-size: 11px; } .video-subscription .sub-info a { text-decoration: underline; color: inherit; } @media (max-width: 1023px) { .video-subscription { padding: 20px; } .video-subscription h3 { font-size: 18px; } } .premiumGridItem .Photo .Thumb .Time { display: inline-block; padding: 6px 5px 5px 5px; pointer-events: none; border-radius: 4px; text-align: center; white-space: nowrap; font-size: var(--FS11); line-height: 100%; position: absolute; z-index: 0; } .premiumGridItem .Photo .Thumb .Time.Premium { background-color: var(--Purple); color: var(--White); text-transform: uppercase; font-weight: var(--FW700); left: 8px; top: 8px; } .premiumGridItem .Photo .Thumb .Time.Upcoming { background-color: var(--Duration); color: var(--White); text-transform: uppercase; font-weight: var(--FW700); left: 8px; top: 8px; } .premiumGridItem .Text .EpisodeInfo { display: block; } .premiumGridItem .Text .EpisodeInfo .EpisodeText { display: block; } .premiumGridItem .Text .EpisodeInfo .EpisodeText .Title a { display: block; overflow: hidden; text-overflow: ellipsis; } .premiumWrapper { border-bottom: none; } .premiumWrapper__content { display: flex; flex-wrap: wrap; row-gap: 30px; margin-top: 30px; border-bottom: solid 1px var(--SectionBorder); } .premiumWrapper__content .CollectionList { border-bottom: none; } .premiumWrapper__home { margin-top: 30px; } .premiumWrapper .premium-filter { display: flex; justify-content: flex-end; margin-bottom: 15px; } .premiumWrapper .load-more-loading { margin: 30px auto; } .premiumWrapper #PageNavigation { margin: 0; } .premiumWrapper #PageNavigation .LoadMore { margin: 0; } .premiumWrapper .pagesTabs .pageTabsContainer .TagsNav { display: none !important; } .CoverDark { display: block; background-color: rgba(0, 0, 0, 0.85); width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 999997; } @media (min-width: 1140px) and (max-width: 1639.9px) { .premiumWrapper__home .premium-home-container .premium-category-content.less-items .premiumGridItem:nth-child(5) { display: none; } .premiumWrapper__home .premium-home-container .premium-category-content.more-items .premiumGridItem:nth-child(9), .premiumWrapper__home .premium-home-container .premium-category-content.more-items .premiumGridItem:nth-child(10) { display: none; } } @media (min-width: 900px) and (max-width: 1139.9px) { .premiumWrapper__home .premium-home-container .premium-category-content.less-items .premiumGridItem:nth-child(4), .premiumWrapper__home .premium-home-container .premium-category-content.less-items .premiumGridItem:nth-child(5) { display: none; } .premiumWrapper__home .premium-home-container .premium-category-content.more-items .premiumGridItem:nth-child(10) { display: none; } } @media (min-width: 640px) and (max-width: 899.9px) { .premiumWrapper__home .premium-home-container .premium-category-content.less-items .premiumGridItem:nth-child(5) { display: none; } .premiumWrapper__home .premium-home-container .premium-category-content.more-items .premiumGridItem:nth-child(9), .premiumWrapper__home .premium-home-container .premium-category-content.more-items .premiumGridItem:nth-child(10) { display: none; } } .blocker-using-info { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #fff; height: 150px; } .blocker-using-info h2 { font-size: 30px; } .blocker-using-info h3 { font-size: 24px; } .adclass { background-color: transparent; height: 1px; width: 1px; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .channelGridItem { padding: 0 12px; display: flex; flex-direction: column; align-items: center; } .channelGridItem .channelThumbnail { position: relative; margin-bottom: 15px; } .channelGridItem .channelThumbnail a { display: flex; justify-content: center; } .channelGridItem .channelThumbnail a .liveText { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); background-color: var(--Red); padding: 6px 8px 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #ffffff; border-radius: 4px; white-space: pre; } .channelGridItem .channelThumbnail a img { border-radius: 50%; object-fit: cover; aspect-ratio: 1; } .channelGridItem .channelThumbnail a img.live { border: solid 3px var(--Red); } .channelGridItem .channelInfo { display: flex; flex-direction: column; align-items: center; } .channelGridItem .channelInfo .channelName { font-size: 13px; font-weight: 600; text-align: center; margin-bottom: 4px; } .channelGridItem .channelInfo .channelName:hover { text-decoration: none; } .channelGridItem .channelInfo .channelVideosCount { font-size: 11px; margin-bottom: 10px; } .channelGridItem .channelInfo .channelNoti { margin: 5px 0 10px; font-size: 10px; } @media (min-width: 1060px) { .channelGridItem { width: calc(100% / 6) !important; } } @media (min-width: 830px) and (max-width: 1060px) { .channelGridItem { width: calc(100% / 5) !important; } } @media (min-width: 640px) and (max-width: 830px) { .channelGridItem { width: calc(100% / 4) !important; } } @media (min-width: 500px) and (max-width: 640px) { .channelGridItem { width: calc(100% / 3) !important; } } @media (max-width: 500px) { .channelGridItem { width: 100% !important; flex-direction: row; column-gap: 15px; } .channelGridItem .channelThumbnail { width: 20%; margin-bottom: auto; } .channelGridItem .channelInfo { align-items: flex-start; } .channelGridItem .channelInfo .channelName { text-align: left; } } @media (min-width: 500px) { .channelGridItem .channelThumbnail img { max-width: 70%; } } @media (min-width: 1260px) { .channelGridItem .channelThumbnail img { width: 110px; max-width: 110px; } } .Channel .Photo .Thumb img { aspect-ratio: 1; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ @media (prefers-color-scheme: dark) { .theme__system .channelGridItem .channelName { color: var(--DARK_TextPrimary); } .theme__system .channelGridItem .channelVideosCount, .theme__system .channelGridItem .channelNoti { color: var(--DARK_TextSecondary); } .theme__system .channelGridItem .Button { background-color: var(--DARK_Gray); color: var(--DARK_TextButton); } .theme__system .channelGridItem .Button:hover { background-color: var(--DARK_GrayAlt); } } @media (prefers-color-scheme: light) { .theme__system .channelGridItem .channelName { color: var(--LIGHT_TextPrimary); } .theme__system .channelGridItem .channelVideosCount, .theme__system .channelGridItem .channelNoti { color: var(--LIGHT_TextSecondary); } .theme__system .channelGridItem .Button { background-color: var(--LIGHT_Gray); color: var(--LIGHT_TextButton); } .theme__system .channelGridItem .Button:hover { background-color: var(--LIGHT_GrayAlt); } } .theme__light .channelGridItem .channelName { color: var(--LIGHT_TextPrimary); } .theme__light .channelGridItem .channelVideosCount, .theme__light .channelGridItem .channelNoti { color: var(--LIGHT_TextSecondary); } .theme__light .channelGridItem .Button { background-color: var(--LIGHT_Gray); color: var(--LIGHT_TextButton); } .theme__light .channelGridItem .Button:hover { background-color: var(--LIGHT_GrayAlt); } .theme__dark .channelGridItem .channelName { color: var(--DARK_TextPrimary); } .theme__dark .channelGridItem .channelVideosCount, .theme__dark .channelGridItem .channelNoti { color: var(--DARK_TextSecondary); } .theme__dark .channelGridItem .Button { background-color: var(--DARK_Gray); color: var(--DARK_TextButton); } .theme__dark .channelGridItem .Button:hover { background-color: var(--DARK_GrayAlt); } .theme__dim .channelGridItem .channelName { color: var(--DIM_TextPrimary); } .theme__dim .channelGridItem .channelVideosCount, .theme__dim .channelGridItem .channelNoti { color: var(--DIM_TextSecondary); } .theme__dim .channelGridItem .Button { background-color: var(--DIM_Gray); color: var(--DIM_TextButton); } .theme__dim .channelGridItem .Button:hover { background-color: var(--DIM_GrayAlt); } .theme__night .channelGridItem .channelName { color: var(--NIGHT_TextPrimary); } .theme__night .channelGridItem .channelVideosCount, .theme__night .channelGridItem .channelNoti { color: var(--NIGHT_TextSecondary); } .theme__night .channelGridItem .Button { background-color: var(--NIGHT_Gray); color: var(--NIGHT_TextButton); } .theme__night .channelGridItem .Button:hover { background-color: var(--NIGHT_GrayAlt); } .channelGridItem .Button.isFollowed { background-color: var(--Primary); color: var(--TextButton); } .channelGridItem .Button.isFollowed:hover { background-color: var(--PrimaryAlt); } .trendingChannelHome { border-bottom: 1px solid var(--SectionBorder); } .trendingChannelHome .trendingChannelHomeContent { display: flex; margin-bottom: 15px; justify-content: space-around; flex-wrap: nowrap; } /* --------------------------------- 3 per row*/ @media (min-width: 500px) and (max-width: 639.9px) { .trendingChannelHomeContent { flex-wrap: wrap; row-gap: 15px; } .trendingChannelHomeContent .channelGridItem:nth-last-child(-n + 4) { display: none; } } /* --------------------------------- 4 per row*/ @media (min-width: 640px) and (max-width: 729.9px) { .trendingChannelHomeContent .channelGridItem:nth-last-child(-n + 6) { display: none; } } /* --------------------------------- 5 per row*/ @media (min-width: 730px) and (max-width: 859.9px) { .trendingChannelHomeContent .channelGridItem:nth-last-child(-n + 5) { display: none; } } /* --------------------------------- 6 per row*/ @media (min-width: 860px) and (max-width: 959.9px) { .trendingChannelHomeContent .channelGridItem:nth-last-child(-n + 4) { display: none; } } /* --------------------------------- 7 per row*/ @media (min-width: 960px) and (max-width: 1239.9px) { .trendingChannelHomeContent .channelGridItem:nth-last-child(-n + 3) { display: none; } } /* --------------------------------- 8 per row*/ @media (min-width: 1240px) and (max-width: 1399.9px) { .trendingChannelHomeContent .channelGridItem:nth-last-child(-n + 2) { display: none; } } /* --------------------------------- 9 per row*/ @media (min-width: 1400px) and (max-width: 1599.9px) { .trendingChannelHomeContent .channelGridItem:nth-last-child(-n + 1) { display: none; } } @media (max-width: 500px) { .trendingChannelHome .trendingChannelHomeContent { flex-direction: column; gap: 15px; } } .channels-home .CollectionFeatured .Text { padding-bottom: 0; } .channels-home .CollectionFeatured .Text .Title { margin-bottom: 4px; } .channels__home.no-sort { margin-top: 30px; } .channels__home .channel-category-container { margin-top: 20px; } .channels__home .channel-category-container .channel-category-content { display: flex; flex-wrap: wrap; row-gap: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--SectionBorder); } @media (min-width: 830px) and (max-width: 1060px) { .channels__home .channel-category-container .channel-category-content .channelGridItem:nth-child(6) { display: none; } } @media (min-width: 640px) and (max-width: 830px) { .channels__home .channel-category-container .channel-category-content .channelGridItem:nth-child(5), .channels__home .channel-category-container .channel-category-content .channelGridItem:nth-child(6) { display: none; } } .subscribed-channels .channels__info--left .name { font-family: 'Roboto'; font-size: 18px; } .subscribed-channels .channels_list .text .post__details { margin-bottom: 15px; } .no-border-btm { border-bottom: none !important; } @media (min-width: 500px) { .subscribed-channels .channels_list .post__picture { height: 100px; } } @media (min-width: 1200px) { .subscription-videos .channels_list .post__picture { height: auto; } .subscription-videos .channels_list .post__picture__preview { width: 126px; height: 126px; margin: 0; } .subscription-videos .channels_list .post__picture__preview img { width: 100%; height: 100%; object-fit: contain; } .subscription-videos .label { display: table; margin: 0px 0px 10px 0px; } } .channels { border-bottom: none; } .channels__content { display: flex; flex-wrap: wrap; row-gap: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--SectionBorder); } .channels__content.no-sort { margin-top: 30px; } .channels .channels-sort { display: flex; justify-content: flex-end; margin-bottom: 15px; } .channels .load-more-loading { margin: 30px auto; } .CoverDark { display: block; background-color: rgba(0, 0, 0, 0.85); width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 999997; } .hamburger-menu-content { position: fixed; top: 0; padding: 15px 8px 15px 15px; height: 100%; width: 320px; z-index: 999998; left: -500px; transition: all ease 0.3s; } .hamburger-menu-content .ButtonIcon.Close { opacity: 0; position: absolute; z-index: 999999; right: -40px; top: 10px; } .hamburger-menu-content.show { left: 0; } .hamburger-menu-content.show .ButtonIcon.Close { opacity: 1; } .hamburger-menu-content a { color: white; } .hamburger-menu-content .AutoText { font-size: 14px; } .hamburger-menu-content__group .group-title { text-transform: uppercase; } .hamburger-menu-content__group .item .AutoText { font-size: 14px; } .hamburger-menu-content__group .item .item-link { min-height: 36px; text-transform: capitalize; color: white; display: flex; align-items: center; column-gap: 8px; padding: 4px 0 4px 16px; } .hamburger-menu-content__group .item .item-link .text { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hamburger-menu-content__group .item .item-link .item-img { height: 24px; width: 24px; } .hamburger-menu-content__group .item .item-link .item-img.channel-thumbnail { border-radius: 50%; } .hamburger-menu-content__group .item.active .Link { background-color: var(--MenuHover) !important; } .hamburger-menu-content #GroupMenuCopyright p { font-size: 11px; } .Toastify__toast-container { z-index: 9999; -webkit-transform: translateZ(9999px); position: fixed; padding: 4px; width: 320px; box-sizing: border-box; color: #fff; } .Toastify__toast-container--top-left { top: 1em; left: 1em; } .Toastify__toast-container--top-center { top: 1em; left: 50%; margin-left: -160px; } .Toastify__toast-container--top-right { top: 1em; right: 1em; } .Toastify__toast-container--bottom-left { bottom: 1em; left: 1em; } .Toastify__toast-container--bottom-center { bottom: 1em; left: 50%; margin-left: -160px; } .Toastify__toast-container--bottom-right { bottom: 1em; right: 1em; } @media only screen and (max-width: 480px) { .Toastify__toast-container { width: 100vw; padding: 0; left: 0; margin: 0; } .Toastify__toast-container--top-center, .Toastify__toast-container--top-left, .Toastify__toast-container--top-right { top: 0; } .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-right { bottom: 0; } .Toastify__toast-container--rtl { right: 0; left: auto; } } .Toastify__toast { position: relative; min-height: 64px; box-sizing: border-box; margin-bottom: 1rem; padding: 8px; border-radius: 1px; box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05); display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; max-height: 800px; overflow: hidden; font-family: sans-serif; cursor: pointer; direction: ltr; } .Toastify__toast--rtl { direction: rtl; } .Toastify__toast--default { background: #fff; color: #aaa; } .Toastify__toast--info { background: #3498db; } .Toastify__toast--success { background: #07bc0c; } .Toastify__toast--warning { background: #f1c40f; } .Toastify__toast--error { background: #e74c3c; } .Toastify__toast-body { margin: auto 0; -ms-flex: 1; flex: 1; } @media only screen and (max-width: 480px) { .Toastify__toast { margin-bottom: 0; } } .Toastify__close-button { color: #fff; font-weight: 700; font-size: 14px; background: transparent; outline: none; border: none; padding: 0; cursor: pointer; opacity: .7; transition: .3s ease; -ms-flex-item-align: start; align-self: flex-start; } .Toastify__close-button--default { color: #000; opacity: .3; } .Toastify__close-button:focus, .Toastify__close-button:hover { opacity: 1; } @keyframes Toastify__trackProgress { 0% { transform: scaleX(1); } to { transform: scaleX(0); } } .Toastify__progress-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; z-index: 9999; opacity: .7; background-color: rgba(255, 255, 255, 0.7); transform-origin: left; } .Toastify__progress-bar--animated { animation: Toastify__trackProgress linear 1 forwards; } .Toastify__progress-bar--controlled { transition: transform .2s; } .Toastify__progress-bar--rtl { right: 0; left: auto; transform-origin: right; } .Toastify__progress-bar--default { background: linear-gradient(90deg, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55); } @keyframes Toastify__bounceInRight { 0%, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } to { transform: none; } } @keyframes Toastify__bounceOutRight { 20% { opacity: 1; transform: translate3d(-20px, 0, 0); } to { opacity: 0; transform: translate3d(2000px, 0, 0); } } @keyframes Toastify__bounceInLeft { 0%, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } to { transform: none; } } @keyframes Toastify__bounceOutLeft { 20% { opacity: 1; transform: translate3d(20px, 0, 0); } to { opacity: 0; transform: translate3d(-2000px, 0, 0); } } @keyframes Toastify__bounceInUp { 0%, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } to { transform: translateZ(0); } } @keyframes Toastify__bounceOutUp { 20% { transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0); } to { opacity: 0; transform: translate3d(0, -2000px, 0); } } @keyframes Toastify__bounceInDown { 0%, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } to { transform: none; } } @keyframes Toastify__bounceOutDown { 20% { transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); } to { opacity: 0; transform: translate3d(0, 2000px, 0); } } .Toastify__bounce-enter--bottom-left, .Toastify__bounce-enter--top-left { animation-name: Toastify__bounceInLeft; } .Toastify__bounce-enter--bottom-right, .Toastify__bounce-enter--top-right { animation-name: Toastify__bounceInRight; } .Toastify__bounce-enter--top-center { animation-name: Toastify__bounceInDown; } .Toastify__bounce-enter--bottom-center { animation-name: Toastify__bounceInUp; } .Toastify__bounce-exit--bottom-left, .Toastify__bounce-exit--top-left { animation-name: Toastify__bounceOutLeft; } .Toastify__bounce-exit--bottom-right, .Toastify__bounce-exit--top-right { animation-name: Toastify__bounceOutRight; } .Toastify__bounce-exit--top-center { animation-name: Toastify__bounceOutUp; } .Toastify__bounce-exit--bottom-center { animation-name: Toastify__bounceOutDown; } @keyframes Toastify__zoomIn { 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes Toastify__zoomOut { 0% { opacity: 1; } 50% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .Toastify__zoom-enter { animation-name: Toastify__zoomIn; } .Toastify__zoom-exit { animation-name: Toastify__zoomOut; } @keyframes Toastify__flipIn { 0% { transform: perspective(400px) rotateX(90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotateX(-20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { transform: perspective(400px) rotateX(-5deg); } to { transform: perspective(400px); } } @keyframes Toastify__flipOut { 0% { transform: perspective(400px); } 30% { transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { transform: perspective(400px) rotateX(90deg); opacity: 0; } } .Toastify__flip-enter { animation-name: Toastify__flipIn; } .Toastify__flip-exit { animation-name: Toastify__flipOut; } @keyframes Toastify__slideInRight { 0% { transform: translate3d(110%, 0, 0); visibility: visible; } to { transform: translateZ(0); } } @keyframes Toastify__slideInLeft { 0% { transform: translate3d(-110%, 0, 0); visibility: visible; } to { transform: translateZ(0); } } @keyframes Toastify__slideInUp { 0% { transform: translate3d(0, 110%, 0); visibility: visible; } to { transform: translateZ(0); } } @keyframes Toastify__slideInDown { 0% { transform: translate3d(0, -110%, 0); visibility: visible; } to { transform: translateZ(0); } } @keyframes Toastify__slideOutRight { 0% { transform: translateZ(0); } to { visibility: hidden; transform: translate3d(110%, 0, 0); } } @keyframes Toastify__slideOutLeft { 0% { transform: translateZ(0); } to { visibility: hidden; transform: translate3d(-110%, 0, 0); } } @keyframes Toastify__slideOutDown { 0% { transform: translateZ(0); } to { visibility: hidden; transform: translate3d(0, 500px, 0); } } @keyframes Toastify__slideOutUp { 0% { transform: translateZ(0); } to { visibility: hidden; transform: translate3d(0, -500px, 0); } } .Toastify__slide-enter--bottom-left, .Toastify__slide-enter--top-left { animation-name: Toastify__slideInLeft; } .Toastify__slide-enter--bottom-right, .Toastify__slide-enter--top-right { animation-name: Toastify__slideInRight; } .Toastify__slide-enter--top-center { animation-name: Toastify__slideInDown; } .Toastify__slide-enter--bottom-center { animation-name: Toastify__slideInUp; } .Toastify__slide-exit--bottom-left, .Toastify__slide-exit--top-left { animation-name: Toastify__slideOutLeft; } .Toastify__slide-exit--bottom-right, .Toastify__slide-exit--top-right { animation-name: Toastify__slideOutRight; } .Toastify__slide-exit--top-center { animation-name: Toastify__slideOutUp; } .Toastify__slide-exit--bottom-center { animation-name: Toastify__slideOutDown; } .PrivacyNotice { position: fixed; width: 100%; left: 0px; bottom: 0px; z-index: 1000000; box-sizing: border-box; border-top: solid 1px var(--Gray50); background-color: var(--Gray60); } .PrivacyNotice .PrivacyNoticeHeadline { color: var(--TextPrimary); font-weight: 600; } .PrivacyNotice .PrivacyContent { display: block; margin: 0px auto; position: relative; } .PrivacyNotice .PrivacyContent .PrivacyTextContent a { color: var(--Primary) !important; text-decoration: none !important; } .PrivacyNotice .PrivacyContent .ButtonIconClose { position: absolute; z-index: 31; top: 8px; right: 8px; cursor: pointer; } .PrivacyNotice .PrivacyContent .ButtonIconClose .Icon { display: block; width: 24px; height: 24px; -webkit-mask-size: 24px; pointer-events: none !important; position: relative; } .PrivacyNotice .PrivacyContent .ButtonIconClose .Icon svg { width: 24px; height: 24px; fill: #1A7EFA; color: #FFFFFF; } .PrivacyNotice .PrivacyContent .PrivacyBox { display: block; max-width: 900px; margin: 0px auto; padding: 30px; } .PrivacyNotice .PrivacyContent .PrivacyBox .PrivacyTable { display: block; margin: 0px auto; } .PrivacyNotice .PrivacyContent .PrivacyBox .PrivacyTable .PrivacyLeft { margin-bottom: 15px !important; } .PrivacyNotice .PrivacyContent .PrivacyBox .PrivacyTable .PrivacyCol { display: block; margin: 0px auto; } .PrivacyNotice .PrivacyContent .PrivacyBox .PrivacyTable .PrivacyRight .ButtonBox { display: block; } .PrivacyNotice .PrivacyContent .PrivacyBox .PrivacyTable .PrivacyRight .ButtonBox .ButtonPrivacy { display: inline-block; vertical-align: middle; padding: 10px 20px; font-size: 13px; line-height: 13px; font-weight: 600; outline: none 0px; cursor: pointer; border-radius: 3px; text-align: center; box-sizing: border-box; text-decoration: none !important; position: relative; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; white-space: nowrap; } .PrivacyNotice .PrivacyContent .PrivacyBox .PrivacyTable .PrivacyRight .ButtonBox .ButtonPrivacy.ButtonTransBorder { margin-right: 5px; } @media (min-width: 800px) { .PrivacyNotice .PrivacyTable { display: table !important; } .PrivacyNotice .PrivacyCol { display: table-cell !important; width: auto !important; vertical-align: middle !important; } .PrivacyNotice .PrivacyRight { width: 300px !important; padding-left: 40px !important; } } #ModalThemes .ModalPanel, #AdvancedSearch .ModalPanel { background-color: var(--Modal); border: solid 1px #17181C; } #ModalThemes .ModalPanel__dim, #AdvancedSearch .ModalPanel__dim { background-color: #0A2034 !important; border-color: #0A2034 !important; } #ModalThemes .ModalPanel__dim .ModalArea, #AdvancedSearch .ModalPanel__dim .ModalArea { background-color: #04111C !important; } #ModalThemes .ModalPanel__night, #AdvancedSearch .ModalPanel__night { background-color: #26233E !important; border-color: #26233E !important; } #ModalThemes .ModalPanel__night .ModalArea, #AdvancedSearch .ModalPanel__night .ModalArea { background-color: #1B192E !important; } #ModalThemes .ModalPanel__light, #AdvancedSearch .ModalPanel__light { background-color: #FFFFFF !important; border-color: #FFFFFF !important; } #ModalThemes .ModalPanel__light .ModalArea, #AdvancedSearch .ModalPanel__light .ModalArea { background-color: #ECECEC !important; } #ModalThemes .ModalPanel__light .ModalPanelTitle, #AdvancedSearch .ModalPanel__light .ModalPanelTitle { color: #000000 !important; } #ModalThemes .ModalPanel__light .ButtonIconClose:hover, #AdvancedSearch .ModalPanel__light .ButtonIconClose:hover { background-color: rgba(0, 0, 0, 0.08) !important; } #ModalThemes .ModalPanel__light .ButtonIconClose .Icon svg, #AdvancedSearch .ModalPanel__light .ButtonIconClose .Icon svg { fill: #000000 !important; color: #000000 !important; } #ModalThemes .ModalPanel .ModalPanelTitle, #AdvancedSearch .ModalPanel .ModalPanelTitle { text-align: center; font-weight: 600; font-size: 24px; color: var(--TextPrimary); display: block; margin: 0 auto 15px auto; } #ModalThemes .ModalPanel .ButtonIconClose, #AdvancedSearch .ModalPanel .ButtonIconClose { opacity: 1; pointer-events: auto; position: absolute; z-index: 999999; top: 8px; right: 8px; cursor: pointer; display: inline-block; width: 30px; height: 30px; padding: 3px; border-radius: 5px; cursor: pointer; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; background-color: rgba(0, 0, 0, 0); } #ModalThemes .ModalPanel .ButtonIconClose:hover, #AdvancedSearch .ModalPanel .ButtonIconClose:hover { background-color: rgba(66, 67, 68, 0.7); } #ModalThemes .ModalPanel .ButtonIconClose .Icon, #AdvancedSearch .ModalPanel .ButtonIconClose .Icon { display: block; width: 24px; height: 24px; -webkit-mask-size: 24px; pointer-events: none !important; position: relative; } #ModalThemes .ModalPanel .ButtonIconClose .Icon svg, #AdvancedSearch .ModalPanel .ButtonIconClose .Icon svg { width: 24px; height: 24px; } #ModalThemes .ModalPanel .ModalArea, #AdvancedSearch .ModalPanel .ModalArea { display: block; padding: 20px; border-radius: 5px; background-color: #0F1013; } #ModalThemes .ModalPanel .ModalArea .ThemeBox, #AdvancedSearch .ModalPanel .ModalArea .ThemeBox { display: table; width: 100%; margin: 0px auto; } #ModalThemes .ModalPanel .ModalArea .ThemeBox .ThemeSelected .ThemeSwatch, #AdvancedSearch .ModalPanel .ModalArea .ThemeBox .ThemeSelected .ThemeSwatch { border-color: var(--Primary); } #ModalThemes .ModalPanel .ModalArea .ThemeBox .ThemeSelected .ThemeSwatch svg, #AdvancedSearch .ModalPanel .ModalArea .ThemeBox .ThemeSelected .ThemeSwatch svg { fill: var(--Primary); } #ModalThemes .ModalPanel .ModalArea .ThemeBox .ThemeSelected .ThemeName, #AdvancedSearch .ModalPanel .ModalArea .ThemeBox .ThemeSelected .ThemeName { font-weight: var(--FW600); color: var(--TextPrimary); } #ModalThemes .ModalPanel .ModalArea .ThemeBox .ThemePreview, #AdvancedSearch .ModalPanel .ModalArea .ThemeBox .ThemePreview { display: table-cell; width: 20%; cursor: pointer; padding: 1px; vertical-align: top; } #ModalThemes .ModalPanel .ModalArea .ThemeBox .ThemePreview:not(.ThemeSelected) .Icon, #AdvancedSearch .ModalPanel .ModalArea .ThemeBox .ThemePreview:not(.ThemeSelected) .Icon { display: none; } #ModalThemes .ModalPanel .ModalArea .ThemeBox .ThemePreview:not(.ThemeSelected) .ThemeName, #AdvancedSearch .ModalPanel .ModalArea .ThemeBox .ThemePreview:not(.ThemeSelected) .ThemeName { color: #909090; } #ModalThemes .ModalPanel .ModalArea .ThemeBox .ThemePreview .ThemeName, #AdvancedSearch .ModalPanel .ModalArea .ThemeBox .ThemePreview .ThemeName { display: block; font-size: 12px; text-align: center; } #ModalThemes .ModalPanel .ModalArea .ThemeBox .ThemePreview .ThemeSwatch, #AdvancedSearch .ModalPanel .ModalArea .ThemeBox .ThemePreview .ThemeSwatch { display: table; width: 100%; height: 70px; margin-bottom: 5px; border: solid 2px rgba(0, 0, 0, 0); border-radius: 2px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } #ModalThemes .ModalPanel .ModalArea .ThemeBox .ThemePreview .ThemeSwatch .ThemeChoice, #AdvancedSearch .ModalPanel .ModalArea .ThemeBox .ThemePreview .ThemeSwatch .ThemeChoice { display: table-cell; width: 20%; text-align: center; vertical-align: middle; } #ModalThemes .ModalPanel .ModalArea .ThemeBox .ThemePreview .ThemeSwatch .ThemeChoice .Icon, #AdvancedSearch .ModalPanel .ModalArea .ThemeBox .ThemePreview .ThemeSwatch .ThemeChoice .Icon { margin: 0px auto; width: 24px; height: 24px; } #ModalThemes .ModalPanel .ModalArea .ThemeBox .ThemePreview .ThemeSwatch .ThemeChoice .Icon svg, #AdvancedSearch .ModalPanel .ModalArea .ThemeBox .ThemePreview .ThemeSwatch .ThemeChoice .Icon svg { width: 24px; height: 24px; color: #FFFFFF; fill: #1A7EFA; } #ModalThemes .ModalPanel .ModalArea .ThemeBox .ThemePreview#Dark .ThemeSwatch, #AdvancedSearch .ModalPanel .ModalArea .ThemeBox .ThemePreview#Dark .ThemeSwatch { background-color: #000000; } #ModalThemes .ModalPanel .ModalArea .ThemeBox .ThemePreview#Light .ThemeSwatch, #AdvancedSearch .ModalPanel .ModalArea .ThemeBox .ThemePreview#Light .ThemeSwatch { background-color: #FFFFFF; } #ModalThemes .ModalPanel .ModalArea .ThemeBox .ThemePreview#Dim .ThemeSwatch, #AdvancedSearch .ModalPanel .ModalArea .ThemeBox .ThemePreview#Dim .ThemeSwatch { background-color: #0C2740; } #ModalThemes .ModalPanel .ModalArea .ThemeBox .ThemePreview#Night .ThemeSwatch, #AdvancedSearch .ModalPanel .ModalArea .ThemeBox .ThemePreview#Night .ThemeSwatch { background-color: #211F38; } #ModalThemes .ModalPanel .ButtonBox .ButtonClose, #AdvancedSearch .ModalPanel .ButtonBox .ButtonClose { display: inline-block; vertical-align: middle; padding: 15px 20px; font-size: 14px; line-height: 14px; font-weight: 600; background-color: #1A7EFA; } #ModalThemes .ModalPanel .ButtonBox .ButtonClose__dim, #AdvancedSearch .ModalPanel .ButtonBox .ButtonClose__dim { background-color: #204ECF !important; } #ModalThemes .ModalPanel .ButtonBox .ButtonClose__night, #AdvancedSearch .ModalPanel .ButtonBox .ButtonClose__night { background-color: #5E48ED !important; } @media (min-width: 600px) { #ModalThemes, #AdvancedSearch { display: block; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 999999; } #ModalThemes .ButtonIconClose, #AdvancedSearch .ButtonIconClose { position: absolute; position: absolute; top: 8px; right: 8px; cursor: pointer; } #ModalThemes .ModalTable, #AdvancedSearch .ModalTable { display: table; width: 100%; height: 100%; margin: 0px auto; } #ModalThemes .ModalTable .ModalCol, #AdvancedSearch .ModalTable .ModalCol { display: table-cell; vertical-align: middle; text-align: center; padding: 20px; } #ModalThemes .ModalTable .ModalCol .ModalBox, #AdvancedSearch .ModalTable .ModalCol .ModalBox { display: inline-block; margin: 0px auto; position: relative; width: 100%; max-width: 600px; } #ModalThemes .ModalTable .ModalCol .ModalBox .ModalPanel, #AdvancedSearch .ModalTable .ModalCol .ModalBox .ModalPanel { display: block; margin: 0px auto; padding: 40px; text-align: left; border-radius: 15px; } } @media (max-width: 599px) { #ModalThemes, #AdvancedSearch { width: 100%; height: 100%; height: 80%; position: fixed; left: 0px; bottom: 0; border-top-left-radius: 5px; border-top-right-radius: 5px; z-index: 999999; background-color: #17181C; } #ModalThemes.theme-dim, #AdvancedSearch.theme-dim { background-color: #0A2034 !important; border-color: #0A2034 !important; } #ModalThemes.theme-night, #AdvancedSearch.theme-night { background-color: #26233E !important; border-color: #26233E !important; } #ModalThemes.theme-light, #AdvancedSearch.theme-light { background-color: #FFFFFF !important; border-color: #FFFFFF !important; } #ModalThemes .ModalTable, #AdvancedSearch .ModalTable { display: table; width: 100%; height: 100%; } #ModalThemes .ModalTable .ModalCol, #AdvancedSearch .ModalTable .ModalCol { display: table-cell; width: auto; position: relative; } #ModalThemes .ModalTable .ModalCol .ModalBox, #AdvancedSearch .ModalTable .ModalCol .ModalBox { display: block; height: 100%; overflow-x: hidden; overflow-y: hidden; padding: 0 !important; } #ModalThemes .ModalTable .ModalCol .ModalBox .ButtonIconClose, #AdvancedSearch .ModalTable .ModalCol .ModalBox .ButtonIconClose { position: absolute; z-index: 22; top: 8px; right: 8px; cursor: pointer; } #ModalThemes .ModalTable .ModalCol .ModalBox .ModalPanel, #AdvancedSearch .ModalTable .ModalCol .ModalBox .ModalPanel { display: block; text-align: left; height: 100%; } } .ThemeSwatch__Light { background: #FFFFFF; } .ThemeSwatch__Dark { background: #000000; } .recommended { display: block; } .recommended .table, .recommended .table__row { display: block; } .recommended .post { width: 100%; padding: 0px; margin: 0px auto 10px auto; border-bottom: solid 1px #ececec; } .recommended .post__picture { display: table-cell; padding: 0px 10px 10px 0px; vertical-align: top; } .recommended .post__picture__preview { height: 79px; width: 140px; } .recommended .post__picture__preview img { height: 100%; width: 100%; object-fit: contain; } .recommended .post .text { display: table-cell; width: auto; padding: 0px 0px 10px 0px; vertical-align: top; margin-left: 0; } #ShortcutsLibrary { display: none; } .Shortcuts { padding: 10px; display: none; margin: 0px; padding-top: 86px; position: fixed; height: 100%; left: 0px; top: 0px; background-color: var(--Transparent); /* Track */ /* Handle */ } .Shortcuts #GroupMenuCopyright p { font-size: 11px; } .Shortcuts .Content { scrollbar-width: thin; scrollbar-color: var(--Thumb) var(--Track); } .Shortcuts .Content::-webkit-scrollbar { width: 5px; scrollbar-color: var(--Thumb) var(--Track); } .Shortcuts .Content::-webkit-scrollbar-track { background-color: var(--Track); } .Shortcuts .Content::-webkit-scrollbar-thumb { background-color: var(--Thumb); } .ShortcutsBox { display: block; margin: 0px auto; padding: 10px 0px; height: 100%; position: relative; } .ShortcutsBox .Content { display: block; margin: 0px auto; height: 100%; overflow-x: hidden; overflow-y: hidden; padding-right: 5px; } .ShortcutsBox .Content::-webkit-scrollbar-track { background-color: var(--Transparent); } .ShortcutsBox .Content::-webkit-scrollbar-thumb { background-color: var(--Transparent); } .Shortcuts:hover .Content::-webkit-scrollbar-track { background-color: var(--Track); } .Shortcuts:hover .Content::-webkit-scrollbar-thumb { background-color: var(--Thumb); } .ShortcutsBox { display: block; margin: 0px auto; padding: 10px 0px; height: 100%; position: relative; } .ShortcutsBox .Content { display: block; margin: 0px auto; height: 100%; overflow-x: hidden; overflow-y: scroll; padding-right: 5px; } .ShortcutsBox .Content::-webkit-scrollbar-track { background-color: var(--Transparent); } .ShortcutsBox .Content::-webkit-scrollbar-thumb { background-color: var(--Transparent); } .Shortcuts:hover .Content::-webkit-scrollbar-track { background-color: var(--Track); } .Shortcuts:hover .Content::-webkit-scrollbar-thumb { background-color: var(--Thumb); } .Shortcuts * { -webkit-transition: all 0.0s ease; -moz-transition: all 0.0s ease; transition: all 0.0s ease; } .ShortcutsClosed .Shortcuts .Nav .AutoText { font-size: 14px !important; text-align: center; } .ShortcutsOpen .Shortcuts .ShortcutsBox .Content.Nav #GroupMenuExplore .item:nth-last-child(2) { display: none; } @media (min-width: 1000px) { .ShortcutsClosed { padding-left: 125px; } .ShortcutsClosed .Shortcuts { display: block; width: 125px; } .ShortcutsOpen { padding-left: 125px; } .ShortcutsOpen .Shortcuts { display: block; width: 125px; } } @media (min-width: 1400px) { .ShortcutsOpen { padding-left: 300px; } .ShortcutsOpen .Shortcuts { display: block; width: 280px; } .ShortcutsOpen .ShortcutsBox .Content { padding-left: 40px; padding-right: 5px; overflow-y: scroll; } } .ShortcutsClosed .Shortcuts .Nav .AutoGroup { display: none; } .ShortcutsClosed .Shortcuts .Nav .AutoSubhead { display: none; } .ShortcutsClosed .Shortcuts .Nav .Auto { display: block !important; width: 60px; margin: 0px auto; padding: 10px 4px !important; } .ShortcutsClosed .Shortcuts .Nav .AutoIcon { display: block !important; width: 24px; height: 24px; margin: 0px auto; padding: 0px; } .ShortcutsClosed .Shortcuts .Nav .AutoLabel { display: block !important; margin: 0px auto; padding: 0px; } .ShortcutsClosed .Shortcuts .Nav .AutoText { font-size: 11px !important; text-align: center; } .ShortcutsClosed .Shortcuts .Nav #GroupMenuExplore { display: block; border-bottom: none 0px; } .ShortcutsClosed .Shortcuts .Nav #ShortcutsLibrary { display: block !important; } @media (max-width: 1399.9px) { .ShortcutsOpen:hover .Content::-webkit-scrollbar-track { background-color: var(--Transparent); } .ShortcutsOpen:hover .Content::-webkit-scrollbar-thumb { background-color: var(--Transparent); } .ShortcutsOpen .Shortcuts .Nav .AutoGroup { display: none; } .ShortcutsOpen .Shortcuts .Nav .AutoSubhead { display: none; } .ShortcutsOpen .Shortcuts .Nav .Auto { display: block !important; width: 60px; margin: 0px auto; padding: 10px 4px !important; } .ShortcutsOpen .Shortcuts .Nav .AutoIcon { display: block !important; width: 24px; height: 24px; margin: 0px auto; padding: 0px; } .ShortcutsOpen .Shortcuts .Nav .AutoLabel { display: block !important; margin: 0px auto; padding: 0px; } .ShortcutsOpen .Shortcuts .Nav .AutoText { font-size: var(--FS11) !important; text-align: center; } .ShortcutsOpen .Shortcuts .Nav #GroupMenuExplore { display: block; border-bottom: none 0px; } } /* width */ /* //////////////////////////////////////////////////////////////////// */ .Nav .Block { color: var(--TextSecondary); } .Nav .Block a { color: var(--TextSecondary); } .Nav .AutoGroup { padding-bottom: 10px; margin-bottom: 10px; border-bottom: solid 1px var(--MenuBorder); } .Nav .AutoSubhead { padding: 10px 8px; font-size: var(--FS11); font-weight: var(--FW700); text-transform: uppercase; text-decoration: none; color: var(--TextSecondary); } .Nav .Auto { position: relative; border-radius: 6px; } .Nav .Auto .AutoIcon { padding: 8px 8px; } .Nav .Auto .AutoBadge { padding: 8px 8px; } .Nav .Auto .AutoLabel { padding: 8px 8px; } .Nav .Auto .AutoText { font-size: var(--FS14); } .Nav .Auto .NotificationCount { float: right; } .Nav .Link:hover { background-color: var(--MenuHover); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .Nav .LinkCurrent { background-color: var(--MenuHover) !important; } .Nav .Auto .AutoBadge .Live { position: static; } .featured-video-grid__wrapper { font-size: 13px; margin-bottom: 50px; display: flex; gap: 30px; } @media (max-width: 1024px) { .featured-video-grid__wrapper { display: block; } } .featured-video-grid__wrapper .post__details { margin: 5px 0; } .featured-video-grid__featured_label { color: red; } .featured-video-grid__video-name { margin: 10px 0; } .featured-video-grid__thumbnail { max-width: 100%; } .featured-video-grid__thumbnail .post__picture { height: 52vw; max-height: 100%; } @media (min-width: 600px) { .featured-video-grid__thumbnail { min-width: 416px !important; } .featured-video-grid__thumbnail .post__picture { height: 234px; } } .featured-video-grid__description { display: inline-block; margin-bottom: 30px; max-width: 100%; overflow: hidden !important; text-overflow: ellipsis; } .featured-video-grid__description.show { max-height: 110px; margin-bottom: 0px; } .channel-videos { width: 100%; } .channel-section { width: 100%; } .channel-section__header .channel-title { display: flex; flex-direction: row; } .channel-section__header .channel-title__thumbnail { padding-right: 15px; } .channel-section__header .channel-title__thumbnail .channel-thumbnail { width: 60px; height: 60px; min-height: 60px; border-radius: 50%; } .channel-section__header .channel-title__name .channel-info-button { font-size: 12px; font-weight: 700; text-transform: uppercase; border: none; border-radius: 3px; padding: 9px 12px; margin-right: 15px; cursor: pointer; } @media (max-width: 500px) { .channel-section__header .channel-title__name .channel-info-button { margin-right: 0.35em; } } .channel-section__header .channel-title__name .channel-info-button.rss { background-color: #ed1a3b; color: #fff; text-decoration: none; } .channel-section__header .channel-title__name .channel-info-button.subscribe { padding: 7px 12px; } .channel-section__header .channel-title__name .checkmark-icon { margin-left: 8px; width: 25px; } .channel-section__header .channel-navigation { display: flex; flex-direction: row; margin: 5px 0; } @media (max-width: 500px) { .channel-section__header .channel-navigation { flex-flow: column; } .channel-section__header .channel-navigation .search__container { width: 100%; } .channel-section__header .channel-navigation .channel-section__filter { margin-top: 15px; } } .channel-section__header .channel-navigation__tab { padding-right: 30px; display: flex; justify-content: center; align-items: center; } .channel-section__header .channel-navigation__tab a, .channel-section__header .channel-navigation__tab .channel-navigation-tab-text { font-size: 14px; font-weight: 700; text-transform: uppercase; color: #666; } .channel-section__header .channel-navigation__tab a:hover, .channel-section__header .channel-navigation__tab .channel-navigation-tab-text:hover { cursor: pointer; text-decoration: none; } .channel-section__header .channel-navigation__tab_active:hover { color: red; } .channel-section__header .channel-navigation__tab a:hover { color: black; } .channel-section__header .channel-navigation__tab .channel-navigation-tab-text { color: red; border-bottom: 3px solid red; } .channel-section__header .channel-navigation__tabs { display: flex; } .channel-section__content .videos_no-videos { width: 100%; display: flex; justify-content: center; align-items: center; padding-top: 10px; } .channel-section__content .videos .item-list__actions__item .btn { font-size: 12px; background-color: transparent; color: #666666ba; text-transform: uppercase; border: none; font-weight: bold; } .channel-section__footer .editor-btn { margin: 0; padding: 12px 15px 13px; font-family: Roboto; font-size: 12px; font-weight: 700; color: #fff; text-transform: uppercase; border-radius: 3px; background-color: #ed1a3b; cursor: pointer; border: none; outline: 0; -webkit-appearance: none; } .channel-section__footer .editor-btn__checked { background-image: url(/static/icons/Icon-Following.svg); background-repeat: no-repeat; background-position: 10px; padding-left: 30px; background-color: #ccc; } .channel-section__filter { margin: 0; margin-right: 20px; } @media (max-width: 500px) { .channel-section__header { padding: 0 15px 15px; } } .video-description { width: 100%; word-break: break-all; } .video-description .article { word-break: break-word; } .preview { display: block; width: auto; margin: 0px auto 20px auto; } .preview__btn { display: block; width: auto; margin-bottom: 20px; padding-left: 0; font-family: 'Roboto', sans-serif, serif; font-size: 14px; color: #ed1a3b; font-weight: 700; cursor: pointer; } .preview__hidden { height: 160px; overflow: hidden; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(rgba(0, 0, 0, 0))); } .article { display: block; width: auto; font-family: 'Roboto'; font-size: 15px; line-height: 165%; color: #333333; margin: 0px auto 20px auto; } .article a { color: #ed1b2f; } .keywords { display: block; width: auto; font-family: 'Roboto', sans-serif, serif; font-size: 13px; line-height: 165%; color: #333333; margin: 0px auto 20px auto; } .keywords span { display: inline-block; padding: 7px 10px 5px 10px; border: 1px solid #cccccc; text-align: center; text-decoration: none; color: #9c9c9c; border-radius: 3px; margin: 0px 3px 3px 0px; -webkit-user-select: none; } .news-list { padding-left: 18px; font-size: 18px; line-height: 20px; margin-bottom: 25px; color: #ed1a3b; } .news-list-item { margin-bottom: 3px; } .news-list-item a { font-size: 16px; color: #36c; } .dashboard-not-found h2 { text-transform: uppercase; } .dashboard-access-denied { display: flex; flex-direction: column; justify-content: center; align-items: center; } .dashboard-access-denied h3 { margin-bottom: 30px; text-transform: uppercase; } .dashboard-access-denied a { display: block; } .notify-form .error-message { color: red; font-size: 12px; font-weight: 500; } .notify-form .message-html-parse { word-wrap: break-word; } .notify-form .message-html-parse p { word-wrap: break-word; } .notify-form__fields__item { margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; width: 100%; } .notify-form__fields__item .notify-input-block { display: flex; gap: 10px; align-items: center; } .notify-form__fields__item .notify-input-block .count-text-notify { min-width: 50px; font-size: 12px; font-weight: 500; } .notify-form__fields__item .notify-title { color: #666666; font-size: 14px; font-weight: 600; } .notify-form__fields__item .notify-input { background-color: transparent; padding: 15px; border: 2px solid #ececec; color: #666666; font-size: 14px; font-weight: 400; border-radius: 3px; } .notify-form__fields__item .notify-input--full { width: 100%; } .notify-form__fields__item .notify-image { height: 150px; width: 300px; background-color: #ececec; cursor: pointer; padding: 0; } .notify-form__fields__item .notify-image img { width: 100%; height: 100%; } .notify-form__fields__item textarea { resize: none; } .notify-form__fields__item .clear-date { font-size: 13px; font-weight: 500; cursor: pointer; padding-left: 10px; } .notify-form__fields__item .form__input { min-width: 250px; height: 51px; border-width: 2px; border-color: #ececec; border-radius: 3px; margin-bottom: 0 !important; } .notify-form__fields__item__date { display: flex; align-items: center; gap: 15px; } @media (max-width: 599px) { .notify-form__fields__item__date { flex-direction: column; gap: 0; } .notify-form__fields__item__date .form__input { width: 100%; } } .notify-form__fields__item__date input { background-color: transparent !important; border-radius: 3px; } .notify-form .notify-change { margin-bottom: 15px; } .notify-form .notify-change button { color: #007bff; font-size: 13px; font-weight: 600; cursor: pointer; background-color: transparent; padding: 0; } .notify-form .notify-controls { display: flex; gap: 5px; } .notify-form .notify-controls .button-notify-primary { background-color: #007bff; } .notify-form .notify-controls .button-notify-cancel { background-color: #666666; } .notify-form .notify-controls .button-notify-delete { background-color: #ed1a3b; } .notify-form .notify-controls button { border: none; padding: 5px 15px; color: #FFFFFF; font-size: 14px; font-weight: 600; border-radius: 3px; } .notify-form .notify-controls button:hover { opacity: 0.8; } .notify-form .notify-controls button:disabled { opacity: 0.8; background-color: #56a4f7; } .promo-featured-row-university.row-container { display: flex; padding-bottom: 16px; } .promo-featured-row-university.row-container .featured-row-item .row-header { margin-bottom: 24px; } .promo-featured-row-university.row-container .featured-row-item.row-with-header .row-item-container { border-top: 1px solid #ececec; padding-top: 24px; } .promo-featured-row-university.row-container .featured-row-item .row-item-container { display: flex; flex-direction: column; row-gap: 12px; } .promo-featured-row-university.row-container .featured-row-item .row-item-container .featured-info-content:first-child { margin-top: 20px; } .promo-featured-row-university.row-container .featured-row-item .row-item-content { height: 100px; display: flex; align-items: center; } .promo-featured-row-university.row-container .featured-row-item.position-row .row-header, .promo-featured-row-university.row-container .featured-row-item.position-row .row-item-content { padding-left: 24px; } .promo-featured-row-university.row-container .featured-row-item.url-row { flex: 1; } .promo-featured-row-university.row-container .featured-row-item.url-row .featured-info-content, .promo-featured-row-university.row-container .featured-row-item.url-row .row-header { padding-left: 24px; } .promo-featured-row-university.row-container .featured-row-item.url-row .featured-info-content { display: flex; column-gap: 8px; align-items: center; } .promo-featured-row-university.row-container .featured-row-item.url-row .featured-row-input-char-count { min-width: 50px; text-align: right; } .promo-featured-row-university.row-container .featured-row-item.image-row img { max-height: 100%; cursor: pointer; } .promo-featured-row-university.row-container .featured-row-item.image-row .no-image { height: 100%; aspect-ratio: 16/9; border: 1px solid #ececec; } .promo-featured-row-university.row-container .featured-row-item.image-row .btn-link { color: #3366cc !important; font-size: 14px; } .promo-featured-row-university.row-container .featured-row-item.image-row .btn-link:hover { text-decoration: underline !important; cursor: pointer; } .promo-featured-row-university.row-container .featured-row-item .featured-row-input { background-color: transparent; border: 1px solid #ececec; height: 60px; } .promo-featured-row-university.row-container .featured-row-item .featured-row-input.position-input { width: 60px; text-align: center; } .promo-featured-row-university.row-container .featured-row-item .featured-row-input.url-input, .promo-featured-row-university.row-container .featured-row-item .featured-row-input.title-input { width: 100%; padding: 0 16px; } .promo-featured-row-university.row-container .featured-row-item .featured-row-input.description-input { width: 100%; padding: 16px; height: unset; } .promo-item-row-errors { margin-bottom: 24px; border-bottom: 1px solid #ececec; } .promo-item-row-errors .promo-item-error { color: red; margin-bottom: 8px; } .preview-image-modal img { width: 100%; } #AuthFooter { display: block; padding: 10px 40px; } #AuthFooter .Content { text-align: center; color: #909090; font-size: 12px; } #AuthFooter .Content a { color: #909090; text-decoration: underline; } .StickyTop { position: -webkit-sticky; position: sticky; top: 0px; z-index: 30; } .StickyTop #AuthMasthead { display: block; padding: 10px 30px; margin: 0px auto 40px auto; border-bottom: solid 1px var(--MastheadBorder); background-color: var(--Page); } .StickyTop #AuthMasthead .Content { display: flex; width: 100%; align-items: center; justify-content: space-between; } .StickyTop #AuthLogo { display: flex; width: 150px; align-items: center; justify-content: center; } .StickyTop #AuthLogo a { width: 100%; } .StickyTop #AuthLogo img { width: auto; max-width: 100%; max-height: 100%; border: none; } .StickyTop #AuthNavigation { align-items: center; justify-content: center; width: auto; padding-left: 30px; } .StickyTop .AuthLink { display: inline; float: right; position: relative; margin-left: 20px; padding: 10px 0px; font-size: 14px; font-weight: 600; text-transform: uppercase; color: #909090; } .StickyTop .AuthLink a { text-decoration: none; color: #909090; cursor: pointer; } .StickyTop #AuthMenu { display: table-cell; width: 70px; vertical-align: middle; padding-left: 30px; } .StickyTop #AuthMenu .ButtonIcon { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; padding: 3px; border-radius: 5px; cursor: pointer; position: relative; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; background-color: rgba(0, 0, 0, 0); } .StickyTop #AuthMenu .ButtonIcon .Icon { display: block; width: 24px; height: 24px; -webkit-mask-size: 24px; pointer-events: none !important; position: relative; } .StickyTop #AuthMenu .ButtonIcon .Icon img { width: 24px; height: 24px; } .StickyTop #AuthMenu .ButtonIcon:hover { background-color: rgba(66, 67, 68, 0.7); } @media (min-width: 600px) { .StickyTop #AuthMenu { display: none; } .StickyTop #AuthNavigation { display: flex; } } @media (max-width: 599px) { .StickyTop #AuthMenu { display: block; width: auto; } .StickyTop #AuthNavigation { display: none; } } .register__title { margin-bottom: 20px; font-size: 16px; font-weight: 700; text-transform: uppercase; color: #000000; } .register__submit { padding: 0 15px; } .register__submit__btn-group { margin-top: 8px; font-size: 14px; } .register__submit__btn-group button { font-size: 14px; margin-right: 8px; } .video-edit__title { display: block; width: auto; margin: 0px auto 20px auto; font-size: 16px; font-weight: 700; color: #000000; text-transform: uppercase; } .video-edit__title__MP3 { margin-top: 20px; } .video-edit__setting { display: block; margin: 0px auto 40px auto; font-size: 14px; } .video-edit .video { position: relative; padding-bottom: 56.25%; height: 0px; background-color: #000000; margin-bottom: 20px; } .video-edit .video iframe { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .video-edit .video img { width: 100%; } .video-edit .video .vjs-share__btn img { width: auto; } .video-edit .btn__text { background-color: white; border: 0; } .video-edit .video-edit-url { word-wrap: break-word; } .info-field-wrapper img { width: 16px; margin-right: 5px; } .info-field-link { position: relative; font-size: 12px; display: flex; align-items: center; top: -15px; color: #3266cc; } .modal-reupoad-warning .modal-window__title { font-weight: bold; font-size: 1.75rem; } .modal-reupoad-warning .reupload-warning-heading { color: #ed1a3b; font-weight: bold; } .video-upload .color--red { color: #ed1a3b; } .video-upload__title { display: block; width: auto; margin: 0px auto 20px auto; font-size: 16px; font-weight: 700; color: #000000; text-transform: uppercase; } .video-upload__upload-area { line-height: 130%; } .video-upload__upload-area h3 { font-size: 18px; line-height: 120%; font-weight: 700; margin: 18px 0px 13px 0px; } .video-upload__tips-info { display: block; max-width: 640px; margin: 0px auto; font-size: 14px; color: #666666; } .video-upload__tips-info--title { display: block; width: auto; margin: 0px auto 20px auto; font-size: 16px; font-weight: 900; color: #000000; text-transform: uppercase; } .video-upload__tips-info__container { display: flex; } .video-upload__tips-info__container--left { flex: 1; } .video-upload__tips-info__container--right { flex: 3; color: #000000; } .video-upload__tips-info__container b { color: #000000; } .video-upload__tips-info .txt-black { color: #000000; } .video-upload__tips-info .txt-red { color: #ed1a3b; } .video-upload .video-upload__bar { display: block; height: 20px; margin: 0px auto 15px auto; background-color: #ececec; position: relative; border-radius: 10px; -webkit-box-shadow: inset 10px 10px 15px -12px rgba(0, 0, 0, 0.4); } .video-upload .video-upload__bar__progress { display: none; width: 0%; height: 20px; position: absolute; left: 0px; top: 0px; z-index: 100; background-color: #3366cc; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; border-radius: 10px; } .video-upload .video-upload__bar__progress--completed { background-color: #39b54a !important; } .video-upload--details { display: block; margin: 0px auto; text-align: center; font-size: 13px; color: #666666; margin-bottom: 30px; } .video-upload--details span { font-size: 13px; color: #ed1a3b; } .video-upload .btn__text { background-color: white; border: 0; } .video-upload__upload-area { position: relative; } .video-upload__paused-block { position: absolute; top: -5px; bottom: -5px; right: -5px; left: -5px; background-color: #fff; opacity: 0.5; } .MGT40 { margin-top: 40px; } .subscription-videos .channels__info--left .name { font-family: 'Roboto'; font-size: 18px; } .subscription-videos .channels_list .text .post__details { margin-bottom: 15px; } @media (min-width: 500px) { .subscription-videos .channels_list .post__picture { height: 100px; } } @media (min-width: 1200px) { .subscription-videos .channels_list .post__picture { height: auto; } .subscription-videos .channels_list .post__picture__preview { width: 126px; height: 126px; margin: 0; } .subscription-videos .channels_list .post__picture__preview img { width: 100%; height: 100%; object-fit: contain; } .subscription-videos .label { display: table; margin: 0px 0px 10px 0px; } } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .user-edit__container h2 { padding: 30px; font-size: 28px; } .user-edit__container .delete-modal__button { width: 50%; max-width: 240px; } .user-edit__container .btn__text { background-color: white; border: 0; } .user-edit__container .form__select .form__input--hidden { display: block !important; } .user-edit__container .is-trusted { margin-bottom: 20px; } .user-edit__title { display: block; width: auto; margin: 0px auto 20px auto; font-size: 16px; font-weight: 700; color: #000000; text-transform: uppercase; } .user-edit__photo { display: flex; } .user-edit__photo--left { width: 140px; padding: 0px 20px 0px 0px; vertical-align: top; margin-bottom: 20px; } .user-edit__photo--left img { width: 100%; height: 120px; object-fit: cover; } .user-edit__photo--left:focus { outline: 0; } .user-edit__photo--right { flex: 1; width: auto; padding: 0px; font-size: 14px; vertical-align: top; line-height: 0.85rem; } .user-edit__photo--right a { color: #3366cc !important; } .user-edit__photo--right a:hover { text-decoration: underline !important; cursor: pointer; } .user-edit__photo--right p:focus { outline: 0; } .delete-modal__button { width: 50%; max-width: 240px; } .dropzone__disabled { opacity: 0.5; } .audio-player { background-color: none !important; } .generated-thumb { height: 90px; padding: 5px; opacity: 0.6; } .generated-thumb__wrapper { margin-top: 10px; } .generated-thumb__wrapper .selected { opacity: 1; border: 1px solid #ed1a3b; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .my-videos { font-size: 16px; font-family: Roboto, arial, helvetica, sans-serif; } .my-videos__block { padding-bottom: 30px; } .my-videos__block__title { display: block; font-size: 1rem; font-weight: 900; color: black; text-transform: uppercase; } .my-videos__block__content { padding: 15px 0; } .list-container { padding-right: 40px; } .list-container .list { margin-top: 20px; } .list-container .list .row { border-bottom: 1px solid #ececec; margin: 0; } .list-container .list .row:not(:first-child):not(:last-child):hover { background-color: #f4f4f4; cursor: pointer; } .list-container .list .row-selected { background-color: #e3fafd !important; } .list-container .list .Toastify__toast--success { background: var(--Primary); text-align: center; font-size: 16px; } .list-container .list__checkbox { align-self: center; } @media (max-width: 600px) { .list-container .list__checkbox { align-self: flex-start; padding-top: 10px; padding-right: 0; padding-left: 8px; transform: scale(1.2); } } .list-container .list a:hover { text-decoration: none; color: #000; } @media (max-width: 600px) { .list-container .list .col { padding-right: 0px; } } .list-container .list__no-items { padding: 20px 0; } @media (max-width: 960px) { .list-container { padding-right: 0px; border-right: none; } } .list-container--default-cursor .list .row:not(:first-child):not(:last-child):hover { cursor: default; } @media screen and (max-width: 768px) { .list-container { border: none; padding: 0; } .my-videos { padding: 0 !important; } } .modal-playlist .cBtn { border: none; background: none; } .modal-playlist .cBtn:hover { color: #ed1a3b; background: none; } .modal-confirm .modal-title { font-size: 16px; } .modal-confirm .modal-body p { font-size: 14px; color: #666666; } .Toastify__toast--success { background: var(--Primary); text-align: center; font-size: 16px; } .list-item { display: flex; padding: 15px 0; } .list-item__thumbnail { padding-right: 15px; width: 115px; } .list-item__thumbnail__wrapper { display: block; position: relative; width: 100%; } .list-item__thumbnail__wrapper img { width: 90px; height: 90px; border: none; object-fit: cover; padding: 0px; border-radius: 0px; } .list-item__duration { display: block; width: auto; background-color: rgba(0, 0, 0, 0.85); font-family: Roboto; font-size: 11px; color: #fff; position: absolute; z-index: 100; right: 5px; bottom: 5px; font-weight: 700; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 6px 5px 5px 5px; pointer-events: none; border-radius: 4px; line-height: 100%; } .list-item__totalview { color: white; position: absolute; top: 0; left: 0px; z-index: 2; user-select: none; padding: 5px 5px 3px 24px; background-color: #000000; font-size: 13px; background-image: url(/static/icons/Icon-Playlist.svg); background-repeat: no-repeat; background-size: auto auto; background-position: 5px center; } .list-item__content { flex: 1; vertical-align: top; } .list-item__title { font-weight: bold; overflow: hidden; text-overflow: ellipsis; font-size: 16px; color: #000; } .list-item__title:hover { color: inherit; text-decoration: none; } @media (min-width: 1024px) { .list-item__title { font-size: 20px; } } @media (max-width: 600px) { .list-item__title { font-size: 14px; display: -webkit-box; max-height: 40px; margin: 0 auto; -webkit-line-clamp: 2; /* autoprefixer: off */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } } .list-item__detail { font-size: 12px; color: #666666; } .list-item__actions { display: block; padding-top: 10px; font-size: 12px; color: #666666; text-transform: uppercase; } .list-item__actions__item { display: inline-block; margin-right: 5px; } .list-item__actions__item button { font-size: 12px; background-color: transparent; color: #666666; text-transform: uppercase; border: none; } @media (min-width: 600px) and (max-width: 960px) { .list-item__actions__item button { font-size: 0.75rem; } } .list-item__actions__item button:hover { color: #ed1a3b; text-decoration: none; background: transparent; } .list-item__actions__item button:focus { outline: 0; box-shadow: none; } .list-item__actions__item button a { color: #666666; text-decoration: none; } .list-item__actions__item button a:hover { color: #ed1a3b; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .search__container { position: relative; margin-bottom: 0; } @media (max-width: 600px) { .search__container { width: 100%; } } .search__container .form__input { margin-bottom: 0px; } .search__container .form__input input { background-color: var(--Transparent); } .search__submit { position: absolute; cursor: pointer; right: 0; top: 0; } .search__input { min-width: 300px; position: relative; } .search__input input { width: 100%; padding: 4px; border: solid 1px #ececec; font-size: 14px; padding-right: 40px; } .search__input input:focus { outline: 0; } .search__input:focus { outline: 0; } @media screen and (max-width: 575px) { .search__input { width: 100%; min-width: auto; } } .SearchBox { display: block; height: 40px; margin: 0px auto; outline: solid 1px var(--Transparent); border: solid 1px var(--SearchBorder); border-radius: 20px; background-color: var(--Search); } .SearchActive { outline-color: var(--Primary); } .SearchTable { display: table; width: 100%; height: 100%; } .SearchInput { display: table-cell; width: auto; vertical-align: middle; padding-left: 15px; padding-right: 5px; } .SearchClear { display: table-cell; width: 40px; vertical-align: middle; } .SearchFilter { display: table-cell; width: 40px; vertical-align: middle; } .SearchSubmit { display: table-cell; width: 40px; vertical-align: middle; padding-right: 10px; } .SearchHide { display: none !important; } .SearchInput input { width: 100%; height: 36px; font-size: var(--FS14); background-color: var(--Transparent); } /* //////////////////////////////////////////////////////////////////// */ #SearchHeader .Auto .AutoLabel { padding-left: 0px; } #SearchHeader .Auto .AutoIcon { padding: 0px 5px; width: 30px; } /* //////////////////////////////////////////////////////////////////// */ @media (min-width: 600px) { .FilterTable { display: table; width: 100%; } .FilterCol { display: table-cell; width: 20%; padding-right: 10px; vertical-align: top; } .FilterCol .FormLabel { padding-bottom: 15px; border-bottom: solid 1px var(--SearchBorder); } } @media (max-width: 599px) { .FilterTable { display: block; } .FilterCol { margin-bottom: 20px; display: block; border-bottom: solid 1px var(--SearchBorder); } } /* //////////////////////////////////////////////////////////////////// */ .FilterRadio { display: none; } .FilterLabel { display: block; padding-bottom: 15px; font-size: var(--FS13); color: var(--TextSecondary); cursor: pointer; position: relative; } .FilterDisabled { pointer-events: none; } .FilterDisabled .FilterLabel { opacity: .2; } .FilterActive { font-weight: var(--FW700); color: var(--TextPrimary); } .FilterActive:before { content: "\A"; width: 6px; height: 6px; border-radius: 50%; background: var(--Primary); display: inline-block; position: absolute; transform: translateX(calc(-100% - 8px)); } @media (min-width: 600px) { .FilterActive:before { top: 8px; left: 0px; } } @media (max-width: 599px) { .FilterActive:before { top: 4px; right: -15px; } } /* //////////////////////////////////////////////////////////////////// */ .ResultsSearchBox { display: block; max-width: 320px; height: 30px; outline: solid 1px var(--Transparent); border: solid 1px var(--SearchBorder); border-radius: 3px; background-color: var(--Search); } .ResultsSearchActive { outline-color: var(--Primary); } .ResultsSearchTable { display: table; width: 100%; height: 100%; } .ResultsSearchInput { display: table-cell; width: auto; vertical-align: middle; } .ResultsSearchClear { display: table-cell; width: 24px; vertical-align: middle; padding: 0px 3px; } .ResultsSearchSubmit { display: table-cell; width: 24px; vertical-align: middle; padding: 0px 5px; } .ResultsSearchHide { display: none !important; } .ResultsSearchInput input { width: 100%; height: 24px; font-size: var(--FS13); background-color: var(--Transparent); } .ResultsSearchBox .ButtonIcon { width: 24px; height: 24px; padding: 2px; border-radius: 0px; } .ResultsSearchBox .Icon { width: 20px; height: 20px; } /* //////////////////////////////////////////////////////////////////// */ .pagination a:hover { text-decoration: none; } .pagination-wrapper { justify-content: center; display: flex; } .page-item { font-size: 14px; } .page-item.active .page-link { font-weight: bold; color: #000 !important; background-color: transparent !important; border: none; pointer-events: none; text-decoration: none; } .page-item button { color: #000000; border: none; background: transparent; padding-left: 8px; padding-right: 8px; text-decoration: underline; } .page-item button:hover { background: transparent; color: #999999; text-decoration: underline; outline: 0; } .page-item button:focus { box-shadow: none; } .page-node__home, .page-node__next { background-color: #ffffff; text-align: center; } .page-node__home button, .page-node__next button { color: #999999; text-decoration: none; border: 1px solid #cccccc; border-radius: 3px; } .page-node__home button:hover, .page-node__next button:hover { color: #999999; background-color: #ececec !important; outline: 0; text-decoration: none; } .page-node__next { margin-left: 15px; } .page-node__home { margin-right: 15px; } .list-header { display: flex; justify-content: space-between; align-items: center; } .list-header__title { font-size: 16px; font-weight: 900; color: #000000; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 600px) { .list-header__title { font-size: 14px; } } .list-header__btn { display: flex; } @media (max-width: 600px) { .list-header__btn { text-align: right; } } .list-header__btn button { color: #fff; font-size: 12px; text-transform: uppercase; margin: 0 2px; white-space: nowrap; font-weight: 700; } @media (max-width: 600px) { .list-header__btn button { padding: 8px; margin: 2px; } } .list-header .btn { font-size: 12px; text-transform: uppercase; font-weight: 700; } .subscribed-channels .channels__info--left .name { font-family: 'Roboto'; font-size: 18px; } .subscribed-channels .channels_list .text .post__details { margin-bottom: 15px; } @media (min-width: 500px) { .subscribed-channels .channels_list .post__picture { height: 100px; } } @media (min-width: 1200px) { .channels_list .post .text { margin-top: 30px; } .subscription-videos .channels_list .post__picture { height: auto; } .subscription-videos .channels_list .post__picture__preview { width: 126px; height: 126px; margin: 0; } .subscription-videos .channels_list .post__picture__preview img { width: 100%; height: 100%; object-fit: contain; } .subscription-videos .label { display: table; margin: 0px 0px 10px 0px; } } .info { display: block; margin: 0px auto; padding: 0px 15px; border-bottom: solid 1px #ececec; } .channels__info { display: block; width: auto; margin: 0px auto 15px auto; } .channels__info--left { display: block; width: auto; padding-right: 15px; margin: 0px auto 10px auto; } .channels__info--left .name { display: block; margin-bottom: 3px; text-transform: capitalize; font-size: 22px; color: #000000; } .channels__info--left .stats { display: block; font-family: 'Roboto'; font-size: 14px; color: #999999; } .channels__info--left .stats a { color: #ed1a3b; text-decoration: none; } .channels__info--left .filter__container { background: none; margin-top: 20px; padding-top: 20px; border-top: solid 1px #ececec; } .channels__info--left .filter__button { background-position: 0px center; padding-left: 10px; } .channels__info--left .filter__title { border-bottom: 0; } .channels__info--left .filter__item.active a { font-weight: normal; } .channels__info--right { display: block; width: auto; } .sort_menu { position: relative; } .channels_list { display: block; width: auto; margin: 0px auto; } .channels_list.no-border { margin-bottom: 15px; } .channels_list .post { display: flex; width: 100%; padding: 0px; margin: 0px auto 10px auto; border-bottom: solid 1px #ececec; } .channels_list .post__picture { display: block; width: 80px; padding: 0px 10px 10px 0px; vertical-align: top; margin: 0; } .channels_list .post__content { flex: 1; width: auto; padding: 0px 0px 10px 0px; vertical-align: top; } .channels_list .post__content__title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; font-weight: 700; } .channels_list .post__content__title a { color: #000000; text-decoration: none; } .channels_list .text { padding: 0; margin: 0; } .channels_list .text .post__details { margin-bottom: 15px; } .channels_list .title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .following_channels { display: block; width: auto; margin: 0px auto; } .following_channels .table, .following_channels .table__row { display: block; } .following_channels .post { display: table; width: 100%; padding: 0px; margin: 0px auto 10px auto; border-bottom: solid 1px #ececec; } .following_channels .post__picture { display: block; width: 80px; padding: 0px 10px 10px 0px; vertical-align: top; } .following_channels .post__content { display: block; width: auto; padding: 0px 0px 10px 0px; vertical-align: top; } .following_channels .post .action { display: none; } .manage_channel { display: inline-block; margin: 0px; padding: 5px; font-family: 'Roboto'; font-size: 10px; line-height: 10px; font-weight: 700; color: #ffffff !important; border-radius: 3px; background-color: #ed1a3b; cursor: pointer; border: none; outline: none; -webkit-appearance: none; } .btn__un_follow { color: #999999 !important; background-color: #ececec !important; } .category-detail-page .after-player-livestream + div { max-width: 1200px; margin: auto; } .category-detail-page .videos.bottom-0, .category-detail-page .videos .post { border-bottom: none; } @media (min-width: 768px) { .following_channels .post .action { display: table-cell; width: 120px; padding: 0px 10px 10px 0px; vertical-align: middle; text-align: right; } .channels__info { display: table; width: 100%; margin: 0px; } .channels__info--left { display: table-cell; vertical-align: middle; } .channels__info--right { display: table-cell; vertical-align: middle; width: 160px; } .manage_channel { width: 120px; font-size: 14px; line-height: 14px; text-transform: uppercase; padding: 12px 15px 13px 15px; } } @media (min-width: 500px) { .following_channels .post__picture { width: 100px; } .following_channels .post .text .title { font-size: 17px; } .channels_list .post__picture { width: 100px; height: 100px; margin: 0; } .channels_list .post__content .channels_list .post__content__title { font-size: 17px; } .channels_list .post .text { margin: 0; } } @media (min-width: 1200px) { .channels_list { display: flex; flex-wrap: wrap; border-bottom: solid 1px #ececec; margin-bottom: 40px; padding: 0px 0px 20px 0px; } .channels_list.no-border { border-bottom: 0; margin-bottom: 0; } .channels_list .post { display: inline-block; vertical-align: top; width: calc(100% / 10); padding: 0px 10px 0px 0px; margin: 0px; border-bottom: none 0px; } .channels_list .post__picture { display: block; width: auto; height: auto; padding: 0px; margin: 0px 0px 10px 0px; } .channels_list .post__picture__preview { width: 114px; height: 114px; margin: 0; } .channels_list .post__picture__preview img { width: 100%; height: 100%; object-fit: contain; } .channels_list .post__content { display: block; width: auto; margin: 0px; padding: 0px 0px 15px 0px; } .channels_list .post__content__title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .channels_list .post__content__details { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 12px; } } .padding__top--right { padding: 0px; } .link:hover { text-decoration: none; } .label { display: table; margin: 0px 15px 15px 15px; } .label--left { display: table-cell; width: auto; vertical-align: middle; padding: 0px; font-family: 'Roboto'; font-size: 18px; line-height: 18px; font-weight: 700; } .label--left a { color: #000000; } .label--right { display: table-cell; width: auto; vertical-align: middle; text-align: right; padding: 0px 10px; font-family: 'Roboto'; font-size: 13px; line-height: 18px; } .label--right a { color: #ed1a3b; } .title { display: block; font-family: 'Roboto', serif; font-size: 20px; line-height: 120%; color: #000000; margin: 0px auto 20px auto; word-break: break-all; } @media (min-width: 500px) { .info { padding: 0px 0px 15px 0px; } .label { display: table; margin: 0px 0px 15px 0px; } .padding__top--right { padding: 0px 10px 0px 0px; } } @media (max-width: 500px) { .channels_list { padding: 0 15px; } } @media (min-width: 1200px) { .label { display: table; margin: 0px 0px 10px 0px; } } .sortOptionContainer { display: inline-block; } .sortOptionContainer .dropdown .dropdown-menu { background-color: var(--Dropdown); border: 1px solid var(--DropdownBorder); border-radius: 5px; padding: 5px; } .sortOptionContainer .dropdown .dropdown-menu .dropdown-item { display: flex; align-items: center; } .sortOptionContainer .dropdown .dropdown-menu .dropdown-item a { font-size: var(--FS14); color: var(--TextPrimary); font-weight: var(--FW400); padding: 4px 8px; text-decoration: none; } .sortOptionContainer .dropdown .dropdown-menu .dropdown-item .AutoIcon { visibility: hidden; } .sortOptionContainer .dropdown .dropdown-menu .dropdown-item.selected .AutoIcon { visibility: visible; } .sortOptionContainer .dropdown .dropdown-menu .dropdown-item:hover { background-color: var(--DropdownHover); } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .cBtn-sort { padding-left: 45px; color: #666666; width: 130px; font-weight: 400 !important; font-size: 12px; text-transform: uppercase; background-repeat: no-repeat; background-position: 18px center; cursor: pointer; border: none; background-color: transparent; outline: none; -webkit-appearance: none; } .cBtn-sort.sort-icon { background-image: url(/static/icons/Icon-sort.svg); } .cBtn-sort.view-filter-icon { background-image: url(/static/icons/Icon-Views.svg); } .cBtn-sort:focus { outline: 0; } .filter__wrapper { display: flex; justify-content: space-between; } .filter__wrapper .search { display: flex; } .filter__wrapper .search .filter__button { margin-left: 10px; } .filter__container { margin: 0px auto 20px auto; padding: 20px 40px; background: linear-gradient(to bottom, #ececec 0%, rgba(236, 236, 236, 0.5) 50%, rgba(255, 255, 255, 0) 100%); } .filter__container .row { border-bottom: none !important; } .filter__setting { padding-left: 40px; font-size: 12px; color: #666666; text-transform: uppercase; background-image: url(/static/icons/Icon-Setting.svg); cursor: pointer; background-repeat: no-repeat; background-position: 13px center; } @media (max-width: 600px) { .filter__setting { padding-left: 35px; } } .filter__title { font-size: 15px; font-weight: 700; color: #000000; text-transform: uppercase; padding-bottom: 5px; margin-bottom: 10px; border-bottom: solid 1px #cccccc; } .filter__title { font-size: 15px; font-weight: 700; color: #000000; text-transform: uppercase; padding-bottom: 5px; margin-bottom: 10px; border-bottom: solid 1px #cccccc; } .filter__btn { display: flex; justify-content: flex-end; } .filter__btn .dropdown { display: flex; justify-content: flex-end; align-items: center; } .filter__btn .dropdown a { font-weight: 400; font-size: 12px; text-transform: capitalize; } .filter__btn .dropdown label { margin: 0; } .filter__btn .dropdown.limit-dropdown { padding-left: 15px; } .filter__item { font-size: 14px; margin-bottom: 15px; } .filter__item a { color: #666666; text-decoration: none; } .filter__item a:hover { color: #333333; } .filter__item.active a { color: #ed1a3b; font-weight: bold; } .filter__item.active a:hover { color: #333333; } .filter .form { margin: 0; } .filter .form__input { margin: 0px 20px 0 0; } .sort-filter .dropdown-item { padding: 0; } .sort-filter .dropdown-item a { display: block; padding: 0.25rem 1.5rem; color: #666666; font-size: 13px; } .sort-filter .dropdown-item a:hover { text-decoration: none; color: #000000; } .sort-filter .dropdown-item:active a, .sort-filter .dropdown-item:active a:hover, .sort-filter .dropdown-item:focus a, .sort-filter .dropdown-item:focus a:hover { color: #fff; } .sort-filter .dropdown-item.selected a { color: #ed1a3b; } .sort-filter .dropdown-item.selected a:hover { color: #ed1a3b; } .sort-filter .dropdown-item.selected:active a, .sort-filter .dropdown-item.selected:active a:hover, .sort-filter .dropdown-item.selected:focus a, .sort-filter .dropdown-item.selected:focus a:hover { color: #fff; } .item-action { display: flex; width: 100%; margin: 16px 0; } @media (max-width: 600px) { .item-action { padding-bottom: 60px; } } .item-action input[type='checkbox'] { margin-right: 30px; } @media (max-width: 600px) { .item-action input[type='checkbox'] { transform: scale(1.2); margin-left: -6px; margin-right: 15px; } } .item-action button { font-size: 12px; text-transform: uppercase; font-weight: 700; } .item-action button span { display: block; width: auto; color: #666666; text-decoration: none; text-transform: capitalize; font-weight: initial; } .search__pc { display: flex; } .search__mobile { display: none; } @media screen and (max-width: 768px) { .search__pc { display: none; } .filter__btn { padding-left: 0 !important; padding-right: 0 !important; } .search__mobile { display: block; margin: 16px 0; } } .dropdown-item a { color: #666666; font-size: 13px; } .dropdown-item a:hover { text-decoration: none; color: #000000; } .dropdown-item:active a, .dropdown-item:active a:hover, .dropdown-item:focus a, .dropdown-item:focus a:hover { color: #fff; } .dropdown-item.selected a { color: #ed1a3b; } .dropdown-item.selected a:hover { color: #ed1a3b; } .dropdown-item.selected:active a, .dropdown-item.selected:active a:hover, .dropdown-item.selected:focus a, .dropdown-item.selected:focus a:hover { color: #fff; } .sort-limit-block { display: flex; } @media (max-width: 600px) { .sort-limit-block { position: absolute; top: 50px; } } .search__container { align-items: center; display: flex; } .search__container .form__input { margin-bottom: 0px; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .video-filter-dropdown { padding: 10px; width: 250px; } .video-filter-dropdown .video-filter-item select { background-color: #ffffff; } .video-filter-dropdown .video-filter-item input[type="checkbox"] { margin-right: 15px; } .video-filter-dropdown .video-filter-item .form__input { margin-right: 0px; margin-bottom: 20px; } .video-filter-dropdown .video-filter-item .percentage-mark { padding-left: 5px; font-size: 12px; align-self: center; } .sort-limit-block { display: flex; margin-top: 10px; } @media (max-width: 960px) { .sort-limit-block { position: relative !important; top: -5px !important; } } @media (min-width: 1025px) { .sort-limit-block { margin-top: 0px; } } .sort-limit-block .limit-dropdown { margin-left: auto; } @media (max-width: 960px) { .sort-limit-block .limit-dropdown { margin-left: auto; } } .manage-livestreams .list .headers { font-weight: 700; } .manage-livestreams .list .row { font-size: 12px; padding: 10px; align-items: center; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .rtmp-address__item { padding-top: 4px; padding-bottom: 4px; } .rtmp-address__items { border: 1px solid #ececec; padding: 10px; } .rtmp-address__item-large-text { font-size: 14px; } .rtmp-address__item-small-text { font-size: 12px; color: #666666; } .rtmp-address--short-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .admin__users-wrapper { padding-right: 40px; border-right: 1px solid #ececec; } @media (max-width: 960px) { .admin__users-wrapper { padding-right: 0px; border-right: none; } } .admin__users-wrapper .item-action { border-bottom: none; } .admin__users-wrapper .list .row-selected { background-color: #e3fafd !important; } .admin__users-wrapper .list__checkbox { align-self: center; } @media (max-width: 600px) { .admin__users-wrapper .list__checkbox { padding: 10px 0px 0px 8px; align-self: flex-start; transform: scale(1.2); } } .admin__users-wrapper .list a:hover { text-decoration: none; color: #000; } .admin__users-wrapper .list .row:nth-of-type(2) { border-top: 1px solid #ececec; } .admin__users-wrapper .filter__btn { padding: 0; } .user-item { display: flex; padding: 15px 0; } .user-item__thumbnail { padding-right: 15px; width: 115px; } .user-item__thumbnail__wrapper { display: block; position: relative; width: 100%; } .user-item__thumbnail__wrapper img { width: 90px; height: 90px; border: none; object-fit: cover; padding: 0px; border-radius: 0px; } .user-item__thumbnail__wrapper .checkmark-icon { position: absolute; top: -8px; right: 0; width: 30px; height: 30px; } .user-item__content { flex: 1; vertical-align: top; } .user-item__title { font-weight: bold; overflow: hidden; text-overflow: ellipsis; font-size: 16px; color: #000; } .user-item__title:hover { color: inherit; text-decoration: none; } @media (min-width: 1024px) { .user-item__title { font-size: 20px; } } @media (max-width: 600px) { .user-item__title { font-size: 14px; display: -webkit-box; max-height: 40px; margin: 0 auto; -webkit-line-clamp: 2; /* autoprefixer: off */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } } .user-item__detail { font-size: 12px; color: #666666; } .user-item__actions { display: block; padding-top: 10px; margin: 0 -8px; font-size: 12px; color: #666666; text-transform: uppercase; } .user-item__actions__item { display: inline-block; margin-right: 5px; } .user-item__actions__item button { font-size: 12px; background-color: transparent; color: #666666; text-transform: uppercase; border: none; } @media (min-width: 600px) and (max-width: 960px) { .user-item__actions__item button { font-size: 0.75rem; } } .user-item__actions__item button:hover { color: #ed1a3b; text-decoration: none; background: transparent; } .user-item__actions__item button:focus, .user-item__actions__item button:active { outline: 0; box-shadow: none !important; background-color: transparent !important; } .user-item__actions__item button a { color: #666666; text-decoration: none; } .user-item__actions__item button a:hover { color: #ed1a3b; } .modal-delete { background-color: #ffffff; } .modal-delete .modal-window__title { padding: 16px; font-size: 16px; font-weight: 700; color: #000000; } .modal-delete .modal-window__footer { padding: 16px; } .modal-delete__title { font-size: 16px; font-weight: 700; color: #000000; margin: 20px; } .modal-delete .modal-delete-content { border: none !important; padding: 16px; padding-top: 0; } .all-videos-button { margin-top: 15px; } .download-link__loading { height: 32px; width: 100px; padding: 0px; background-color: #d0102e; display: flex; justify-content: center; align-items: center; cursor: default; } .admin-videos-header { display: flex; justify-content: space-between; align-items: center; } @media (max-width: 410px) { .admin-videos-header { flex-direction: column; align-items: flex-start; } .admin-videos-header__title { margin-bottom: 5px; } } .admin-videos-header__title { font-size: 16px; font-weight: 900; color: #000000; text-transform: uppercase; } .admin-videos-header__buttons { display: flex; } .admin-videos-header__buttons a { font-size: 12px; text-transform: uppercase; font-weight: 700; } .admin-videos-header__buttons a:last-child { margin-left: 10px; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .admin__videos-wrapper { border-right: 1px solid #ececec; } .admin__videos-wrapper .list-container { padding-right: 25px; } .admin__videos-wrapper .list-container .list .filter__btn { padding: 0; } .admin__videos-wrapper .list-container .list a { color: #666666; } .admin__videos-wrapper .list-container .list a.videos-list-item__title { color: #000000; font-weight: bold; } .admin__videos-wrapper .list-container .list a:hover { text-decoration: underline; color: #000000; } .admin__videos-wrapper .list-container .list .row { border-bottom: 1px solid #ececec; cursor: pointer; } .admin__videos-wrapper .list-container .list .row:nth-of-type(2) { border-top: 1px solid #ececec; } .admin__videos-wrapper .list-container .list .row:hover { background-color: #f4f4f4; } .media-converter-container { font-size: 12px; display: flex; justify-content: start; width: fit-content; padding: 5px 10px; border-radius: 10px; color: #fff; } .media-converter-container a { color: #fff !important; } .media-converter-container--red { background-color: red; } .media-converter-container--blue { background-color: #3366ff; } .video-converter-container .title { font-size: 16px; font-weight: 700; color: black; margin-bottom: 16px; text-transform: uppercase; } .video-converter-container .slider-title__container { display: flex; justify-content: space-between; padding: 0px 10px; margin-bottom: 20px; } .video-converter-container .slider-title--text { font-weight: 400; } .video-converter-container .slider-title--left { color: red; } .video-converter-container .slider-title--right { color: #3366ff; } .video-converter-container .check-job-link { margin-left: 15px; } /** * Rangeslider */ .rangeslider { margin: 20px 0; position: relative; background: #e6e6e6; -ms-touch-action: none; touch-action: none; } .rangeslider, .rangeslider .rangeslider__fill { display: block; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); } .rangeslider .rangeslider__handle { background: #fff; border: 1px solid #ccc; cursor: pointer; display: inline-block; position: absolute; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 -1px 3px rgba(0, 0, 0, 0.4); } .rangeslider .rangeslider__handle .rangeslider__active { opacity: 1; } .rangeslider .rangeslider__handle-tooltip { width: 40px; height: 40px; text-align: center; position: absolute; background-color: rgba(0, 0, 0, 0.8); font-weight: normal; font-size: 14px; transition: all 100ms ease-in; border-radius: 4px; display: inline-block; color: white; left: 50%; transform: translate3d(-50%, 0, 0); } .rangeslider .rangeslider__handle-tooltip span { margin-top: 12px; display: inline-block; line-height: 100%; } .rangeslider .rangeslider__handle-tooltip:after { content: ' '; position: absolute; width: 0; height: 0; } /** * Rangeslider - Horizontal slider */ .rangeslider-horizontal { height: 12px; border-radius: 10px; } .rangeslider-horizontal .rangeslider__fill { height: 100%; background-color: #7cb342; border-radius: 10px; top: 0; } .rangeslider-horizontal .rangeslider__handle { width: 30px; height: 30px; border-radius: 30px; top: 50%; transform: translate3d(-50%, -50%, 0); } .rangeslider-horizontal .rangeslider__handle:after { content: ' '; position: absolute; width: 16px; height: 16px; top: 6px; left: 6px; border-radius: 50%; background-color: #dadada; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset, 0 -1px 3px rgba(0, 0, 0, 0.4) inset; } .rangeslider-horizontal .rangeslider__handle-tooltip { top: -55px; } .rangeslider-horizontal .rangeslider__handle-tooltip:after { border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgba(0, 0, 0, 0.8); left: 50%; bottom: -8px; transform: translate3d(-50%, 0, 0); } /** * Rangeslider - Vertical slider */ .rangeslider-vertical { margin: 20px auto; height: 150px; max-width: 10px; background-color: transparent; } .rangeslider-vertical .rangeslider__fill, .rangeslider-vertical .rangeslider__handle { position: absolute; } .rangeslider-vertical .rangeslider__fill { width: 100%; background-color: #7cb342; box-shadow: none; bottom: 0; } .rangeslider-vertical .rangeslider__handle { width: 30px; height: 10px; left: -10px; box-shadow: none; } .rangeslider-vertical .rangeslider__handle-tooltip { left: -100%; top: 50%; transform: translate3d(-50%, -50%, 0); } .rangeslider-vertical .rangeslider__handle-tooltip:after { border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid rgba(0, 0, 0, 0.8); left: 100%; top: 12px; } /** * Rangeslider - Reverse */ .rangeslider-reverse.rangeslider-horizontal .rangeslider__fill { right: 0; } .rangeslider-reverse.rangeslider-vertical .rangeslider__fill { top: 0; bottom: inherit; } /** * Rangeslider - Labels */ .rangeslider__labels { position: relative; } .rangeslider-vertical .rangeslider__labels { position: relative; list-style-type: none; margin: 0 0 0 24px; padding: 0; text-align: left; width: 250px; height: 100%; left: 10px; } .rangeslider-vertical .rangeslider__labels .rangeslider__label-item { position: absolute; transform: translate3d(0, -50%, 0); } .rangeslider-vertical .rangeslider__labels .rangeslider__label-item::before { content: ''; width: 10px; height: 2px; background: black; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); z-index: -1; } .rangeslider__labels .rangeslider__label-item { position: absolute; font-size: 14px; cursor: pointer; display: inline-block; top: 10px; transform: translate3d(-50%, 0, 0); } .rangeslider { background-color: #3366ff; margin: 10px; } .rangeslider .rangeslider__fill { background-color: red; } .filter-transactions .filter__btn { display: flex; flex-direction: column; gap: 10px; } .filter-transactions .filter__btn .search__container { display: flex; align-items: center; justify-content: space-between; } .date-range-modal { max-width: 480px; } .date-range-modal .dropdown-container { display: flex; align-items: center; margin-left: 15px; } .date-range-modal .dropdown-container .dropdown { margin-bottom: 0; margin-left: 10px; } .date-range-modal .btn-group-modal { text-align: end; margin-right: 20px; } .date-range-modal .btn-group-modal button { width: 100px; margin-left: 15px; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .my-videos-stats { font-size: 14px; } .my-videos-stats b { color: #666666; } .react-bootstrap-table th.sortable { cursor: pointer; } .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid #000000; border-right: 4px solid transparent; border-bottom: 0 dotted; border-left: 4px solid transparent; content: ""; } .dropup .caret { transform: rotate(180deg); } .filter-right-container { padding-right: 0px; flex: 1; display: none; flex-direction: row-reverse; } @media (max-width: 960px) { .filter-right-container { display: none; } } @media (min-width: 1025px) { .filter-right-container { display: flex; } } .filter-right-container__mobile { margin-top: 10px; } @media (min-width: 1025px) { .filter-right-container__mobile { display: none; } } .filter-right-container__mobile .filter__btn { display: block; } .filter-right-container__mobile .filter-search { display: flex; } @media (max-width: 960px) { .filter-right-container__mobile .filter-search { padding: 0px; } } .right-container { width: 100%; } .right-container .filter-tools { display: contents; } .right-container .filter-tools .show-featured { font-size: 14px; padding-left: 15px; } .right-container .filter-tools .show-featured input[type='checkbox'] { margin-right: 15px; } .search__container { width: 100%; } .search__container .search__input { width: 100%; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .my-videos-stats { font-size: 14px; } .my-videos-stats b { color: #666666; } .react-bootstrap-table th.sortable { cursor: pointer; } .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid #000000; border-right: 4px solid transparent; border-bottom: 0 dotted; border-left: 4px solid transparent; content: ""; } .dropup .caret { transform: rotate(180deg); } .filter-right-container { padding-right: 0px; flex: 1; display: none; flex-direction: row-reverse; } @media (max-width: 960px) { .filter-right-container { display: none; } } @media (min-width: 1025px) { .filter-right-container { display: flex; } } .filter-right-container__mobile { margin-top: 10px; } @media (min-width: 1025px) { .filter-right-container__mobile { display: none; } } .filter-right-container__mobile .filter__btn { display: block; } .filter-right-container__mobile .filter-search { display: flex; } @media (max-width: 960px) { .filter-right-container__mobile .filter-search { padding: 0px; } } .right-container { width: 100%; } .right-container .filter-tools { display: contents; } .right-container .filter-tools .show-featured { font-size: 14px; padding-left: 15px; } .right-container .filter-tools .show-featured input[type='checkbox'] { margin-right: 15px; } .search__container { width: 100%; } .search__container .search__input { width: 100%; } .btn.btn-primary.remove-item-btn { font-size: 12px; text-transform: uppercase; font-weight: 700; margin-bottom: 20px; } .video-js .vjs-overlay{color:#fff;position:absolute;text-align:center}.video-js .vjs-overlay-no-background{max-width:33%}.video-js .vjs-overlay-background{background-color:#646464;background-color:rgba(255,255,255,0.4);border-radius:3px;padding:10px;width:33%}.video-js .vjs-overlay-top-left{top:5px;left:5px}.video-js .vjs-overlay-top{left:50%;margin-left:-16.5%;top:5px}.video-js .vjs-overlay-top-right{right:5px;top:5px}.video-js .vjs-overlay-right{right:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-bottom-right{bottom:3.5em;right:5px}.video-js .vjs-overlay-bottom{bottom:3.5em;left:50%;margin-left:-16.5%}.video-js .vjs-overlay-bottom-left{bottom:3.5em;left:5px}.video-js .vjs-overlay-left{left:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-center{left:50%;margin-left:-16.5%;top:50%;transform:translateY(-50%)}.video-js .vjs-no-flex .vjs-overlay-left,.video-js .vjs-no-flex .vjs-overlay-center,.video-js .vjs-no-flex .vjs-overlay-right{margin-top:-15px} .vjs-settings-box { z-index: 1; width: fit-content; height: auto; position: absolute; bottom: 57px; right: 46px; background-color: var(--TransparentDark); backdrop-filter: blur(10px); /* //////////////////////////////////////////////////////////////////// */ } .vjs-settings-box .PanelActive { display: block; } .vjs-settings-box .OptionTable { display: table; width: 100%; } .vjs-settings-box .OptionCol { display: table-cell; width: auto; vertical-align: middle; font-size: 12px; color: var(--White); cursor: pointer; } .vjs-settings-box .OptionColSelect { width: 30px; background-position: center center; background-repeat: no-repeat; background-size: 18px; } .vjs-settings-box .OptionColSelected { width: auto; text-align: right; padding: 8px 5px 8px 20px; color: #B0B3B8; } .vjs-settings-box .OptionColText { width: auto; padding: 8px 0px 8px 5px; font-weight: 600; } .vjs-settings-box .OptionColLabel { width: auto; padding: 8px 15px 8px 5px; font-weight: 600; } .vjs-settings-box .OptionColIcon { width: 30px; background-position: center center; background-repeat: no-repeat; background-size: 18px; } .vjs-settings-box .OptionSelected { background-color: var(--Gray60); } .vjs-settings-box .IconSelect { background-image: url(/static/icons/new-ui/Icon-Select-White.svg); } .vjs-settings-box .OptionSelected .IconSelect { background-image: url(/static/icons/new-ui/Icon-Selected-White.svg); } .vjs-settings-box .OptionTable:hover { background-color: var(--Gray50); } .vjs-settings-box .OptionReturn { border-bottom: solid 1px var(--Gray50); margin-bottom: 8px; } .vjs-settings-box .IconArrowRight { height: 32px; background-image: url(/static/icons/new-ui/Icon-Arrow-Right-White.svg); } .vjs-settings-box .IconArrowLeft { height: 32px; background-image: url(/static/icons/new-ui/Icon-Arrow-Left-White.svg); } /** * videojs-share * @version 3.2.1 * @copyright 2020 Mikhail Khazov * @license MIT */ .video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-modal-dialog-content { display: flex; align-items: center; padding: 0; background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.77), rgba(0, 0, 0, 0.75) ); } .video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button { position: absolute; right: 0; top: 5px; width: 30px; height: 30px; color: #fff; cursor: pointer; opacity: 0.9; transition: opacity 0.25s ease-out; } .video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button:before { content: '\D7'; font-size: 20px; line-height: 15px; } .video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button:hover { opacity: 1; } .video-js .vjs-share { display: flex; flex-direction: column; justify-content: space-around; align-items: center; width: 100%; height: 100%; max-height: 400px; } .video-js .vjs-share__top, .video-js .vjs-share__middle, .video-js .vjs-share__bottom { display: flex; } .video-js .vjs-share__top, .video-js .vjs-share__middle { flex-direction: column; justify-content: space-between; } .video-js .vjs-share__middle { padding: 0 25px; } .video-js .vjs-share__title { align-self: center; font-size: 22px; color: #fff; } .video-js .vjs-share__subtitle { width: 100%; margin: 0 auto 12px; font-size: 16px; color: #fff; opacity: 0.7; } .video-js .vjs-share__short-link-wrapper { position: relative; display: block; width: 100%; height: 40px; margin: 0 auto; margin-bottom: 15px; border: 0; color: rgba(255, 255, 255, 0.65); background-color: #363636; outline: none; overflow: hidden; flex-shrink: 0; } .video-js .vjs-share__short-link { display: block; width: 100%; height: 100%; padding: 0 40px 0 15px; border: 0; color: rgba(255, 255, 255, 0.65); background-color: #363636; outline: none; } .video-js .vjs-share__btn { position: absolute; right: 0; bottom: 0; height: 40px; width: 40px; display: flex; align-items: center; padding: 0 11px; border: 0; color: #fff; background-color: #2e2e2e; background-size: 18px 19px; background-position: center; background-repeat: no-repeat; cursor: pointer; outline: none; transition: width 0.3s ease-out, padding 0.3s ease-out; } .video-js .vjs-share__btn svg { flex-shrink: 0; } .video-js .vjs-share__btn span { position: relative; padding-left: 10px; opacity: 0; transition: opacity 0.3s ease-out; } .video-js .vjs-share__btn:hover { display: grid; width: 100%; grid-template-columns: auto auto; gap: 10px; text-align: center; background-image: none; padding: 0; } .video-js .vjs-share__btn .vjs-share__short-link-hidden{ display: none; } .video-js .vjs-share__btn .vjs-share__btn-copy{ display: flex; padding: 0px 10px; } .video-js .vjs-share__btn .vjs-share__btn-copy-current{ display: none; background: #008080; height: 100%; } .video-js .vjs-share__btn > div{ justify-items: center; justify-content: center; align-items: inherit; } .video-js .vjs-share__btn:hover .vjs-share__btn-copy-current{ display: flex; } .video-js .vjs-share__btn:hover span { opacity: 1; } .video-js .vjs-share__socials { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; transition: width 0.3s ease-out, height 0.3s ease-out; } .video-js .vjs-share__social { display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 32px; height: 32px; margin-right: 6px; margin-bottom: 6px; cursor: pointer; font-size: 8px; transition: transform 0.3s ease-out, filter 0.2s ease-out; border: none; outline: none; } .video-js .vjs-share__social:hover { filter: brightness(115%); } .video-js .vjs-share__social svg { overflow: visible; max-height: 24px; } .video-js .vjs-share__social_vk { background-color: #5d7294; } .video-js .vjs-share__social_ok { background-color: #ed7c20; } .video-js .vjs-share__social_mail, .video-js .vjs-share__social_email { background-color: #134785; } .video-js .vjs-share__social_tw { background-color: #76aaeb; } .video-js .vjs-share__social_reddit { background-color: #ff4500; } .video-js .vjs-share__social_fbFeed { background-color: #475995; } .video-js .vjs-share__social_messenger { background-color: #0084ff; } .video-js .vjs-share__social_gp { background-color: #d53f35; } .video-js .vjs-share__social_linkedin { background-color: #0077b5; } .video-js .vjs-share__social_viber { background-color: #766db5; } .video-js .vjs-share__social_telegram { background-color: #4bb0e2; } .video-js .vjs-share__social_whatsapp { background-color: #78c870; } .video-js .vjs-share__social_allsocial { background-color: #df1f39; } .video-js .vjs-share__bottom { justify-content: center; } .video-js .vjs-share__start-at:focus { outline: none; } .video-js .vjs-share__start-at::-webkit-outer-spin-button, .video-js .vjs-share__start-at::-webkit-inner-spin-button { -webkit-appearance: none; } .video-js .vjs-share__start-at { -moz-appearance: textfield; background: none; color: currentColor; box-shadow: none; border: 0; border-bottom: 3px solid #363636; padding: 0px 5px; width: 60px; } .video-js .vjs-share__start-at-label { margin-top: 10px; text-align: center; } .video-js .vjs-share__text-center { text-align: center; } @media (max-height: 220px) { .video-js .vjs-share .hidden-xs { display: none; } } @media (max-height: 350px) { .video-js .vjs-share .hidden-sm { display: none; } } @media (min-height: 400px) { .video-js .vjs-share__title { margin-bottom: 15px; } .video-js .vjs-share__short-link-wrapper { margin-bottom: 30px; } } @media (min-width: 320px) { .video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button { right: 5px; top: 10px; } } @media (min-width: 660px) { .video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button { right: 20px; top: 20px; } .video-js .vjs-share__social { width: 40px; height: 40px; } } .UIBox { position: relative; } .UITop { display: block; width: 100%; position: absolute; top: 0px; left: 0px; z-index: 4; } .UIBottom { display: block; width: 100%; position: absolute; bottom: 0px; left: 0px; z-index: 6; } .UITop .UIBox { padding: 15px 15px 30px 15px; } .UIBottom .UIBox { padding-top: 15px; } .UITopTable { display: table; width: 100%; } .UITopCol { display: table-cell; vertical-align: middle; width: auto; } /* //////////////////////////////////////////////////////////////////// */ .UITitle { display: block; color: var(--White); padding-right: 10px; } .UITitle * { font-size: 9px; } @media (min-width: 400px) { .UITitle * { font-size: 10px; } } @media (min-width: 500px) { .UITitle * { font-size: 12px; } } @media (min-width: 600px) { .UITitle * { font-size: 14px; } } @media (min-width: 800px) { .UITitle * { font-size: 16px; } } /* //////////////////////////////////////////////////////////////////// */ .UITable { display: table; width: 100%; } .UICol { display: table-cell; vertical-align: middle; } .UIColLeft { width: auto; padding-right: 5px; } .UIColRight { width: auto; text-align: right; } .UIColLeft .ButtonIcon { float: left; } .UIColRight .ButtonIcon { float: right; } .AVTabs { display: inline-block; float: right; border-radius: 4px; background-color: var(--Gray40); overflow: hidden; } .AVTabsTable { display: table; } .AVTabsCol { display: table-cell; vertical-align: middle; } .AVTab { padding: 8px; border-radius: 3px; font-size: 9px; line-height: 9px; font-weight: 500; text-transform: uppercase; color: var(--White); cursor: pointer; } .AVTabActive { background-color: var(--Blue); } #AVVideo.AVTabActive { filter: drop-shadow(1px 0px 3px var(--TransparentDark)); } #AVAudio.AVTabActive { filter: drop-shadow(-1px 0px 3px var(--TransparentDark)); } .CoverDarkPlayer { background-color: rgba(0, 0, 0, 0.85); width: 100%; height: 100%; position: absolute; backdrop-filter: blur(10px); left: 0px; top: 0px; z-index: 999997; } @media (max-width: 499.9px) { .AVTab { padding: 8px; font-size: 8px; line-height: 8px; } } #UIRecommended { display: block; width: 100%; height: 100%; background-color: var(--Black); position: absolute; left: 0px; top: 0px; z-index: 5; background-position: center center; background-repeat: no-repeat; background-size: 60px; } #UIScreen { display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 2; background-position: center center; background-repeat: no-repeat; background-size: 30px; } @media (min-width: 360px) { #UIScreen, #UIRecommended { background-size: 60px; } } .RecommendedBox { display: block; width: 100%; margin: 0px auto 15px auto; } .RecommendedBox .Post { display: inline-block; float: left; width: 25%; position: relative; cursor: pointer; padding: 2px; } .RecommendedBox .Post .Text { display: block; position: absolute; left: 0px; top: 0px; z-index: 5000000000; width: 100%; height: 100%; padding: 10px 15px 10px 10px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 15%, rgba(0, 0, 0, 0) 70%); opacity: 0; } .RecommendedBox .Post .Photo { display: block; } .RecommendedBox .Post .Photo img { border-radius: 5px; } .RecommendedBox .Title { font-size: 12px; color: var(--White); font-weight: 600; margin-bottom: 2px; } .RecommendedBox .Info { font-size: 10px; color: var(--Gray20); } .RecommendedBox .Duration { display: inline-block; padding: 6px 5px 5px 5px; pointer-events: none; border-radius: 4px; text-align: center; white-space: nowrap; font-size: 11px; line-height: 100%; position: absolute; z-index: 4000000000; background-color: var(--Duration); color: var(--White); font-weight: 700; right: 8px; bottom: 8px; opacity: 0; } .RecommendedBox .Post:hover .Text { opacity: 1; } .RecommendedBox .Post:hover .Duration { opacity: 1; } .RecommendedBox:after { content: ""; display: table; clear: both; } @media (max-width: 1149.9px) { .RecommendedBox { padding: 20px 50px 0px 50px; } } @media (max-width: 999.9px) { .RecommendedBox { padding: 0px; } .RecommendedBox .Post { width: 33.33%; } .RecommendedBox .Post:nth-last-child(-n+6) { display: none; } } @media (max-width: 899.9px) { .RecommendedBox { padding: 20px 50px 0px 50px; } } @media (max-width: 769.9px) { .RecommendedBox { padding: 15px 30px 0px 30px; } } @media (max-width: 699.9px) { .RecommendedBox { padding: 20px 20px 0px 20px; } .RecommendedBox .Post { width: 50%; } .RecommendedBox .Post .Text { opacity: 1; } .RecommendedBox .Post .Duration { opacity: 1; } .RecommendedBox .Post:nth-last-child(-n+10) { display: none; } } @media (max-width: 489.9px) { .RecommendedBox { padding: 30px; } } @media (max-width: 399.9px) { .RecommendedBox { display: none; } } /* //////////////////////////////////////////////////////////////////// */ /* THEATER MODE */ @media (min-width: 900px) and (max-height: 460px) { .TheaterOn { max-width: 840px; } .TheaterOn { padding: 20px 50px 0px 50px; } .TheaterOn .Post:nth-last-child(-n+4) { display: none; } } @media (min-width: 1000px) and (max-height: 460px) { .TheaterOn { max-width: 900px; } .TheaterOn { padding: 20px 00px 0px 00px; } } @media (min-width: 1000px) and (min-height: 500px) { .TheaterOn { max-width: 1100px; } .TheaterOn { padding: 20px 0px 20px 0px; } .TheaterOn .Post:nth-last-child(-n+4) { display: none; } } .vjs-fullscreen .TheaterOn { max-width: unset !important; } .vjs-fullscreen .TheaterOn { padding: unset !important; } .vjs-fullscreen .TheaterOn .Post:nth-last-child(-n+4) { display: block !important; } /* //////////////////////////////////////////////////////////////////// */ .BrighteonSites { display: table; margin: 0px auto; } .BrighteonLink { display: table-cell; color: var(--White); max-width: 280px; padding: 0px 30px; vertical-align: top; text-decoration: none; } .BrighteonLogo { display: block; } .BrighteonText { display: block; color: #B0B3B8; font-size: 11px; line-height: 120%; text-align: center; text-decoration: none; } .BrighteonLink:hover { text-decoration: none; } @media (max-width: 769.9px) { .BrighteonText { font-size: 9px; } } @media (max-width: 599.9px) { .BrighteonSites .BrighteonLink:last-child { display: none; } .BrighteonText { font-size: 11px; } } @media (max-width: 489.9px) { .BrighteonSites { display: none !important; } } .player-endscreen__thumbnail { width: 200px; height: 100px; border-radius: 5px; border: 1px solid #ececec; } @media (max-width: 450px) { .player-endscreen__thumbnail { width: 180px; height: 80px; } } .player-endscreen__link { position: relative; } .player-endscreen__link:hover .info-next-video { display: block; } .player-endscreen__header { font-size: 13px; } .player-endscreen__video__duration { display: block; width: auto; background-color: rgba(0, 0, 0, 0.85); font-family: Roboto; font-size: 11px; color: #fff; position: absolute; z-index: 100; right: 5px; bottom: 5px; font-weight: 700; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 6px 5px 5px 5px; pointer-events: none; border-radius: 4px; line-height: 100%; } .player-endscreen__video__info { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.9); padding: 5px; transition: all 0.5 ease; } .player-endscreen__video__title { width: 100% !important; margin: 0 !important; font-size: 12px; font-weight: 700; color: #FFFFFF; overflow: hidden; width: 100% !important; margin: 0 !important; text-overflow: ellipsis; } .player-endscreen__video__subtitle { font-size: 11px; color: #B0B3B8; } .player-next__video { display: flex; flex-direction: column; gap: 5px; } .player-next__video a:hover { text-decoration: none; } .player-next__video .play-next-btn-group { display: flex; justify-content: center; gap: 5px; margin-bottom: 10px; } .player-next__video .play-next-btn-group button { font-size: 12px; font-weight: 600; border-radius: 5px; padding: 3px 10px; } .player-next__video .play-next-btn-group button:hover { opacity: 0.8; } @media (max-width: 450px) { .player-next__video .play-next-btn-group button { font-size: 11px; padding: 2px 8px; } } .player-next__video .play-next-btn-group .btn-next-cancel { background-color: #b0b3b8; } .player-next__video .play-next-btn-group .btn-next-play { background-color: var(--Primary); } .next-video-container { margin-top: 5px; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; } @charset "UTF-8"; .vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before { text-align: center; } @font-face { font-family: VideoJS; src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABDkAAsAAAAAG6gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV3hY21hcAAAAYQAAADaAAADPv749/pnbHlmAAACYAAAC3AAABHQZg6OcWhlYWQAAA3QAAAAKwAAADYZw251aGhlYQAADfwAAAAdAAAAJA+RCLFobXR4AAAOHAAAABMAAACM744AAGxvY2EAAA4wAAAASAAAAEhF6kqubWF4cAAADngAAAAfAAAAIAE0AIFuYW1lAAAOmAAAASUAAAIK1cf1oHBvc3QAAA/AAAABJAAAAdPExYuNeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGS7wTiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGJHcRdyA4RZgQRADK3CxEAAHic7dFZbsMgAEXRS0ycyZnnOeG7y+qC8pU1dHusIOXxuoxaOlwZYWQB0Aea4quIEN4E9LzKbKjzDeM6H/mua6Lmc/p8yhg0lvdYx15ZG8uOLQOGjMp3EzqmzJizYMmKNRu27Nhz4MiJMxeu3Ljz4Ekqm7T8P52G8PP3lnTOVk++Z6iN6QZzNN1F7ptuN7eGOjDUoaGODHVsuvU8MdTO9Hd5aqgzQ50b6sJQl4a6MtS1oW4MdWuoO0PdG+rBUI+GejLUs6FeDPVqqDdDvRvqw1CfhpqM9At0iFLaAAB4nJ1YDXBTVRZ+5/22TUlJ8we0pHlJm7RJf5O8F2j6EymlSPkpxaL8U2xpa3DKj0CBhc2IW4eWKSokIoLsuMqssM64f+jA4HSdWXXXscBq67IOs3FXZ1ZYWVyRFdo899yXtIBQZ90k7717zz3v3HPPOfd854YCCj9cL9dL0RQFOqCbGJnrHb5EayiKIWN8iA/hWBblo6hUWm8TtCDwE80WMJus/irwyxOdxeB0MDb14VNJHnXYoLLSl6FfCUYO9nYPTA8Epg9090LprfbBbZ2hY0UlJUXHQp3/vtWkS6EBv8+rPMq5u9692f/dNxJNiqwC1xPE9TCUgCsSdQWgE3XQD25lkG4CN2xmTcOXWBOyser6RN6KnGbKSbmQ3+d0OI1m2W8QzLLkI2sykrWAgJJEtA8vGGW/2Q+CmT3n8zS9wZwu2DCvtuZKZN3xkrLh36yCZuUomQSqGpY8t/25VfHVhw8z4ebGBtfLb0ya9PCaDc+8dGTvk2dsh6z7WzvowlXKUSWo9MJ15a3KrEP2loOr2Ojhw6iW6hf2BDdEccQvZGpaAy7YovSwq8kr7HGllxpd71rkS6G0Sf11sl9OvMK1+jwPPODxjUwkOim9CU3ix1wNjXDfmJSEn618Bs6lpWwUpU+8PCqLMY650zjq8VhCIP17NEKTx3eaLL+s5Pi6yJWaWjTHLR1jYzPSV9VF/6Ojdb/1kO3Mk3uhHC0x6gc1BjlKQ+nQFxTYdaJkZ7ySVxLBbhR1dsboNXp1tCYKW2LRaEzpYcIx2BKNxaL0ZaUnSqfFoiNhHKR/GkX6PWUSAaJelQaqZL1EpoHNsajSEyPSoJ9IjhIxTdjHLmwZvhRDOiFTY/YeQnvrVZmiTQtGncECXtFTBZLOVwwMRgoXHAkXzMzPn1nAJJ8jYSbMDaqN2waGLzNhih/bZynUBMpIWSg7VYi7DRx2m8ALkIdRCJwI6ArJx2EI8kaDWeTQKeAFk9fjl/1AvwktjQ1P7NjyMGQyfd4vjipX6M/i52D7Cq80kqlcxEcGXRr/FEcgs0u5uGgB4VWuMFfpdn2Re6Hi3PqzmxWKsz6+ae2Pn9hXXw/fqM859UiGC0oKYYILJBqJrsn1Z1E5qOs9rQCiUQRREjm8yJcbHF5cUJufX1vAHlefw0XgUoboS3ETfQlTxBC4SOtuE8VPRJTBSCQSjZCpk7Gqzu+masaZ2y7Zjehho4F3g82BNDkAHpORG4+OCS+f6JTPmtRn/PH1kch6d04sp7AQb25aQ/pqUyXeQ8vrebG8OYQdXOQ+585u0sdW9rqalzRURiJ+9F4MweRFrKUjl1GUYhH1A27WOHw5cTFSFPMo9EeUIGnQTZHIaJ7AHLaOKsOODaNF9jkBjYG2QEsQ2xjMUAx2bBEbeTBWMHwskBjngq56S/yfgkBnWBa4K9sqKtq2t1UI8S9He5XuBRbawAdatrQEAi30Aks2+LM8WeCbalVZkWNylvJ+dqJnzVb+OHlSoKW8nPCP7Rd+CcZ2DdWAGqJ2CBFOphgywFFCFBNtfAbGtNPBCwxvygHeYMZMY9ZboBqwq/pVrsbgN5tkv152ODlbMfiqwGMBgxa4Exz3QhovRIUp6acqZmQzRq0ypDXS2TPLT02YIkQETnOE445oOGxOmXAqUJNNG7XgupMjPq2ua9asrj5yY/yuKteO1Kx0YNJTufrirLe1mZnat7OL6rnUdCWenpW6I8mAnbsY8KWs1PuSovCW9A/Z25PQ24a7cNOqgmTkLmBMgh4THgc4b9k2IVv1/g/F5nGljwPLfOgHAzJzh45V/4+WenTzmMtR5Z7us2Tys909UHqrPY7KbckoxRvRHhmVc3cJGE97uml0R1S0jdULVl7EvZtDFVBF35N9cEdjpgmAiOlFZ+Dtoh93+D3zzHr8RRNZQhnCNMNbcegOvpEwZoL+06cJQ07h+th3fZ/7PVbVC6ngTAV/KoLFuO6+2KFcU651gEb5ugPSIb1D+Xp8V4+k3sEIGnw5mYe4If4k1lFYr6SCzmM2EQ8iWtmwjnBI9kTwe1TlfAmXh7H02by9fW2gsjKwtv0aaURKil4OdV7rDL1MXIFNrhdxohcZXYTnq47WisrKitaObbf5+yvkLi5J6lCNZZ+B6GC38VNBZBDidSS/+mSvh6s+srgC8pyKMvDtt+de3c9fU76ZPfuM8ud4Kv0fyP/LqfepMT/3oZxSqpZaTa1DaQYLY8TFsHYbWYsPoRhRWfL5eSSQbhUGgGC3YLbVMk6PitTFNGpAsNrC6D1VNBKgBHMejaiuRWEWGgsSDBTJjqWIl8kJLlsaLJ2tXDr6xGfT85bM2Q06a46x2HTgvdnV8z5YDy/27J4zt6x2VtkzjoYpkq36kaBr4eQSg7tyiVweWubXZugtadl58ydapfbORfKsDTuZ0OBgx4cfdjCf5tbWNITnL120fdOi1RV1C3uKGzNdwYLcMvZ3BxoPyTOCD1XvXTp7U10gWCVmTV9b3r2z0SkGWovb2hp9I89O8a2smlyaO8muMU+dRmtzp60IzAoFpjLr1n388boLyf0dRvxhsHZ0qbWqDkwqvvpkj4l0fY6EIXRi5sQSrAvsVYwXRy4qJ2EVtD1AN7a0HWth9ymvL1xc3WTUKK/TAHA/bXDVtVWfOMfuGxGZv4Ln/jVr9jc3j1yMv0tndmyt9Vq88Y9gH1wtLX3KWjot5++jWHgAoZZkQ14wGQ20Fli71UmKJAy4xKMSTGbVdybW7FDDAut9XpD5AzWrYO7zQ8qffqF8+Ynd/clrHcdyxGy3a/3+mfNnzC/cBsveTjnTvXf1o6vzOlZw7WtqtdmPK/Errz/6NNtD72zmNOZfbmYdTGHfoofqI79Oc+R2n1lrnL6pOm0Up7kwxhTW12Amm7WYkXR2qYrF2AmgmbAsxZjwy1xpg/m1Je2vrp8v/nz2xpmlBg4E9hrMU341wVpTOh/OfmGvAnra8q6uctr60ZQHV3Q+WMQJykMj8ZsWn2QBOmmHMB+m5pDIpTFonYigiaKAhGEiAHF7EliVnQkjoLVIMPtJpBKHYd3A8GYH9jJzrWwmHx5Qjp7vDAX0suGRym1vtm/9W1/HyR8vczfMs6Sk8DSv855/5dlX9oQq52hT8syyp2rx5Id17IAyAM3wIjQPMOHzytEB64q6D5zT91yNbnx3V/nqnd017S9Y0605k3izoXLpsxde2n38yoOV9s1LcjwzNjbdX6asnBVaBj/6/DwKwPkpcqbDG7BnsXoSqWnUAmottYF6jMSdVyYZh3zVXCjwTiwwHH6sGuRiEHQGzuRX6whZkp123oy1BWE2mEfJ/tvIRtM4ZM5bDXiMsPMaAKOTyc5uL57rqyyc5y5JE5pm1i2S2iUX0CcaQ6lC6Zog7JqSqZmYlosl2K6pwNA84zRnQW6SaALYZQGW5lhCtU/W34N6o+bKfZ8cf3/Cl/+iTX3wBzpOY4mRkeNf3rptycGSshQWgGbYt5jFc2e0+DglIrwl6DVWQ7BuwaJ3Xk1J4VL5urnLl/Wf+gHU/hZoZdKNym6lG+I34FaNeZKcSpJIo2IeCVvpdsDGfKvzJnAwmeD37Ow65ZWwSowpgwX5T69s/rB55dP5BcpgDKFV8p7q2sn/1uc93bVzT/w6UrCqDTWvfCq/oCD/qZXNoUj8BL5Kp6GU017frfNXkAtiiyf/SOCEeLqnd8R/Ql9GlCRfctS6k5chvIBuQ1zCCjoCHL2DHNHIXxMJ3kQeO8lbsUXONeSfA5EjcG6/E+KdhN4bP04vBhdi883+BFBzQbxFbvZzQeY9LNBZc0FNfn5NwfDn6rCTnTw6R8o+gfpf5hCom33cRuiTlss3KHmZjD+BPN+5gXuA2ziS/Q73mLxUkpbKN/eqwz5uK0X9F3h2d1V4nGNgZGBgAOJd776+iue3+crAzc4AAje5Bfcg0xz9YHEOBiYQBQA8FQlFAHicY2BkYGBnAAGOPgaG//85+hkYGVCBMgBGGwNYAAAAeJxjYGBgYB8EmKOPgQEAQ04BfgAAAAAAAA4AaAB+AMwA4AECAUIBbAGYAcICGAJYArQC4AMwA7AD3gQwBJYE3AUkBWYFigYgBmYGtAbqB1gIEghYCG4IhAi2COh4nGNgZGBgUGYoZWBnAAEmIOYCQgaG/2A+AwAYCQG2AHicXZBNaoNAGIZfE5PQCKFQ2lUps2oXBfOzzAESyDKBQJdGR2NQR3QSSE/QE/QEPUUPUHqsvsrXjTMw83zPvPMNCuAWP3DQDAejdm1GjzwS7pMmwi75XngAD4/CQ/oX4TFe4Qt7uMMbOzjuDc0EmXCP/C7cJ38Iu+RP4QEe8CU8pP8WHmOPX2EPz87TPo202ey2OjlnQSXV/6arOjWFmvszMWtd6CqwOlKHq6ovycLaWMWVydXKFFZnmVFlZU46tP7R2nI5ncbi/dDkfDtFBA2DDXbYkhKc+V0Bqs5Zt9JM1HQGBRTm/EezTmZNKtpcAMs9Yu6AK9caF76zoLWIWcfMGOSkVduvSWechqZsz040Ib2PY3urxBJTzriT95lipz+TN1fmAAAAeJxtkMl2wjAMRfOAhABlKm2h80C3+ajgCKKDY6cegP59TYBzukAL+z1Zsq8ctaJTTKPrsUQLbXQQI0EXKXroY4AbDDHCGBNMcYsZ7nCPB8yxwCOe8IwXvOIN7/jAJ76wxHfUqWX+OzgumWAjJMV17i0Ndlr6irLKO+qftdT7i6y4uFSUvCknay+lFYZIZaQcmfH/xIFdYn98bqhra1aKTM/6lWMnyaYirx1rFUQZFBkb2zJUtoXeJCeg0WnLtHeSFc3OtrnozNwqi0TkSpBMDB1nSde5oJXW23hTS2/T0LilglXX7dmFVxLnq5U0vYATHFk3zX3BOisoQHNDFDeZnqKDy9hRNawN7Vh727hFzcJ5c8TILrKZfH7tIPxAFP0BpLeJPA==) format("woff"); font-weight: normal; font-style: normal; } .vjs-icon-play, .video-js .vjs-play-control .vjs-icon-placeholder, .video-js .vjs-big-play-button .vjs-icon-placeholder:before { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-play:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before { content: "\F101"; } .vjs-icon-play-circle { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-play-circle:before { content: "\F102"; } .vjs-icon-pause, .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-pause:before, .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before { content: "\F103"; } .vjs-icon-volume-mute, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-volume-mute:before, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before { content: "\F104"; } .vjs-icon-volume-low, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-volume-low:before, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before { content: "\F105"; } .vjs-icon-volume-mid, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-volume-mid:before, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before { content: "\F106"; } .vjs-icon-volume-high, .video-js .vjs-mute-control .vjs-icon-placeholder { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-volume-high:before, .video-js .vjs-mute-control .vjs-icon-placeholder:before { content: "\F107"; } .vjs-icon-fullscreen-enter, .video-js .vjs-fullscreen-control .vjs-icon-placeholder { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before { content: "\F108"; } .vjs-icon-fullscreen-exit, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-fullscreen-exit:before, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before { content: "\F109"; } .vjs-icon-square { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-square:before { content: "\F10A"; } .vjs-icon-spinner { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-spinner:before { content: "\F10B"; } .vjs-icon-subtitles, .video-js .vjs-subs-caps-button .vjs-icon-placeholder, .video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vjs-subtitles-button .vjs-icon-placeholder { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-subtitles:before, .video-js .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js .vjs-subtitles-button .vjs-icon-placeholder:before { content: "\F10C"; } .vjs-icon-captions, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vjs-captions-button .vjs-icon-placeholder { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-captions:before, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js .vjs-captions-button .vjs-icon-placeholder:before { content: "\F10D"; } .vjs-icon-chapters, .video-js .vjs-chapters-button .vjs-icon-placeholder { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-chapters:before, .video-js .vjs-chapters-button .vjs-icon-placeholder:before { content: "\F10E"; } .vjs-icon-share { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-share:before { content: "\F10F"; } .vjs-icon-cog { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-cog:before { content: "\F110"; } .vjs-icon-circle, .vjs-seek-to-live-control .vjs-icon-placeholder, .video-js .vjs-volume-level, .video-js .vjs-play-progress { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-circle:before, .vjs-seek-to-live-control .vjs-icon-placeholder:before, .video-js .vjs-volume-level:before, .video-js .vjs-play-progress:before { content: "\F111"; } .vjs-icon-circle-outline { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-circle-outline:before { content: "\F112"; } .vjs-icon-circle-inner-circle { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-circle-inner-circle:before { content: "\F113"; } .vjs-icon-hd { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-hd:before { content: "\F114"; } .vjs-icon-cancel, .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-cancel:before, .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before { content: "\F115"; } .vjs-icon-replay, .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-replay:before, .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before { content: "\F116"; } .vjs-icon-facebook { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-facebook:before { content: "\F117"; } .vjs-icon-gplus { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-gplus:before { content: "\F118"; } .vjs-icon-linkedin { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-linkedin:before { content: "\F119"; } .vjs-icon-twitter { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-twitter:before { content: "\F11A"; } .vjs-icon-tumblr { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-tumblr:before { content: "\F11B"; } .vjs-icon-pinterest { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-pinterest:before { content: "\F11C"; } .vjs-icon-audio-description, .video-js .vjs-descriptions-button .vjs-icon-placeholder { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-audio-description:before, .video-js .vjs-descriptions-button .vjs-icon-placeholder:before { content: "\F11D"; } .vjs-icon-audio, .video-js .vjs-audio-button .vjs-icon-placeholder { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-audio:before, .video-js .vjs-audio-button .vjs-icon-placeholder:before { content: "\F11E"; } .vjs-icon-next-item { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-next-item:before { content: "\F11F"; } .vjs-icon-previous-item { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-previous-item:before { content: "\F120"; } .vjs-icon-picture-in-picture-enter, .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-picture-in-picture-enter:before, .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before { content: "\F121"; } .vjs-icon-picture-in-picture-exit, .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-picture-in-picture-exit:before, .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before { content: "\F122"; } .video-js { display: block; vertical-align: top; box-sizing: border-box; color: #fff; background-color: #000; position: relative; padding: 0; font-size: 10px; line-height: 1; font-weight: normal; font-style: normal; font-family: Arial, Helvetica, sans-serif; word-break: initial; } .video-js:-moz-full-screen { position: absolute; } .video-js:-webkit-full-screen { width: 100% !important; height: 100% !important; } .video-js[tabindex="-1"] { outline: none; } .video-js *, .video-js *:before, .video-js *:after { box-sizing: inherit; } .video-js ul { font-family: inherit; font-size: inherit; line-height: inherit; list-style-position: outside; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; } .video-js.vjs-fluid, .video-js.vjs-16-9, .video-js.vjs-4-3, .video-js.vjs-9-16, .video-js.vjs-1-1 { width: 100%; max-width: 100%; } .video-js.vjs-fluid:not(.vjs-audio-only-mode), .video-js.vjs-16-9:not(.vjs-audio-only-mode), .video-js.vjs-4-3:not(.vjs-audio-only-mode), .video-js.vjs-9-16:not(.vjs-audio-only-mode), .video-js.vjs-1-1:not(.vjs-audio-only-mode) { height: 0; } .video-js.vjs-16-9:not(.vjs-audio-only-mode) { padding-top: 56.25%; } .video-js.vjs-4-3:not(.vjs-audio-only-mode) { padding-top: 75%; } .video-js.vjs-9-16:not(.vjs-audio-only-mode) { padding-top: 177.7777777778%; } .video-js.vjs-1-1:not(.vjs-audio-only-mode) { padding-top: 100%; } .video-js.vjs-fill:not(.vjs-audio-only-mode) { width: 100%; height: 100%; } .video-js .vjs-tech { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-js.vjs-audio-only-mode .vjs-tech { display: none; } body.vjs-full-window { padding: 0; margin: 0; height: 100%; } .vjs-full-window .video-js.vjs-fullscreen { position: fixed; overflow: hidden; z-index: 1000; left: 0; top: 0; bottom: 0; right: 0; } .video-js.vjs-fullscreen:not(.vjs-ios-native-fs) { width: 100% !important; height: 100% !important; padding-top: 0 !important; } .video-js.vjs-fullscreen.vjs-user-inactive { cursor: none; } .vjs-hidden { display: none !important; } .vjs-disabled { opacity: 0.5; cursor: default; } .video-js .vjs-offscreen { height: 1px; left: -9999px; position: absolute; top: 0; width: 1px; } .vjs-lock-showing { display: block !important; opacity: 1 !important; visibility: visible !important; } .vjs-no-js { padding: 20px; color: #fff; background-color: #000; font-size: 18px; font-family: Arial, Helvetica, sans-serif; text-align: center; width: 300px; height: 150px; margin: 0px auto; } .vjs-no-js a, .vjs-no-js a:visited { color: #66A8CC; } .video-js .vjs-big-play-button { font-size: 3em; line-height: 1.5em; height: 1.63332em; width: 3em; display: block; position: absolute; top: 10px; left: 10px; padding: 0; cursor: pointer; opacity: 1; border: 0.06666em solid #fff; background-color: #2B333F; background-color: rgba(43, 51, 63, 0.7); border-radius: 0.3em; transition: all 0.4s; } .vjs-big-play-centered .vjs-big-play-button { top: 50%; left: 50%; margin-top: -0.81666em; margin-left: -1.5em; } .video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus { border-color: #fff; background-color: #73859f; background-color: rgba(115, 133, 159, 0.5); transition: all 0s; } .vjs-controls-disabled .vjs-big-play-button, .vjs-has-started .vjs-big-play-button, .vjs-using-native-controls .vjs-big-play-button, .vjs-error .vjs-big-play-button { display: none; } .vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause .vjs-big-play-button { display: block; } .video-js button { background: none; border: none; color: inherit; display: inline-block; font-size: inherit; line-height: inherit; text-transform: none; text-decoration: none; transition: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .vjs-control .vjs-button { width: 100%; height: 100%; } .video-js .vjs-control.vjs-close-button { cursor: pointer; height: 3em; position: absolute; right: 0; top: 0.5em; z-index: 2; } .video-js .vjs-modal-dialog { background: rgba(0, 0, 0, 0.8); background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0)); overflow: auto; } .video-js .vjs-modal-dialog > * { box-sizing: border-box; } .vjs-modal-dialog .vjs-modal-dialog-content { font-size: 1.2em; line-height: 1.5; padding: 20px 24px; z-index: 1; } .vjs-menu-button { cursor: pointer; } .vjs-menu-button.vjs-disabled { cursor: default; } .vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu { display: none; } .vjs-menu .vjs-menu-content { display: block; padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; overflow: auto; } .vjs-menu .vjs-menu-content > * { box-sizing: border-box; } .vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu { display: none; } .vjs-menu li { list-style: none; margin: 0; padding: 0.2em 0; line-height: 1.4em; font-size: 1.2em; text-align: center; text-transform: lowercase; } .vjs-menu li.vjs-menu-item:focus, .vjs-menu li.vjs-menu-item:hover, .js-focus-visible .vjs-menu li.vjs-menu-item:hover { background-color: #73859f; background-color: rgba(115, 133, 159, 0.5); } .vjs-menu li.vjs-selected, .vjs-menu li.vjs-selected:focus, .vjs-menu li.vjs-selected:hover, .js-focus-visible .vjs-menu li.vjs-selected:hover { background-color: #fff; color: #2B333F; } .video-js .vjs-menu *:not(.vjs-selected):focus:not(:focus-visible), .js-focus-visible .vjs-menu *:not(.vjs-selected):focus:not(.focus-visible) { background: none; } .vjs-menu li.vjs-menu-title { text-align: center; text-transform: uppercase; font-size: 1em; line-height: 2em; padding: 0; margin: 0 0 0.3em 0; font-weight: bold; cursor: default; } .vjs-menu-button-popup .vjs-menu { display: none; position: absolute; bottom: 0; width: 10em; left: -3em; height: 0em; margin-bottom: 1.5em; border-top-color: rgba(43, 51, 63, 0.7); } .vjs-menu-button-popup .vjs-menu .vjs-menu-content { background-color: #2B333F; background-color: rgba(43, 51, 63, 0.7); position: absolute; width: 100%; bottom: 1.5em; max-height: 15em; } .vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content, .vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content { max-height: 5em; } .vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content { max-height: 10em; } .vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content { max-height: 14em; } .vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content, .vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content, .vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content { max-height: 25em; } .vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu, .vjs-menu-button-popup .vjs-menu.vjs-lock-showing { display: block; } .video-js .vjs-menu-button-inline { transition: all 0.4s; overflow: hidden; } .video-js .vjs-menu-button-inline:before { width: 2.222222222em; } .video-js .vjs-menu-button-inline:hover, .video-js .vjs-menu-button-inline:focus, .video-js .vjs-menu-button-inline.vjs-slider-active, .video-js.vjs-no-flex .vjs-menu-button-inline { width: 12em; } .vjs-menu-button-inline .vjs-menu { opacity: 0; height: 100%; width: auto; position: absolute; left: 4em; top: 0; padding: 0; margin: 0; transition: all 0.4s; } .vjs-menu-button-inline:hover .vjs-menu, .vjs-menu-button-inline:focus .vjs-menu, .vjs-menu-button-inline.vjs-slider-active .vjs-menu { display: block; opacity: 1; } .vjs-no-flex .vjs-menu-button-inline .vjs-menu { display: block; opacity: 1; position: relative; width: auto; } .vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu, .vjs-no-flex .vjs-menu-button-inline:focus .vjs-menu, .vjs-no-flex .vjs-menu-button-inline.vjs-slider-active .vjs-menu { width: auto; } .vjs-menu-button-inline .vjs-menu-content { width: auto; height: 100%; margin: 0; overflow: hidden; } .video-js .vjs-control-bar { display: none; width: 100%; position: absolute; bottom: 0; left: 0; right: 0; height: 3em; background-color: #2B333F; background-color: rgba(43, 51, 63, 0.7); } .vjs-has-started .vjs-control-bar, .vjs-audio-only-mode .vjs-control-bar { display: flex; visibility: visible; opacity: 1; transition: visibility 0.1s, opacity 0.1s; } .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar { visibility: visible; opacity: 0; pointer-events: none; transition: visibility 1s, opacity 1s; } .vjs-controls-disabled .vjs-control-bar, .vjs-using-native-controls .vjs-control-bar, .vjs-error .vjs-control-bar { display: none !important; } .vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar, .vjs-audio-only-mode.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar { opacity: 1; visibility: visible; pointer-events: auto; } .vjs-has-started.vjs-no-flex .vjs-control-bar { display: table; } .video-js .vjs-control { position: relative; text-align: center; margin: 0; padding: 0; height: 100%; width: 4em; flex: none; } .video-js .vjs-control.vjs-visible-text { width: auto; padding-left: 1em; padding-right: 1em; } .vjs-button > .vjs-icon-placeholder:before { font-size: 1.8em; line-height: 1.67; } .vjs-button > .vjs-icon-placeholder { display: block; } .video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before, .video-js .vjs-control:focus { text-shadow: 0em 0em 1em white; } .video-js *:not(.vjs-visible-text) > .vjs-control-text { border: 0; clip: rect(0 0 0 0); height: 1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .vjs-no-flex .vjs-control { display: table-cell; vertical-align: middle; } .video-js .vjs-custom-control-spacer { display: none; } .video-js .vjs-progress-control { cursor: pointer; flex: auto; display: flex; align-items: center; min-width: 4em; touch-action: none; } .video-js .vjs-progress-control.disabled { cursor: default; } .vjs-live .vjs-progress-control { display: none; } .vjs-liveui .vjs-progress-control { display: flex; align-items: center; } .vjs-no-flex .vjs-progress-control { width: auto; } .video-js .vjs-progress-holder { flex: auto; transition: all 0.2s; height: 0.3em; } .video-js .vjs-progress-control .vjs-progress-holder { margin: 0 10px; } .video-js .vjs-progress-control:hover .vjs-progress-holder { font-size: 1.6666666667em; } .video-js .vjs-progress-control:hover .vjs-progress-holder.disabled { font-size: 1em; } .video-js .vjs-progress-holder .vjs-play-progress, .video-js .vjs-progress-holder .vjs-load-progress, .video-js .vjs-progress-holder .vjs-load-progress div { position: absolute; display: block; height: 100%; margin: 0; padding: 0; width: 0; } .video-js .vjs-play-progress { background-color: #fff; } .video-js .vjs-play-progress:before { font-size: 0.9em; position: absolute; right: -0.5em; top: -0.3333333333em; z-index: 1; } .video-js .vjs-load-progress { background: rgba(115, 133, 159, 0.5); } .video-js .vjs-load-progress div { background: rgba(115, 133, 159, 0.75); } .video-js .vjs-time-tooltip { background-color: #fff; background-color: rgba(255, 255, 255, 0.8); border-radius: 0.3em; color: #000; float: right; font-family: Arial, Helvetica, sans-serif; font-size: 1em; padding: 6px 8px 8px 8px; pointer-events: none; position: absolute; top: -3.4em; visibility: hidden; z-index: 1; } .video-js .vjs-progress-holder:focus .vjs-time-tooltip { display: none; } .video-js .vjs-progress-control:hover .vjs-time-tooltip, .video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip { display: block; font-size: 0.6em; visibility: visible; } .video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip { font-size: 1em; } .video-js .vjs-progress-control .vjs-mouse-display { display: none; position: absolute; width: 1px; height: 100%; background-color: #000; z-index: 1; } .vjs-no-flex .vjs-progress-control .vjs-mouse-display { z-index: 0; } .video-js .vjs-progress-control:hover .vjs-mouse-display { display: block; } .video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display { visibility: hidden; opacity: 0; transition: visibility 1s, opacity 1s; } .video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display { display: none; } .vjs-mouse-display .vjs-time-tooltip { color: #fff; background-color: #000; background-color: rgba(0, 0, 0, 0.8); } .video-js .vjs-slider { position: relative; cursor: pointer; padding: 0; margin: 0 0.45em 0 0.45em; /* iOS Safari */ -webkit-touch-callout: none; /* Safari */ -webkit-user-select: none; /* Konqueror HTML */ /* Firefox */ -moz-user-select: none; /* Internet Explorer/Edge */ -ms-user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ user-select: none; background-color: #73859f; background-color: rgba(115, 133, 159, 0.5); } .video-js .vjs-slider.disabled { cursor: default; } .video-js .vjs-slider:focus { text-shadow: 0em 0em 1em white; box-shadow: 0 0 1em #fff; } .video-js .vjs-mute-control { cursor: pointer; flex: none; } .video-js .vjs-volume-control { cursor: pointer; margin-right: 1em; display: flex; } .video-js .vjs-volume-control.vjs-volume-horizontal { width: 5em; } .video-js .vjs-volume-panel .vjs-volume-control { visibility: visible; opacity: 0; width: 1px; height: 1px; margin-left: -1px; } .video-js .vjs-volume-panel { transition: width 1s; } .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control, .video-js .vjs-volume-panel:active .vjs-volume-control, .video-js .vjs-volume-panel:focus .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control:active, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active { visibility: visible; opacity: 1; position: relative; transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s; } .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal { width: 5em; height: 3em; margin-right: 0; } .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical { left: -3.5em; transition: left 0s; } .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active { width: 10em; transition: width 0.1s; } .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only { width: 4em; } .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical { height: 8em; width: 3em; left: -3000em; transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s; } .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal { transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s; } .video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal { width: 5em; height: 3em; visibility: visible; opacity: 1; position: relative; transition: none; } .video-js.vjs-no-flex .vjs-volume-control.vjs-volume-vertical, .video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical { position: absolute; bottom: 3em; left: 0.5em; } .video-js .vjs-volume-panel { display: flex; } .video-js .vjs-volume-bar { margin: 1.35em 0.45em; } .vjs-volume-bar.vjs-slider-horizontal { width: 5em; height: 0.3em; } .vjs-volume-bar.vjs-slider-vertical { width: 0.3em; height: 5em; margin: 1.35em auto; } .video-js .vjs-volume-level { position: absolute; bottom: 0; left: 0; background-color: #fff; } .video-js .vjs-volume-level:before { position: absolute; font-size: 0.9em; z-index: 1; } .vjs-slider-vertical .vjs-volume-level { width: 0.3em; } .vjs-slider-vertical .vjs-volume-level:before { top: -0.5em; left: -0.3em; z-index: 1; } .vjs-slider-horizontal .vjs-volume-level { height: 0.3em; } .vjs-slider-horizontal .vjs-volume-level:before { top: -0.3em; right: -0.5em; } .video-js .vjs-volume-panel.vjs-volume-panel-vertical { width: 4em; } .vjs-volume-bar.vjs-slider-vertical .vjs-volume-level { height: 100%; } .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level { width: 100%; } .video-js .vjs-volume-vertical { width: 3em; height: 8em; bottom: 8em; background-color: #2B333F; background-color: rgba(43, 51, 63, 0.7); } .video-js .vjs-volume-horizontal .vjs-menu { left: -2em; } .video-js .vjs-volume-tooltip { background-color: #fff; background-color: rgba(255, 255, 255, 0.8); border-radius: 0.3em; color: #000; float: right; font-family: Arial, Helvetica, sans-serif; font-size: 1em; padding: 6px 8px 8px 8px; pointer-events: none; position: absolute; top: -3.4em; visibility: hidden; z-index: 1; } .video-js .vjs-volume-control:hover .vjs-volume-tooltip, .video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip { display: block; font-size: 1em; visibility: visible; } .video-js .vjs-volume-vertical:hover .vjs-volume-tooltip, .video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip { left: 1em; top: -12px; } .video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip { font-size: 1em; } .video-js .vjs-volume-control .vjs-mouse-display { display: none; position: absolute; width: 100%; height: 1px; background-color: #000; z-index: 1; } .video-js .vjs-volume-horizontal .vjs-mouse-display { width: 1px; height: 100%; } .vjs-no-flex .vjs-volume-control .vjs-mouse-display { z-index: 0; } .video-js .vjs-volume-control:hover .vjs-mouse-display { display: block; } .video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display { visibility: hidden; opacity: 0; transition: visibility 1s, opacity 1s; } .video-js.vjs-user-inactive.vjs-no-flex .vjs-volume-control .vjs-mouse-display { display: none; } .vjs-mouse-display .vjs-volume-tooltip { color: #fff; background-color: #000; background-color: rgba(0, 0, 0, 0.8); } .vjs-poster { display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; background-color: #000000; cursor: pointer; margin: 0; padding: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; } .vjs-has-started .vjs-poster, .vjs-using-native-controls .vjs-poster { display: none; } .vjs-audio.vjs-has-started .vjs-poster, .vjs-has-started.vjs-audio-poster-mode .vjs-poster { display: block; } .video-js .vjs-live-control { display: flex; align-items: flex-start; flex: auto; font-size: 1em; line-height: 3em; } .vjs-no-flex .vjs-live-control { display: table-cell; width: auto; text-align: left; } .video-js:not(.vjs-live) .vjs-live-control, .video-js.vjs-liveui .vjs-live-control { display: none; } .video-js .vjs-seek-to-live-control { align-items: center; cursor: pointer; flex: none; display: inline-flex; height: 100%; padding-left: 0.5em; padding-right: 0.5em; font-size: 1em; line-height: 3em; width: auto; min-width: 4em; } .vjs-no-flex .vjs-seek-to-live-control { display: table-cell; width: auto; text-align: left; } .video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control, .video-js:not(.vjs-live) .vjs-seek-to-live-control { display: none; } .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge { cursor: auto; } .vjs-seek-to-live-control .vjs-icon-placeholder { margin-right: 0.5em; color: #888; } .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder { color: red; } .video-js .vjs-time-control { flex: none; font-size: 1em; line-height: 3em; min-width: 2em; width: auto; padding-left: 1em; padding-right: 1em; } .vjs-live .vjs-time-control { display: none; } .video-js .vjs-current-time, .vjs-no-flex .vjs-current-time { display: none; } .video-js .vjs-duration, .vjs-no-flex .vjs-duration { display: none; } .vjs-time-divider { display: none; line-height: 3em; } .vjs-live .vjs-time-divider { display: none; } .video-js .vjs-play-control { cursor: pointer; } .video-js .vjs-play-control .vjs-icon-placeholder { flex: none; } .vjs-text-track-display { position: absolute; bottom: 3em; left: 0; right: 0; top: 0; pointer-events: none; } .video-js.vjs-controls-disabled .vjs-text-track-display, .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display { bottom: 1em; } .video-js .vjs-text-track { font-size: 1.4em; text-align: center; margin-bottom: 0.1em; } .vjs-subtitles { color: #fff; } .vjs-captions { color: #fc6; } .vjs-tt-cue { display: block; } video::-webkit-media-text-track-display { transform: translateY(-3em); } .video-js.vjs-controls-disabled video::-webkit-media-text-track-display, .video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display { transform: translateY(-1.5em); } .video-js .vjs-picture-in-picture-control { cursor: pointer; flex: none; } .video-js.vjs-audio-only-mode .vjs-picture-in-picture-control { display: none; } .video-js .vjs-fullscreen-control { cursor: pointer; flex: none; } .video-js.vjs-audio-only-mode .vjs-fullscreen-control { display: none; } .vjs-playback-rate > .vjs-menu-button, .vjs-playback-rate .vjs-playback-rate-value { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .vjs-playback-rate .vjs-playback-rate-value { pointer-events: none; font-size: 1.5em; line-height: 2; text-align: center; } .vjs-playback-rate .vjs-menu { width: 4em; left: 0em; } .vjs-error .vjs-error-display .vjs-modal-dialog-content { font-size: 1.4em; text-align: center; } .vjs-error .vjs-error-display:before { color: #fff; content: "X"; font-family: Arial, Helvetica, sans-serif; font-size: 4em; left: 0; line-height: 1; margin-top: -0.5em; position: absolute; text-shadow: 0.05em 0.05em 0.1em #000; text-align: center; top: 50%; vertical-align: middle; width: 100%; } .vjs-loading-spinner { display: none; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; opacity: 0.85; text-align: left; border: 6px solid rgba(43, 51, 63, 0.7); box-sizing: border-box; background-clip: padding-box; width: 50px; height: 50px; border-radius: 25px; visibility: hidden; } .vjs-seeking .vjs-loading-spinner, .vjs-waiting .vjs-loading-spinner { display: block; -webkit-animation: vjs-spinner-show 0s linear 0.3s forwards; animation: vjs-spinner-show 0s linear 0.3s forwards; } .vjs-loading-spinner:before, .vjs-loading-spinner:after { content: ""; position: absolute; margin: -6px; box-sizing: inherit; width: inherit; height: inherit; border-radius: inherit; opacity: 1; border: inherit; border-color: transparent; border-top-color: white; } .vjs-seeking .vjs-loading-spinner:before, .vjs-seeking .vjs-loading-spinner:after, .vjs-waiting .vjs-loading-spinner:before, .vjs-waiting .vjs-loading-spinner:after { -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite; animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite; } .vjs-seeking .vjs-loading-spinner:before, .vjs-waiting .vjs-loading-spinner:before { border-top-color: white; } .vjs-seeking .vjs-loading-spinner:after, .vjs-waiting .vjs-loading-spinner:after { border-top-color: white; -webkit-animation-delay: 0.44s; animation-delay: 0.44s; } @keyframes vjs-spinner-show { to { visibility: visible; } } @-webkit-keyframes vjs-spinner-show { to { visibility: visible; } } @keyframes vjs-spinner-spin { 100% { transform: rotate(360deg); } } @-webkit-keyframes vjs-spinner-spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes vjs-spinner-fade { 0% { border-top-color: #73859f; } 20% { border-top-color: #73859f; } 35% { border-top-color: white; } 60% { border-top-color: #73859f; } 100% { border-top-color: #73859f; } } @-webkit-keyframes vjs-spinner-fade { 0% { border-top-color: #73859f; } 20% { border-top-color: #73859f; } 35% { border-top-color: white; } 60% { border-top-color: #73859f; } 100% { border-top-color: #73859f; } } .video-js.vjs-audio-only-mode .vjs-captions-button { display: none; } .vjs-chapters-button .vjs-menu ul { width: 24em; } .video-js.vjs-audio-only-mode .vjs-descriptions-button { display: none; } .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder { vertical-align: middle; display: inline-block; margin-bottom: -0.1em; } .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before { font-family: VideoJS; content: "\F10D"; font-size: 1.5em; line-height: inherit; } .video-js.vjs-audio-only-mode .vjs-subs-caps-button { display: none; } .video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder { vertical-align: middle; display: inline-block; margin-bottom: -0.1em; } .video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before { font-family: VideoJS; content: " \F11D"; font-size: 1.5em; line-height: inherit; } .video-js.vjs-layout-small .vjs-current-time, .video-js.vjs-layout-small .vjs-time-divider, .video-js.vjs-layout-small .vjs-duration, .video-js.vjs-layout-small .vjs-remaining-time, .video-js.vjs-layout-small .vjs-playback-rate, .video-js.vjs-layout-small .vjs-volume-control, .video-js.vjs-layout-x-small .vjs-current-time, .video-js.vjs-layout-x-small .vjs-time-divider, .video-js.vjs-layout-x-small .vjs-duration, .video-js.vjs-layout-x-small .vjs-remaining-time, .video-js.vjs-layout-x-small .vjs-playback-rate, .video-js.vjs-layout-x-small .vjs-volume-control, .video-js.vjs-layout-tiny .vjs-current-time, .video-js.vjs-layout-tiny .vjs-time-divider, .video-js.vjs-layout-tiny .vjs-duration, .video-js.vjs-layout-tiny .vjs-remaining-time, .video-js.vjs-layout-tiny .vjs-playback-rate, .video-js.vjs-layout-tiny .vjs-volume-control { display: none; } .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover { width: auto; width: initial; } .video-js.vjs-layout-x-small .vjs-progress-control, .video-js.vjs-layout-tiny .vjs-progress-control { display: none; } .video-js.vjs-layout-x-small .vjs-custom-control-spacer { flex: auto; display: block; } .video-js.vjs-layout-x-small.vjs-no-flex .vjs-custom-control-spacer { width: auto; } .vjs-modal-dialog.vjs-text-track-settings { background-color: #2B333F; background-color: rgba(43, 51, 63, 0.75); color: #fff; height: 70%; } .vjs-text-track-settings .vjs-modal-dialog-content { display: table; } .vjs-text-track-settings .vjs-track-settings-colors, .vjs-text-track-settings .vjs-track-settings-font, .vjs-text-track-settings .vjs-track-settings-controls { display: table-cell; } .vjs-text-track-settings .vjs-track-settings-controls { text-align: right; vertical-align: bottom; } @supports (display: grid) { .vjs-text-track-settings .vjs-modal-dialog-content { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; padding: 20px 24px 0px 24px; } .vjs-track-settings-controls .vjs-default-button { margin-bottom: 20px; } .vjs-text-track-settings .vjs-track-settings-controls { grid-column: 1/-1; } .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content, .vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content, .vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content { grid-template-columns: 1fr; } } .vjs-track-setting > select { margin-right: 1em; margin-bottom: 0.5em; } .vjs-text-track-settings fieldset { margin: 5px; padding: 3px; border: none; } .vjs-text-track-settings fieldset span { display: inline-block; } .vjs-text-track-settings fieldset span > select { max-width: 7.3em; } .vjs-text-track-settings legend { color: #fff; margin: 0 0 5px 0; } .vjs-text-track-settings .vjs-label { position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); display: block; margin: 0 0 5px 0; padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; } .vjs-track-settings-controls button:focus, .vjs-track-settings-controls button:active { outline-style: solid; outline-width: medium; background-image: linear-gradient(0deg, #fff 88%, #73859f 100%); } .vjs-track-settings-controls button:hover { color: rgba(43, 51, 63, 0.75); } .vjs-track-settings-controls button { background-color: #fff; background-image: linear-gradient(-180deg, #fff 88%, #73859f 100%); color: #2B333F; cursor: pointer; border-radius: 2px; } .vjs-track-settings-controls .vjs-default-button { margin-right: 1em; } @media print { .video-js > *:not(.vjs-tech):not(.vjs-poster) { visibility: hidden; } } .vjs-resize-manager { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; z-index: -1000; } .js-focus-visible .video-js *:focus:not(.focus-visible) { outline: none; } .video-js *:focus:not(:focus-visible) { outline: none; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .feature__discretion { position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: rgba(0, 0, 0, 0.7); color: #fff; font-size: 16px; z-index: 10; } .feature__discretion button { background-color: #ed1a3b; padding: 10px 15px; } .main-video-title { font-size: 20px; margin-bottom: 20px; word-break: break-word; } .vjs-fluid { padding-top: 56.25% !important; } .vjs-fluid .vjs-control-bar > button, .vjs-fluid .vjs-control-bar div { font-size: 12px; } .vjs-time-control span { line-height: 3em; } .vjs-menu li.vjs-selected, .vjs-menu li.vjs-selected:focus, .vjs-menu li.vjs-selected:hover, .js-focus-visible .vjs-menu li.vjs-selected:hover { background-color: #00aef0; color: #ffffff; } .vjs-big-play-button .vjs-icon-placeholder { font-size: 25px; line-height: 2em; } .vjs-text-track-display { bottom: 4em; } .vjs-share__middle { min-width: 50%; } .video-js .vjs-share__subtitle { font-size: 12px; } .vjs-brand-container { order: 1; margin-left: auto; } .vjs-brand-container img { height: 36px; } @media (max-width: 600px) { .vjs-brand-container { opacity: 0; width: 0px; } } @media (max-width: 600px) { .embedded-video .vjs-brand-container { opacity: 1; width: unset; } } @media (max-width: 320px) { .embedded-video .vjs-brand-container { opacity: 0; width: 0px; } } .video-js .vjs-progress-control:hover .vjs-progress-holder { font-size: 12px; } .video-js .vjs-progress-control:hover .vjs-progress-holder .vjs-time-tooltip { padding: 6px 8px 6px 8px; } .vjs-control.vjs-quality-selector { order: 2; } @media (max-width: 600px) { .vjs-control.vjs-quality-selector { margin-left: auto; } } .vjs-control.vjs-fullscreen-control { order: 4; } .btn-video-share { order: 3; } .vjs-control.vjs-icon-share { order: 3; } .vjs-icon-share:before { font-size: 16px; } .vjs-share__social { border-radius: 5px; padding: 0; } .vjs-share__social > svg { pointer-events: none; } .vjs-share-v2 { order: 3; } .vjs-share-v2::before { content: ''; background: url(/static/icons/new-ui/Icon-Share-White.svg); background-repeat: no-repeat; background-size: 20px; width: 48px; float: left; height: 32px; background-position: center; } .vjs-settings { order: 2; } .vjs-settings::before { content: ''; background: url(/static/icons/new-ui/Icon-Settings-White.svg); background-repeat: no-repeat; background-size: 20px; width: 48px; float: left; height: 32px; background-position: center; } .vjs-modal-dialog .vjs-close-button:before { display: none; } .player-container { max-height: 410px; max-width: 726px; } .video-js .vjs-tech { outline: none; } /* CSS for control bar */ .video-js .vjs-control-bar { height: 4em; flex-wrap: wrap; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 80%); justify-content: flex-start; font-size: 12px; z-index: 6; } .video-js .vjs-control-bar > div, .video-js .vjs-control-bar button { height: 3em; } .video-js .vjs-play-progress:before { color: var(--White); } .video-js .vjs-play-progress.vjs-slider-bar { background-color: #01aef0; } .video-js .vjs-progress-control.vjs-control { flex: 1 0 auto; width: 100%; height: 1em; order: -1; } .video-js .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal { margin-right: 10px; } .video-js .vjs-duration.vjs-time-control.vjs-control, .video-js .vjs-current-time.vjs-time-control.vjs-control { display: block; } .video-js .vjs-remaining-time.vjs-time-control.vjs-control { display: none; } .video-js .vjs-time-control { display: block; padding: 0; } .video-js .vjs-time-control.vjs-time-divider { padding: 0 4px; min-width: 0; } .video-js .vjs-volume-panel .vjs-volume-level { background-image: linear-gradient(var(--White), var(--White)); } .video-js .vjs-volume-level:before { font-size: 12px; } .video-js .vjs-logo-button.vjs-control.vjs-button { margin-left: auto; width: 100px; height: 75%; } /* CSS for title overlay */ .video-js .vjs-title-overlay { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0) 100%); height: 15%; width: 100%; padding: 1em 1em 2em 1em; overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: 400; font-size: 15px; white-space: nowrap; transition: all 0.2s ease; } .video-js.vjs-paused:not(.vjs-ended):not(.vjs-scrubbing) .vjs-title-overlay { opacity: 1; visibility: visible; } /* CSS for big play */ .video-js .vjs-big-play-button { outline: none; } .video-js .vjs-controls-disabled .vjs-big-play-button { display: none !important; } @media (max-width: 600px) { .video-js .vjs-control { width: 32px; } } .vjs-paused.vjs-has-started.video-js .vjs-big-play-button, .video-js.vjs-ended .vjs-big-play-button, .video-js.vjs-paused .vjs-big-play-button { display: block; } .video-js .vjs-load-progress div, .vjs-seeking .vjs-big-play-button, .vjs-waiting .vjs-big-play-button { display: none !important; } .video-js.vjs-ended .vjs-big-play-button { display: block; } .video-js .vjs-big-play-button { top: 50%; left: 50%; margin-left: -1em; margin-top: -1em; width: 2em; height: 2em; line-height: 2em; border: none; border-radius: 50%; font-size: 3.5em; background-color: rgba(0, 0, 0, 0.45); color: #fff; transition: border-color 0.4s, outline 0.4s, background-color 0.4s; } .video-js .vjs-big-play-button { background-color: rgba(0, 0, 0, 0.5); font-size: 2.5em; border-radius: 50%; height: 1.9em !important; line-height: 1.9em !important; margin-top: -0.95em !important; } .video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus, .video-js .vjs-big-play-button:active { background-color: #01aef0; } .vjs-icon-volume-mute:before, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before { content: ""; background-image: url(/static/icons/new-ui/Icon-Sound-Muted-White.svg); background-repeat: no-repeat; content: ""; float: left; width: 36px; height: 32px; background-position: center; background-size: 20px; font-size: 20px; } .vjs-icon-volume-low:before, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before { content: ""; background-image: url(/static/icons/new-ui/Icon-Sound-Low-White.svg); background-repeat: no-repeat; content: ""; float: left; width: 36px; height: 32px; background-position: center; font-size: 20px; } .vjs-icon-volume-high:before, .video-js .vjs-mute-control .vjs-icon-placeholder:before { content: ""; background-image: url(/static/icons/new-ui/Icon-Sound-High-White.svg); background-repeat: no-repeat; content: ""; float: left; width: 36px; height: 32px; background-position: center; font-size: 20px; } .vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before { content: ""; background-image: url(/static/icons/new-ui/Icon-FullscreenOff-White.svg); background-repeat: no-repeat; content: ""; float: left; width: 36px; height: 32px; background-position: center; font-size: 20px; } .vjs-icon-fullscreen-exit:before, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before { content: ""; background-image: url(/static/icons/new-ui/Icon-FullscreenOn-White.svg); background-repeat: no-repeat; content: ""; float: left; width: 36px; height: 32px; background-position: center; font-size: 20px; } @media (min-height: 400px) { .video-js .vjs-share__short-link-wrapper { margin-bottom: 10px; } .video-js .vjs-share__title { margin-bottom: 0; font-size: 20px; } } .vjs-settings-control { flex: none; order: 2; } .vjs-theater-mode-control { flex: none; order: 3; } .vjs-share-v2-control { flex: none; order: 1; } .vjs-playback-rate-value { font-size: 1.2em !important; line-height: 2.4 !important; } .vjs-menu { width: 70px !important; } .vjs-menu-button-popup .vjs-menu .vjs-menu-content { max-height: 24em !important; } .video-js.vjs-fullscreen .vjs-theater-mode-control { display: none !important; } @media (min-width: 900px) { .TheaterMode .VideoPlayer .Video .video-js { padding-top: 450px !important; } .TheaterMode .VideoPlayer .Video .video-js video { height: 450px; } .TheaterMode .VideoPlayer .Video .video-js.vjs-fullscreen .vjs-theater-mode-control { display: none; } } @media (min-width: 900px) and (min-height: 700px) { .TheaterMode .VideoPlayer .Video .video-js { padding-top: 500px !important; } .TheaterMode .VideoPlayer .Video .video-js video { height: 500px; } .TheaterMode .VideoPlayer .Video .video-js.vjs-fullscreen { padding-top: 0px !important; } .TheaterMode .VideoPlayer .Video .video-js.vjs-fullscreen video { height: 100% !important; } .TheaterMode .VideoPlayer .Video .video-js.vjs-fullscreen .vjs-theater-mode-control { display: none; } } .vjs-toggle-theater-mode { display: none !important; } .vjs-theater-mode-control { display: none !important; } @media (min-width: 900px) { .vjs-toggle-theater-mode { display: block !important; } .vjs-theater-mode-control { display: block !important; } } .vjs-toggle-theater-mode::before { content: ''; background: url(/static/icons/new-ui/Icon-TheaterOn-White.svg); background-repeat: no-repeat; background-size: 20px; width: 48px; float: left; height: 32px; background-position: center; } .TheaterMode .vjs-toggle-theater-mode:before { content: ''; background: url(/static/icons/new-ui/Icon-TheaterOff-White.svg); background-repeat: no-repeat; background-size: 20px; width: 48px; float: left; height: 32px; background-position: center; } .video-js .vjs-load-progress { background-color: var(--White); opacity: .4; border-radius: 3px; } .video-js .vjs-progress-control .vjs-progress-holder { height: 6px; border-radius: 3px; } .video-js .vjs-play-progress.vjs-slider-bar { background-color: #204ecf; border-radius: 3px; } .vjs-time-tooltip { font-size: 14px !important; line-height: 18.2px !important; background-color: var(--Black); } .video-js .vjs-big-play-button { width: 60px !important; height: 60px !important; } .vjs-icon-play:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before { content: ''; background: url(/static/icons/new-ui/Icon-Screen-Start.svg); background-repeat: no-repeat; background-size: 60px; background-position: center; } .vjs-has-started.vjs-paused .vjs-big-play-button .vjs-icon-placeholder:before { content: ''; background: none; } .vjs-has-started.vjs-paused .vjs-big-play-button { display: none !important; } .video-js .vjs-control-bar button.vjs-button { width: 36px !important; height: 32px !important; } .vjs-button > .vjs-icon-placeholder:before { font-size: 20px !important; } .vjs-brand-container-link { cursor: pointer; } .vjs-overlay { z-index: 10 !important; max-width: calc(100% - 120px); } .audio-player-container { margin-top: 10px; } .audio-player-container .rhap_container { box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.11), 18px 12px 18px 12px rgba(0, 0, 0, 0.11); border: 1px solid #111; background-color: #111; } .audio-player-container .rhap_time { color: #fff; } .audio-player-container .rhap_play-pause-button { color: #E01F39; } .audio-player-container__header { line-height: 16px; color: #fff; text-transform: uppercase; font-weight: 700; font-size: 14px; } .audio-player-container__footer { line-height: 16px; color: #fff; text-transform: uppercase; font-weight: 700; font-size: 14px; margin: 20px 0px; } .featured-video__description { margin-bottom: 20px; } .featured-video__wrapper { margin-bottom: 50px; } .featured-video__action { display: flex; } .featured-video__btn-primary { text-transform: uppercase; font-size: 14px; padding: 4px 16px; } .featured-video__btn-text { text-transform: uppercase; padding: 4px 10px; background: none; color: #666666; } .table { padding-top: 16px; } .table table button { padding: 0; font-size: 0.75rem; } .table__title { font-size: 1rem; font-weight: 700; color: black; text-transform: uppercase; padding-bottom: 20px; } @media (min-width: 1024px) { .table { padding-top: 0; } } /* * react-circular-progressbar styles * All of the styles in this file are configurable! */ .CircularProgressbar { /* * This fixes an issue where the CircularProgressbar svg has * 0 width inside a "display: flex" container, and thus not visible. */ width: 100%; /* * This fixes a centering issue with CircularProgressbarWithChildren: * https://github.com/kevinsqi/react-circular-progressbar/issues/94 */ vertical-align: middle; } .CircularProgressbar .CircularProgressbar-path { stroke: #3e98c7; stroke-linecap: round; -webkit-transition: stroke-dashoffset 0.5s ease 0s; transition: stroke-dashoffset 0.5s ease 0s; } .CircularProgressbar .CircularProgressbar-trail { stroke: #d6d6d6; /* Used when trail is not full diameter, i.e. when props.circleRatio is set */ stroke-linecap: round; } .CircularProgressbar .CircularProgressbar-text { fill: #3e98c7; font-size: 20px; dominant-baseline: middle; text-anchor: middle; } .CircularProgressbar .CircularProgressbar-background { fill: #d6d6d6; } /* * Sample background styles. Use these with e.g.: * * */ .CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background { fill: #3e98c7; } .CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text { fill: #fff; } .CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path { stroke: #fff; } .CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail { stroke: transparent; } .stats { padding-top: 16px; } .stats__bar-top { display: flex; justify-content: center; align-items: center; margin: 0px auto 10px auto; } .stats__bar-top__chart { width: 80px; padding-right: 10px; } .stats__bar-top__text { flex: 1; font-size: 14px; color: #666666; } .stats__bar-top__text b { color: #000; } .stats button { font-size: 12px; text-transform: uppercase; font-weight: 700; } .stats table button { padding: 0; text-transform: capitalize; font-size: 12px; font-weight: 400; } .stats__title { font-size: 16px; font-weight: 700; color: black; margin-bottom: 16px; text-transform: uppercase; } .stats__block { margin-bottom: 30px; } @media (min-width: 1024px) { .stats { padding-top: 0; } } .ModalShareVideoInPlayer { position: absolute; left: 50%; top: 50%; z-index: 999998; height: auto; padding: 15px; max-width: 460px; border: solid 1px #17181C; border-radius: 5px; background-color: #090A0C; transform: translate(-50%, -50%); } .ModalShareVideoInPlayer__Message { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 500; color: #FFFFFF; text-align: center; background-color: #1A94FA; z-index: 999998; padding: 8px; border-radius: 5px; transition: all 0.2s ease; } .ModalShareVideoInPlayer__Title { color: #FFFFFF; font-weight: 500; font-size: 16px; text-align: center; padding-bottom: 15px; } .ModalShareVideoInPlayer__Content__Input { width: 100%; } .ModalShareVideoInPlayer__Content__Input input { width: 100%; padding: 10px; outline: solid 3px rgba(0, 0, 0, 0); border: solid 1px #424345; border-radius: 3px; font-size: 12px; box-sizing: border-box; transition: all 0.2s ease; color: #FFFFFF; background-color: #242529; min-height: 40px; } .ModalShareVideoInPlayer__Content__Input input:focus { border-color: #1A94FA !important; outline-color: #1A94FA !important; } .ModalShareVideoInPlayer__Content__Copy { text-align: center; margin: 5px 0 15px 0; } .ModalShareVideoInPlayer__Content__Copy span { cursor: pointer; font-size: 13px; font-weight: 500; color: #FFFFFF; } .ModalShareVideoInPlayer__Content__Icons { width: 100%; margin: 0px auto 15px auto; display: flex; justify-content: center; align-items: center; gap: 5px; } .ModalShareVideoInPlayer__Content__Icons__IconsCol { width: 32px; height: 32px; cursor: pointer; } .ModalShareVideoInPlayer__Content__Icons__IconsCol .IconShare { width: 32px; height: 32px; } .ModalShareVideoInPlayer__Content__Icons__IconsCol .IconShare__Brighteon_social { padding-left: 30px; background-image: url(/static/icons/Icon-BrighteonSocial.svg); background-position: center; background-repeat: no-repeat; background-size: 32px; } .ModalShareVideoInPlayer__Content__Icons__IconsCol .IconShare__Telegram { padding-left: 30px; background-image: url(/static/icons/Icon-Telegram.svg); background-position: center; background-repeat: no-repeat; background-size: 32px; } .ModalShareVideoInPlayer__Content__Icons__IconsCol .IconShare__MORE { padding-left: 30px; background-image: url(/static/icons/Icon-More.svg); background-position: center; background-repeat: no-repeat; background-size: 32px; } .ModalShareVideoInPlayer__Info { margin: 0px auto 10px auto; text-align: center; } .ModalShareVideoInPlayer__Info a { color: #909090; font-size: 11px; } .ModalShareVideoInPlayer__Info a:hover { text-decoration: none; color: #909090; } @media (min-width: 600px) { .ModalShareVideoInPlayer { width: 460px; } } @media (max-width: 599px) { .ModalShareVideoInPlayer { max-width: 460px; min-width: 300px; } } .ButtonIconCloseInPlayer { position: absolute !important; top: 10px; right: 10px; cursor: pointer; z-index: 999998; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .account-page__title { display: block; width: auto; margin: 0px auto 20px auto; font-size: 16px; font-weight: 700; color: #000000; text-transform: uppercase; } .account-page__photo { display: flex; } .account-page__photo--left { width: 140px; padding: 0px 20px 0px 0px; vertical-align: top; margin-bottom: 20px; } .account-page__photo--left img { width: 100%; height: 120px; object-fit: cover; } .account-page__photo--left:focus { outline: 0; } .account-page__photo--right { flex: 1; width: auto; padding: 0px; font-size: 14px; vertical-align: top; line-height: 0.85rem; } .account-page__photo--right a { color: #3366cc !important; } .account-page__photo--right a:hover { text-decoration: underline !important; cursor: pointer; } .account-page__photo--right p:focus { outline: 0; } .account-page__is-trusted { margin-top: 25px; } .account-page__is-trusted .account-page__title { display: flex; align-items: center; } .account-page__is-trusted .checkmark-icon { height: 25px; margin-left: 5px; } .account-page__is-trusted p { font-size: 12px; } .account-page__is-trusted p strong { color: #38b54a; } .account-page__tokens { margin-top: 50px; } .account-page__tokens h3 { font-size: 16px; font-weight: 700; text-transform: uppercase; } .account-page__tokens .description { margin-bottom: 17px; font-size: 12px; color: #666666; } .account-page__tokens a { display: block; margin-bottom: 10px; width: 200px; font-size: 14px; color: #3366cc; } .account-page__tokens a:hover, .account-page__tokens a:active { color: #3366cc; text-decoration: underline; } .account-page .btn__text { background-color: white; border: 0; } .account-page p.small { overflow-wrap: break-word; } .account-page .contact-link { text-align: center; margin-bottom: 20px; margin-top: 30px; } .account-page .manage-affiliate-btn { margin-bottom: 16px; } .upload__photo { display: flex; } .upload__photo--left { width: 140px; padding: 0px 20px 0px 0px; vertical-align: top; margin-bottom: 20px; } .upload__photo--left img { width: 100%; height: 120px; object-fit: cover; } .upload__photo--left:focus { outline: 0; } .upload__photo--right { flex: 1; width: auto; padding: 0px; font-size: 14px; vertical-align: top; line-height: 0.85rem; margin-left: -16px; } .upload__photo--right a { color: #3366cc !important; } .upload__photo--right a:hover { text-decoration: underline !important; cursor: pointer; } .upload__photo--right p:focus { outline: 0; } .upload__photo .btn-link { color: #3366cc !important; font-size: 14px; } .upload__photo .btn-link:hover { text-decoration: underline !important; cursor: pointer; } .upload .btn__text { background-color: white; border: 0; } .reset-password { margin: 10px 13px; } .upload-artwork-container .upload-artwork-img { width: 100%; min-height: 120px; background-color: #ececec; } .upload-artwork-container .upload-artwork-img.has-thumb { min-height: unset; } .upload-artwork-container .upload-artwork-img.has-thumb img { width: 100%; } .upload-artwork-container .upload-artwork-description { margin-top: 16px; } .upload-artwork-container .upload-artwork-description p { color: #666666; font-size: 14px; } .upload-artwork-container .upload-artwork-error { color: #ff0000 !important; } .upload-artwork-container .upload-artwork-action .btn-link { color: #3366cc !important; font-size: 14px; padding: 6px 0; } .upload-artwork-container .upload-artwork-action .btn-link:hover { text-decoration: underline !important; cursor: pointer; } .user-stats { padding-left: 20px; padding-top: 16px; } .user-stats__title { font-size: 16px; font-weight: 700; color: black; margin-bottom: 16px; text-transform: uppercase; } @media (min-width: 1024px) { .user-stats { padding-top: 0; } } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .account-invites-wrapper { padding-right: 40px; border-right: 1px solid #ececec; } @media (max-width: 960px) { .account-invites-wrapper { padding-right: 0; border-right: none; } } .account-invites-wrapper .list .row { border-bottom: 1px solid #ececec; } .account-invites-wrapper .list .row:not(:first-child):not(:last-child):hover { background-color: #f4f4f4; cursor: pointer; } .account-invites-wrapper .list .row-selected { background-color: #e3fafd !important; } .account-invites-wrapper .list__checkbox { align-self: center; } @media (max-width: 600px) { .account-invites-wrapper .list__checkbox { padding: 10px 0 0 8px; align-self: flex-start; transform: scale(1.2); } } .account-invite-item { display: flex; padding: 15px 0; } .account-invite-item__content { flex: 1; vertical-align: top; } .account-invite-item__title { font-weight: bold; overflow: hidden; text-overflow: ellipsis; font-size: 16px; color: black; } .account-invite-item__title:hover { color: inherit; text-decoration: none; } @media (min-width: 1024px) { .account-invite-item__title { font-size: 20px; } } @media (max-width: 600px) { .account-invite-item__title { font-size: 14px; display: -webkit-box; max-height: 40px; margin: 0 auto; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } } .account-invite-item__detail { font-size: 12px; color: #666666; } .account-invite-item__actions { display: block; padding-top: 10px; font-size: 12px; color: #666666; text-transform: uppercase; margin: 0 -8px; } .account-invite-item__actions__item { display: inline-block; margin-right: 5px; } .account-invite-item__actions__item button { font-size: 12px; background-color: transparent; color: #666666; text-transform: uppercase; border: none; } @media (min-width: 600px) and (max-width: 960px) { .account-invite-item__actions__item button { font-size: 0.75rem; } } .account-invite-item__actions__item button:hover { color: #ed1a3b; text-decoration: none; background: transparent; } .account-invite-item__actions__item button:focus, .account-invite-item__actions__item button:active { outline: 0; box-shadow: none !important; background-color: transparent !important; } .account-invite-item__actions__item button a { color: #666666; text-decoration: none; } .account-invite-item__actions__item button a:hover { color: #ed1a3b; } .invite__modal { padding: 14px; } .invite__modal__name { display: block; margin: 0px auto 15px auto; font-size: 28px; color: #000000; } .invite__modal__details { display: block; margin: 0px auto; font-size: 14px; color: #666666; } .invite__modal__details a { color: #3366cc; } .invite__modal__buttons { display: block; margin: 0 auto; } .invite__modal__buttons button { margin: 0; padding: 12px 15px 13px 15px; font-size: 12px; font-weight: 700; color: #ffffff !important; text-transform: uppercase; border-radius: 3px; cursor: pointer; border: none; outline: none; -webkit-appearance: none; } .invite__modal__buttons .btn__green { background-color: #38b54a; } .invite__modal__buttons .btn__gray { background-color: #999999; } .invite__modal__buttons .btn__text { background-color: #ffffff; color: #666666 !important; font-size: 14px; border: 0; } .alert-bar-form__inputs { width: 50%; border: 1px solid rgba(0, 0, 0, 0.54); border-radius: 5px; margin-top: 15px; position: relative; } .alert-bar-form__inputs--full { width: 100%; } .alert-bar-form__inputs label { position: absolute; top: -7px; left: 20px; color: rgba(0, 0, 0, 0.54); padding: 0; font-size: 12px; background-color: #FFFFFF; padding: 0 3px; font-weight: 400; line-height: 1; letter-spacing: 0.00938em; } .alert-bar-form__inputs input { width: 100%; padding: 18.5px 14px; border: 0; border-radius: 5px; font-size: 14px; } .alert-bar-form__checkbox { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 14px; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .list__container { padding-right: 40px; } @media (max-width: 960px) { .list__container { padding-right: 0px; border-right: none; } } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .list__container { padding-right: 40px; border-right: solid 1px #ececec; } @media (max-width: 960px) { .list__container { padding-right: 0px; border-right: none; } } .list__container .list__items .row { border-bottom: 1px solid #ececec; } .list__container .list__items .row:not(:first-child):not(:last-child):hover { background-color: #f4f4f4; cursor: pointer; } .list__container .list__items .row-selected { background-color: #e3fafd !important; } .list__container .list__items__checkbox { padding-top: 17px; } @media (max-width: 600px) { .list__container .list__items__checkbox { padding: 17px 0px 0px 8px; align-self: flex-start; font-size: 16px; line-height: 0; } } .list__container .list__items a:hover { text-decoration: none; color: #000; } .list__modal { padding: 14px; } .list__modal__name { display: block; margin: 0px auto 15px auto; font-size: 28px; color: #000000; } .list__modal__details { display: block; margin: 0px auto; font-size: 14px; color: #666666; } .list__modal__details a { color: #3366cc; } .list__modal__buttons { display: block; margin: 0px auto; } .list__modal__buttons button { margin: 0px; padding: 12px 15px 13px 15px; font-size: 12px; font-weight: 700; color: #ffffff !important; text-transform: uppercase; border-radius: 3px; cursor: pointer; border: none; outline: none; -webkit-appearance: none; } .list__modal__buttons .btn__green { background-color: #39b54a; } .list__modal__buttons .btn__gray { background-color: #999999; } .list__modal__buttons .btn__text { background-color: #ffffff; color: #666666 !important; font-size: 14px; border: 0; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .list__container { padding-right: 40px; border-right: solid 1px #ececec; } @media (max-width: 960px) { .list__container { padding-right: 0px; border-right: none; } } .list__container .list__items .row { border-bottom: 1px solid #ececec; } .list__container .list__items .row:not(:first-child):not(:last-child):hover { background-color: #f4f4f4; cursor: pointer; } .list__container .list__items .row-selected { background-color: #e3fafd !important; } .list__container .list__items__checkbox { padding-top: 17px; } @media (max-width: 600px) { .list__container .list__items__checkbox { padding: 17px 0px 0px 8px; align-self: flex-start; font-size: 16px; line-height: 0; } } .list__container .list__items a:hover { text-decoration: none; color: #000; } .list__modal { padding: 14px; } .list__modal__name { display: block; margin: 0px auto 15px auto; font-size: 28px; color: #000000; } .list__modal__details { display: block; margin: 0px auto; font-size: 14px; color: #666666; } .list__modal__details a { color: #3366cc; } .list__modal__buttons { display: block; margin: 0px auto; } .list__modal__buttons button { margin: 0px; padding: 12px 15px 13px 15px; font-size: 12px; font-weight: 700; color: #ffffff !important; text-transform: uppercase; border-radius: 3px; cursor: pointer; border: none; outline: none; -webkit-appearance: none; } .list__modal__buttons .btn__green { background-color: #39b54a; } .list__modal__buttons .btn__gray { background-color: #999999; } .list__modal__buttons .btn__text { background-color: #ffffff; color: #666666 !important; font-size: 14px; border: 0; } .Promo-Header { margin-top: 15px; display: flex; gap: 30px; border-bottom: 1px solid #ececec; padding-bottom: 10px; } @media (max-width: 599px) { .Promo-Header { gap: 15px; } .Promo-Header__Image { width: 100px !important; } } .Promo-Header .PromoText { word-wrap: break-word; overflow-wrap: break-word; } .Promo-Header__Image { width: 150px; color: #666666; font-size: 14px; font-weight: 500; } .Promo-Header__Headline { font-size: 14px; color: #666666; font-weight: 500; } .Promo-Block { position: relative; } .Promo-Block .Promo-Item { display: flex; align-items: flex-start; margin-top: 15px; gap: 30px; padding-right: 40px; padding-bottom: 10px; border-bottom: 1px solid #ececec; } @media (max-width: 599px) { .Promo-Block .Promo-Item { gap: 15px; } .Promo-Block .Promo-Item__Image { width: 100px !important; min-width: 100px; } } .Promo-Block .Promo-Item__Hide { opacity: 0.3; } .Promo-Block .Promo-Item__Image { width: 150px; min-width: 150px; height: 90px; } .Promo-Block .Promo-Item__Image img { width: 100%; height: 100%; } .Promo-Block .Promo-Item__Info__Title { font-weight: 600; margin-bottom: 12px; font-size: 14px; } .Promo-Block .Promo-Item__Info__Date { color: #666666; font-size: 14px; } .Promo-Block .Promo-Item__Action { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); } .Promo-Block .Promo-Item__Action__Edit { color: #3366cc; font-weight: 500; font-size: 14px; } .Promo-Block .Promo-Item__Action__Edit:hover { color: #3366cc !important; opacity: 0.8; text-decoration: none !important; } .list-promotions .btn-primary { background-color: #007bff !important; width: 100px; } .list-promotions .btn-primary:hover { background-color: #3399FF !important; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .review-popup { display: none; width: 100%; height: 100%; background-color: #ffffff; position: fixed; top: 0px; left: 0px; z-index: 999998; overflow: auto; } .review-popup.show { display: block; } .review-popup__background { display: block; width: 100%; height: 100%; background-color: #000000; position: fixed; top: 0px; left: 0px; z-index: 999990; opacity: 0.85; } .review-popup__layer { display: block; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 999991; overflow: auto; } .review-popup__close { display: block; width: 30px; height: 30px; position: fixed; top: 20px; right: 30px; z-index: 999999; cursor: pointer; } .review-popup__content { display: block; padding: 60px 30px 30px 30px; } .review-popup__table { display: block; max-width: 700px; margin: 0px auto; background-color: #ffffff; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); } .review-popup__video { display: block; padding: 30px; } .review-popup__video .video { position: relative; padding-bottom: 56.25%; height: 0px; background-color: #000000; margin-bottom: 20px; } .review-popup__video .video iframe { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .review-popup__tools { display: block; padding: 0px 30px 30px 30px; } .review-popup__title { display: block; margin: 0px auto 20px auto; font-size: 20px; font-weight: 700; color: #000000; } .review-popup__details { display: block; margin: 15px auto 15px auto; font-size: 14px; color: #666666; } .review-popup__details a { color: #3366cc !important; } .review-popup__details a:hover { color: inherit; text-decoration: underline; } .review-popup__description { display: block; margin: 0px auto 20px auto; font-size: 14px; color: #666666; } .review-popup__description textarea { width: 100%; padding: 10px; color: #666666; font-family: 'Roboto'; font-size: 12px; line-height: 140%; resize: none; } .review-popup__description textarea:focus { outline: 0; } .review-popup__keywords { display: block; margin: 0px auto 20px auto; font-size: 14px; color: #666666; } .review-popup__notes { display: block; margin: 0px auto 20px auto; font-size: 14px; color: #666666; } .review-popup__notes textarea { width: 100%; padding: 10px; color: #666666; font-family: 'Roboto'; font-size: 12px; line-height: 140%; resize: none; } @media (max-width: 960px) { .review-popup__notes textarea { border: 1px solid #cccccc; } } .review-popup__notes select { width: 100%; padding: 10px; color: #666666; font-family: 'Roboto'; font-size: 12px; } @media (max-width: 960px) { .review-popup__notes select { border: 1px solid #ccc; } } .review-popup__notes input[type='radio'] { margin-right: 4px; } .review-popup b { color: #333333; } .review-popup__buttons { display: block; margin: 0px auto 20px auto; } .review-popup__buttons .btn { margin-bottom: 5px; margin-right: 5px; color: #fff; font-size: 12px; text-transform: uppercase; font-weight: 700; } .review-popup__approve { background-color: #38b54a; } .review-popup__delist { background-color: #3366cc; } .review-popup__strike, .review-popup__reject { background-color: #999999; } .review-popup__cancel { background-color: transparent; color: #666666 !important; } .review-popup__cancel:hover { color: #ed1a3b !important; } .review-popup__cancel:focus { outline: 0; } .review-popup .error { color: #ed1a3b; } .review-popup .has-error { border: 1px solid #ed1a3b; } @media (min-width: 1024px) { .review-popup__table { display: table; width: 100%; max-width: 1140px; } .review-popup__video { display: table-cell; width: 560px; vertical-align: top; } .review-popup__tools { display: table-cell; width: auto; vertical-align: top; border-left: solid 1px #ececec; padding: 30px; } } .promo-featured-row.row-container { display: flex; column-gap: 24px; margin-bottom: 24px; } .promo-featured-row.row-container .featured-row-item .row-header { margin-bottom: 24px; } .promo-featured-row.row-container .featured-row-item .row-item-content { height: 100px; display: flex; align-items: center; } .promo-featured-row.row-container .featured-row-item.url-row { flex: 1; } .promo-featured-row.row-container .featured-row-item.image-row img { max-height: 100%; cursor: pointer; } .promo-featured-row.row-container .featured-row-item.image-row .no-image { height: 100%; aspect-ratio: 16/9; border: 1px solid #ececec; } .promo-featured-row.row-container .featured-row-item.image-upload-row .btn-link { color: #3366cc !important; font-size: 14px; } .promo-featured-row.row-container .featured-row-item.image-upload-row .btn-link:hover { text-decoration: underline !important; cursor: pointer; } .promo-featured-row.row-container .featured-row-item .featured-row-input { background-color: transparent; border: 1px solid #ececec; height: 60px; } .promo-featured-row.row-container .featured-row-item .featured-row-input.position-input { width: 60px; text-align: center; } .promo-featured-row.row-container .featured-row-item .featured-row-input.url-input { width: 100%; padding: 0 16px; } .promo-item-row-errors { margin-bottom: 24px; border-bottom: 1px solid #ececec; } .promo-item-row-errors .promo-item-error { color: red; margin-bottom: 8px; } .preview-image-modal img { width: 100%; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ @media (max-width: 960px) { .review-queue .refresh-time-dropdown { align-self: center; display: block; margin-top: 0px; } } .review-queue__container { padding-right: 40px; border-right: solid 1px #ececec; } @media (max-width: 960px) { .review-queue__container { padding-right: 0px; border-right: none; } } .review-queue__container .Toastify__toast--success { background: var(--Primary); text-align: center; font-size: 16px; } .review-queue__container .video-list .row { border-bottom: 1px solid #ececec; } .review-queue__container .video-list .row:not(:first-child):not(:last-child):hover { background-color: #f4f4f4; cursor: pointer; } .review-queue__container .video-list .row-selected { background-color: #e3fafd !important; } .review-queue__container .video-list .Toastify__toast--success { background: var(--Primary); text-align: center; font-size: 16px; } .review-queue__container .video-list__checkbox { align-self: center; } @media (max-width: 600px) { .review-queue__container .video-list__checkbox { align-self: flex-start; padding-top: 10px; padding-right: 0; padding-left: 8px; transform: scale(1.2); } } .review-queue__container .video-list a { color: #666666; } .review-queue__container .video-list a:hover { text-decoration: underline; color: #000000; } @media (max-width: 600px) { .review-queue__container__actions .item-action { padding-bottom: 0px; } } @media (min-width: 600px) { .review-queue__container__actions { display: flex; } } .review_box { display: none; width: 100%; height: 100%; background-color: #ffffff; position: fixed; top: 0px; left: 0px; z-index: 999998; overflow: auto; } .review_box.show { display: block; } .review_box__background { display: block; width: 100%; height: 100%; background-color: #000000; position: fixed; top: 0px; left: 0px; z-index: 999990; opacity: 0.85; } .review_box__layer { display: block; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 999991; overflow: auto; } .review_box__close { display: block; width: 30px; height: 30px; position: fixed; top: 20px; right: 30px; z-index: 999999; cursor: pointer; } .review_box__content { display: block; padding: 60px 30px 30px 30px; } .review_box__table { display: block; max-width: 700px; margin: 0px auto; background-color: #ffffff; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); } .review_box__video { display: block; padding: 30px; } .review_box__video .video { position: relative; padding-bottom: 56.25%; height: 0px; background-color: #000000; margin-bottom: 20px; } .review_box__video .video iframe { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .review_box__tools { display: block; padding: 0px 30px 30px 30px; } .review_box__title { display: block; margin: 0px auto 20px auto; font-size: 20px; font-weight: 700; color: #000000; } .review_box__details { display: block; margin: 15px auto 15px auto; font-size: 14px; color: #666666; } .review_box__details a { color: #3366cc; } .review_box__details a:hover { color: inherit; text-decoration: underline; } .review_box__description { display: block; margin: 0px auto 20px auto; font-size: 14px; color: #666666; } .review_box__description textarea { width: 100%; padding: 10px; color: #666666; font-family: 'Roboto'; font-size: 12px; line-height: 140%; resize: none; } .review_box__description textarea:focus { outline: 0; } .review_box__keywords { display: block; margin: 0px auto 20px auto; font-size: 14px; color: #666666; } .review_box__notes { display: block; margin: 0px auto 20px auto; font-size: 14px; color: #666666; } .review_box__notes textarea { width: 100%; padding: 10px; color: #666666; font-family: 'Roboto'; font-size: 12px; line-height: 140%; resize: none; } @media (max-width: 960px) { .review_box__notes textarea { border: 1px solid #cccccc; } } .review_box__notes select { width: 100%; padding: 10px; color: #666666; font-family: 'Roboto'; font-size: 12px; } @media (max-width: 960px) { .review_box__notes select { border: 1px solid #cccccc; } } .review_box__notes input[type='radio'] { margin-right: 4px; } .review_box b { color: #333333; } .review_box__buttons { display: block; margin: 0px auto 20px auto; } .review_box__buttons .btn { margin-bottom: 5px; margin-right: 5px; color: #ffffff; font-size: 12px; text-transform: uppercase; font-weight: 700; } .review_box__approve { background-color: #38b54a; } .review_box__delist { background-color: #3366cc; } .review_box__strike, .review_box__reject { background-color: #999999; } .review_box__cancel { background-color: transparent; color: #666666 !important; } .review_box__cancel:hover { color: #ed1a3b !important; } .review_box__cancel:focus { outline: 0; } @media (min-width: 1024px) { .review_box__table { display: table; width: 100%; max-width: 1140px; } .review_box__video { display: table-cell; width: 560px; vertical-align: top; } .review_box__tools { display: table-cell; width: auto; vertical-align: top; border-left: solid 1px #ececec; padding: 30px; } } .PhotoButtonGroup button { width: fit-content; color: #3366cc; } .PhotoButtonGroup button:hover { color: #3366cc; } .user-ban-history-table th, .user-ban-history-table td { vertical-align: middle; } .admin-users-header { display: flex; justify-content: space-between; align-items: center; } @media (max-width: 410px) { .admin-users-header { flex-direction: column; align-items: flex-start; } .admin-users-header__title { margin-bottom: 5px; } } .admin-users-header__title { font-size: 16px; font-weight: 900; color: #000000; text-transform: uppercase; } .admin-users-header__buttons { display: flex; } .admin-users-header__buttons a { font-size: 12px; text-transform: uppercase; font-weight: 700; } .admin-users-header__buttons a:last-child { margin-left: 10px; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .admin__users-wrapper { padding-right: 40px; border-right: 1px solid #ececec; } @media (max-width: 960px) { .admin__users-wrapper { padding-right: 0px; border-right: none; } } .admin__users-wrapper .item-action { border-bottom: none; } .admin__users-wrapper .list .row-selected { background-color: #e3fafd !important; } .admin__users-wrapper .list__checkbox { align-self: center; } @media (max-width: 600px) { .admin__users-wrapper .list__checkbox { padding: 10px 0px 0px 8px; align-self: flex-start; transform: scale(1.2); } } .admin__users-wrapper .list a:hover { text-decoration: none; color: #000; } .admin__users-wrapper .list .row:nth-of-type(2) { border-top: 1px solid #ececec; } .admin__users-wrapper .filter__btn { padding: 0; } .user-item { display: flex; padding: 15px 0; } .user-item__thumbnail { padding-right: 15px; width: 115px; } .user-item__thumbnail__wrapper { display: block; position: relative; width: 100%; } .user-item__thumbnail__wrapper img { width: 90px; height: 90px; border: none; object-fit: cover; padding: 0px; border-radius: 0px; } .user-item__thumbnail__wrapper .checkmark-icon { position: absolute; top: -8px; right: 0; width: 30px; height: 30px; } .user-item__content { flex: 1; vertical-align: top; } .user-item__title { font-weight: bold; overflow: hidden; text-overflow: ellipsis; font-size: 16px; color: #000; } .user-item__title:hover { color: inherit; text-decoration: none; } @media (min-width: 1024px) { .user-item__title { font-size: 20px; } } @media (max-width: 600px) { .user-item__title { font-size: 14px; display: -webkit-box; max-height: 40px; margin: 0 auto; -webkit-line-clamp: 2; /* autoprefixer: off */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } } .user-item__detail { font-size: 12px; color: #666666; } .user-item__actions { display: block; padding-top: 10px; margin: 0 -8px; font-size: 12px; color: #666666; text-transform: uppercase; } .user-item__actions__item { display: inline-block; margin-right: 5px; } .user-item__actions__item button { font-size: 12px; background-color: transparent; color: #666666; text-transform: uppercase; border: none; } @media (min-width: 600px) and (max-width: 960px) { .user-item__actions__item button { font-size: 0.75rem; } } .user-item__actions__item button:hover { color: #ed1a3b; text-decoration: none; background: transparent; } .user-item__actions__item button:focus, .user-item__actions__item button:active { outline: 0; box-shadow: none !important; background-color: transparent !important; } .user-item__actions__item button a { color: #666666; text-decoration: none; } .user-item__actions__item button a:hover { color: #ed1a3b; } .video-flags-dashboard-container .filter .item-action .search__container { justify-content: flex-end; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .item-carousel-container { position: relative; } .item-carousel-container:hover .item-carousel-button { opacity: 1; } .item-carousel-container .item-container { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; } .item-carousel-container .item-container::-webkit-scrollbar { display: none; } .item-carousel-container .item-carousel-button { z-index: 10; opacity: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 80px; border: none; font-size: 40px; background-color: white; box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.18); transition: all 0.2s linear; } .item-carousel-container .item-carousel-button:active, .item-carousel-container .item-carousel-button:focus { border: none; outline: none; } .item-carousel-container .item-carousel-button:disabled { display: none; } .item-carousel-container .item-carousel-button.leftScroll { left: 0; border-radius: 0 4px 4px 0; } .item-carousel-container .item-carousel-button.rightScroll { right: 0; border-radius: 4px 0 0 4px; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .product-card-container { position: relative; display: flex; align-items: center; min-height: 100px; max-height: 120px; min-width: 350px; max-width: 350px; padding: 8px; gap: 4px; color: black; border-radius: 8px; border: 1px black solid; cursor: pointer; } .product-card-container.has-action:hover { text-decoration: none; color: black; } .product-card-container.has-action:hover .product-card-action { display: flex; justify-content: center; align-items: center; z-index: 10; } .product-card-container.has-action:hover .product-card-img, .product-card-container.has-action:hover .product-card-detail { opacity: 0.2; } .product-card-container.is-featured { border-color: #ed1a3b; } .product-card-container .product-card-action { display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.3); } .product-card-container .product-card-action .liveshop-products-btn.disabled { opacity: 1; color: #ed1a3b; } .product-card-container .product-card-img { width: 100px; padding: 4px; border-radius: 4px; max-height: 100%; object-fit: contain; } .product-card-container .product-card-detail { display: flex; flex-direction: column; max-width: 200px; gap: 4px; } .product-card-container .product-card-detail p.featured-product { margin: 0; color: #ed1a3b; } .product-card-container .product-card-detail p.previously-featured { margin: 0; color: #26c5d9; } .product-card-container .product-card-detail p.product-name { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .product-card-container .product-card-detail .product-price-container { display: flex; align-items: flex-end; gap: 8px; } .product-card-container .product-card-detail .product-price-container .product-price { color: #ed1a3b; } .product-card-container .product-card-detail .product-price-container .product-base-price { text-decoration: line-through; opacity: 0.8; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .modal-add-products .modal-window__content--nofooter { padding: 0; margin: 0; } .modal-add-products .add-products-modal-content-container .add-product-title { margin-bottom: 16px; text-transform: uppercase; font-weight: 700; } .modal-add-products .add-products-modal-content-container .search-result-container { display: flex; row-gap: 8px; flex-wrap: wrap; } .modal-add-products .add-products-modal-content-container .search-result-container .product-card-container { margin: 0 4px; width: 50% !important; } .modal-add-products .add-products-modal-content-container .pagination-container .page-navigation { margin-top: 8px !important; } .modal-add-products .add-products-modal-content-container .pagination-container .page-navigation .pagination { margin-bottom: 0; } .modal-add-products .add-products-modal-content-container .filter .item-action .col { padding: 0; } .modal-add-products .add-products-modal-content-container .filter .item-action .col .form__input-container { display: none; } .modal-add-products .add-products-modal-content-container .filter .item-action .col div.search__container { flex: 1; } .modal-add-products .add-products-modal-content-container .filter .item-action .col div.search__container label.search__container { width: 100%; } .modal-add-products .add-products-modal-content-container .filter .item-action .col div.search__container label.search__container .search__input { width: 100%; } @media (max-width: 500px) { .modal-add-products .add-products-modal-content-container .item-action { padding-bottom: 0; } .modal-add-products .add-products-modal-content-container .search-result-container .product-card-container { width: calc(100% - 8px) !important; min-width: unset; } } .affiliate_modal.overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 30001; } .affiliate_modal.overlay__close { display: block; width: 40px; height: 40px; margin: 0; position: absolute; top: 15px; right: 15px; z-index: 2; background-image: url(/static/icons/Button-Close.svg); background-repeat: no-repeat; background-position: center; background-size: 30px 30px; cursor: pointer; } @media (max-width: 600px) { .affiliate_modal.overlay__close { display: none; } } .affiliate_modal.overlay__close.inside { width: 30px; height: 30px; background: none; } @media (max-width: 600px) { .affiliate_modal.overlay__close.inside { display: block; } } .affiliate_modal.overlay--hidden { visibility: hidden; } .affiliate_modal .modal-window { position: fixed; background-color: white; width: 80%; padding: 20px; color: #666; font-size: 14px; cursor: default; top: 50%; left: 50%; transform: translate(-50%, -50%); } .affiliate_modal .modal-window__footer { display: flex; justify-content: flex-end; } .affiliate_modal .modal-window__footer__close { text-transform: uppercase; color: #666666; font-size: 14px; } .affiliate_modal .modal-window__footer__close:hover { text-decoration: none; } .affiliate_modal .modal-window__title { font-style: normal; font-weight: 700; font-size: 18px; line-height: 21px; height: 30px; } .affiliate_modal .modal-window__content { padding: 20px 0 20px 0; margin-bottom: 20px; border-top: solid 1px #ececec; border-bottom: solid 1px #ececec; } .affiliate_modal .modal-window__content--scrollable { height: calc(100vh - 220px); overflow: auto; } .affiliate_modal .modal-window__content--noheader { padding-top: 0; border-top: none; } .affiliate_modal .modal-window__content--nofooter { padding-bottom: 0; border-bottom: none; } @media (max-width: 768px) { .affiliate_modal .modal-window { width: 100%; } } @media (max-width: 640px) { .affiliate_modal .modal-window { top: 60px; transform: translate(-50%, 0); overflow: auto; max-height: calc(100% - 60px); } } @media (min-width: 900px) { .affiliate_modal .modal-window { max-width: 800px; } } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .sales__videos-wrapper { border-right: 1px solid #ececec; } .sales__videos-wrapper .filter__btn { padding: 0; } @media (max-width: 600px) { .sales__videos-wrapper .filter__btn { flex-grow: 2; } } @media (max-width: 960px) { .sales__videos-wrapper { border-right: none; padding-right: 6px; } } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .notification-table { font-size: 12px; border-bottom: 1px solid #ececec; } .notification-table tr > td { min-width: 115px; } .notification-table tr td:last-child { min-width: 60px; } .notification-table .warning-row { font-weight: 600; } .notification-table .warning-row td { color: #ed1a3b !important; } .notification-table .warning-row.loading { position: relative; opacity: 0.6; pointer-events: none; } .notification-table .warning-row .loading-cell { position: absolute; top: 0; left: 0; z-index: 1; } .notification-table td { width: auto; } .notification-table td a { color: inherit; } .notification-table td:first-child { color: #666666; width: 115px; padding-left: 0; } .notification-table td:last-child { text-align: right; width: 75px; color: #ed1a3b; } .notification-table .notification-delete { position: absolute; cursor: pointer; left: 5px; top: 5px; width: 14px; opacity: 1; } .notification-table .notification-delete:hover { opacity: 0.8; } .notification-table .notification-delete-wrapper { position: relative; top: -4px; display: inline-flex; margin-right: 10px; width: 24px; height: 12px; } .home { font-size: 0.75rem; } .home__block { padding-bottom: 30px; } .home__block__title { display: block; font-size: 1rem; font-weight: 900; color: black; text-transform: uppercase; } .home__block__content { padding: 15px 0; } .home .recently-uploaded__title { display: block; font-size: 16px; font-weight: 900; color: black; text-transform: uppercase; } .home .recently-uploaded__content { padding-top: 10px; } .home button { text-transform: uppercase; font-weight: 700; font-size: 12px; } .home .contact-link { text-align: center; font-size: 16px; margin-bottom: 20px; } .Toastify__toast--success { background: var(--Primary); text-align: center; font-size: 16px; } @media (max-width: 600px) { .modal { padding: 0 10px; } } @media (max-width: 768px) { .modal-settings.modal-window { width: 95%; } } .modal-create-invite-url { top: 40%; overflow-x: hidden; overflow-y: auto; background-color: #ffffff; } .modal-create-invite-url .modal-create-invite-url-content { border: none !important; } .modal-create-invite-url .modal-create-invite-url-content .form { margin: 20px; } @media (max-width: 991px) { .modal-create-invite-url { position: absolute; top: 0; height: 100%; transform: translate(-50%, 0%); } } .modal-create-invite-url__title { font-size: 16px; font-weight: 700; color: #000000; margin: 20px; } .modal-create-invite-url__form-footer { margin: 10px 20px 20px auto; float: right; } .modal-create-invite-url a { cursor: pointer; color: #666666; font-size: 12px; } .modal-create-invite-url a:hover { color: #ed1a3b; text-decoration: none; } .modal-create-invite-url label { font-size: 12px; font-weight: 700; margin-bottom: 2px; } .modal-create-invite-url .modal-window__content { margin: 0; padding: 0; border: none; } @media (max-width: 600px) { .modal-create-invite-url .modal-window__content { background-color: #ffffff; } } .modal-create-invite-url .modal-window__footer { margin-top: 10px; margin-right: 20px; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .invite-url__container .list__no-items { border: 0 !important; } .invite-url__container .list-header { margin-bottom: 30px; } .invite-url__container .list .row { border-bottom: none !important; border-top: 1px solid #ececec; } @media (max-width: 960px) { .invite-url__table-content { overflow-x: auto; } } .account-invites-wrapper { padding-right: 40px; border-right: 1px solid #ececec; } @media (max-width: 960px) { .account-invites-wrapper { padding-right: 0; border-right: none; } } .account-invites-wrapper .list .row { border-bottom: 1px solid #ececec; } .account-invites-wrapper .list .row:not(:first-child):not(:last-child):hover { background-color: #f4f4f4; cursor: pointer; } .account-invites-wrapper .list .row-selected { background-color: #e3fafd !important; } .account-invites-wrapper .list__checkbox { align-self: center; } @media (max-width: 600px) { .account-invites-wrapper .list__checkbox { padding: 10px 0 0 8px; align-self: flex-start; transform: scale(1.2); } } .invite-url-item { display: flex; padding: 15px 0; } .invite-url-item__content { display: flex; justify-content: space-between; justify-items: center; align-items: center; flex: 1; vertical-align: top; } .invite-url-item__title { font-weight: bold; overflow: hidden; text-overflow: ellipsis; font-size: 16px; color: black; } .invite-url-item__title:hover { color: inherit; text-decoration: none; } @media (min-width: 1024px) { .invite-url-item__title { font-size: 20px; } } @media (max-width: 600px) { .invite-url-item__title { font-size: 14px; display: -webkit-box; max-height: 40px; margin: 0 auto; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } } .invite-url-item__detail { font-size: 12px; color: #666666; } .invite-url-item__detail input { width: 200px; padding: 3px 10px; } .invite-url-item__detail.email { word-break: break-all; } .invite-url-item__detail.ACTIVE { color: #68caf6; font-weight: bold; } .invite-url-item__detail.USED { color: #95d49f; font-weight: bold; } .invite-url-item__detail.EXPIRED { color: #f3596d; font-weight: bold; } .invite-url-item__actions { display: block; font-size: 12px; color: #666666; text-transform: uppercase; margin: 0 -8px; } .invite-url-item__actions__item { display: inline-block; margin-right: 5px; } .invite-url-item__actions__item button { font-size: 12px; background-color: transparent; color: #666666; text-transform: uppercase; border: none; } @media (min-width: 600px) and (max-width: 960px) { .invite-url-item__actions__item button { font-size: 0.75rem; } } .invite-url-item__actions__item button:hover { color: #ed1a3b; text-decoration: none; background: transparent; } .invite-url-item__actions__item button:focus, .invite-url-item__actions__item button:active { outline: 0; box-shadow: none !important; background-color: transparent !important; } .invite-url-item__actions__item button a { color: #666666; text-decoration: none; } .invite-url-item__actions__item button a:hover { color: #ed1a3b; } .invite__modal { padding: 14px; } .invite__modal__name { display: block; margin: 0px auto 15px auto; font-size: 28px; color: #000000; } .invite__modal__details { display: block; margin: 0px auto; font-size: 14px; color: #666666; } .invite__modal__details a { color: #3366cc; } .invite__modal__buttons { display: block; margin: 0 auto; } .invite__modal__buttons button { margin: 0; padding: 12px 15px 13px 15px; font-size: 12px; font-weight: 700; color: #ffffff !important; text-transform: uppercase; border-radius: 3px; cursor: pointer; border: none; outline: none; -webkit-appearance: none; } .invite__modal__buttons .btn__green { background-color: #38b54a; } .invite__modal__buttons .btn__gray { background-color: #999999; } .invite__modal__buttons .btn__text { background-color: #ffffff; color: #666666 !important; font-size: 14px; border: 0; } .invite-list-dashboard-table td { vertical-align: middle; } .add-to-playlists-container { font-size: 12px; height: 52px; overflow-x: hidden; } .add-to-playlists-container input { margin-right: 4px; } .add-to-playlists-container label { display: flex; justify-content: flex-start; } .add-to-playlists-container label .playlist-text { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .playlists-modal-button { text-transform: uppercase; font-size: 14px; } .playlists-modal-button:first-child { margin-right: 15px; } .playlists-modal-button:hover { text-decoration: none; } .modal-add-to-playlist { background-color: #ffffff; } .modal-add-to-playlist .modal-window__title { padding: 16px; font-size: 16px; font-weight: 700; color: #000000; } .modal-add-to-playlist .modal-window__footer { padding: 16px; } .modal-add-to-playlist__title { font-size: 16px; font-weight: 700; color: #000000; margin: 20px; } .modal-add-to-playlist .modal-add-to-playlist-content { border: none !important; padding: 16px; padding-top: 0; } .dropzone__disabled { opacity: 0.5; } .audio-player { background-color: none !important; } .livestream-upload .thumbnail__wrap img { cursor: pointer; } .notification-edit__nav { display: block; margin: 0 auto 15px; font-size: 16px; color: #999; border-bottom: 1px solid #ececec; padding: 0 0 15px; } .notification-edit__content { display: block; margin: 0 auto 30px; border-bottom: 1px solid #ececec; padding-bottom: 10px; } .notification-edit__content__subject { display: block; margin: 0 auto 10px; font-size: 18px; font-weight: 700; color: #000; } .notification-edit__content__body, .notification-edit__content__reject-reason { display: block; margin: 0 auto 5px; font-size: 15px; } .notification-edit__content__info { display: block; margin: 0 auto 5px; font-size: 12px; color: #999; } .notification-edit__content__message { word-wrap: break-word; } .notification-edit__content__message p { word-wrap: break-word; } .notifications { padding-right: 40px; border-right: 1px solid #ececec; } .notifications__items { margin-top: 10px; } .notifications__items a { text-decoration: none; color: #666; font-size: 14px; font-weight: 400; } .notifications__items a:first-child .row { border-top: 1px solid #ececec; } .notifications__items .row { border-bottom: 1px solid #ececec; padding: 5px; } .notifications__items .row:hover { background-color: #f4f4f4; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .sales__videos-wrapper { border-right: 1px solid #ececec; } .invoice-modal-button { text-transform: uppercase; font-size: 12px; font-weight: 700; margin-bottom: 40px; } .invoice-modal-close { position: absolute; top: 15px; right: 15px; height: 30px; width: 30px; border: none; background-image: url(/static/icons/Button-Close.svg); background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: cover; } .invoice-modal-header .close { display: none; } .invoice-modal .refund-control { display: flex; align-items: center; margin-bottom: 15px; } .dropdown__custom { margin-bottom: 15px; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .invoice-list-info { margin: 0; padding: 0; list-style: none; } .invoice-list-item { margin-bottom: 40px; } .invoice-list-item p { margin-bottom: 0; font-weight: 300; } .invoice-item-title { margin-bottom: 5px; font-size: 14px; font-weight: 800; } .invoice-table-title { margin-bottom: 40px; } .invoice-table-title h4 { font-size: 16px; margin-bottom: 5px; font-weight: 800; } .invoice-table-title a { font-weight: 300; word-break: break-all; } .invoice-table-total { border-top: 1px solid #333333; font-weight: 800; } .invoice-table-total td { padding: 10px 0.3em; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .transaction-table { font-size: 12px; margin-bottom: 0; border-bottom: 1px solid #ececec; } .transaction-table th, .transaction-table td { padding: 10px; } .transaction-table th a, .transaction-table td a { color: inherit; } .transaction-table th { text-transform: uppercase; } .transaction-table td:first-child { white-space: nowrap; } .transaction-table td:last-child { text-align: right; } .transaction-wrapper .page-navigation { margin-top: 20px !important; } .transaction-total { text-align: right; } .transaction-name { width: 100%; } @media (max-width: 500px) { .transaction-table td:first-child { white-space: normal; } } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .transaction-table-wrapper { border-right: 1px solid #ececec; } .filter-transactions .filter__btn { display: flex; flex-direction: column; gap: 10px; } .filter-transactions .filter__btn .search__container { display: flex; align-items: center; justify-content: space-between; } @media (max-width: 541px) { .transaction-wrapper { overflow-x: scroll; } } @media (max-width: 991px) { .transaction-table-wrapper { border-right: none; } .transaction-table-wrapper .item-action > .align-self-center.col { margin: 0 15px; } .transaction-table-wrapper .item-action > .align-self-center.col .search__container { width: 100%; } .transaction-table-wrapper .item-action > .align-self-center.col:not(.filter__btn) { display: none; } } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .order-videos__videos-wrapper { border-right: none; } .order-videos__videos-wrapper .filter__btn { padding: 0; } @media (max-width: 600px) { .order-videos__videos-wrapper .filter__btn { flex-grow: 2; } } .order-videos__videos-wrapper .item-action { display: block; } @media (min-width: 1025px) { .order-videos__videos-wrapper .item-action { display: flex; } } @media (max-width: 960px) { .order-videos__videos-wrapper { border-right: none; padding-right: 6px; } } .order-videos__videos-wrapper .my-videos-table { display: table; } @media (min-width: 1025px) { .order-videos__videos-wrapper .my-videos-table .item-list .row { border-bottom: 0px !important; } } @media (min-width: 1025px) { .order-videos__videos-wrapper .my-videos-table .item-list .row .list-item__content .video-like-item { display: none; } } @media (min-width: 1025px) { .order-videos__videos-wrapper .my-videos-table .list-item .video-like-item { display: none; } } .order-videos__videos-wrapper .my-videos-table thead tr th { font-size: 14px; } .order-videos__videos-wrapper .my-videos-table tbody td:not(:first-child) { font-size: 14px; } .order-videos__videos-wrapper .my-videos-table .react-bs-table-no-data { text-align: center; text-align: -webkit-center; } .order-videos__videos-wrapper .my-videos-table .index-column { height: 1px; } .order-videos__videos-wrapper .my-videos-table .order-column { height: 1px; width: 1px; } .order-videos__videos-wrapper .my-videos-table .order-column .videos-list-item__order { opacity: 1; height: 100%; padding: 15px 0; margin: 0 auto; } @media (max-width: 960px) { .order-videos__videos-wrapper .my-videos-table .hide-on-tablet { display: none; } .order-videos__videos-wrapper .my-videos-table .order-column { width: 5%; } } .order-videos__videos-wrapper .my-videos-list { display: block; } @media (min-width: 1025px) { .order-videos__videos-wrapper .my-videos-list { display: none; } } .order-videos__videos-wrapper .list-container .load-more-container { display: flex; justify-content: center; } @media (min-width: 1025px) { .order-videos__videos-wrapper .list-container .list .row { border-bottom: 0px !important; } } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .my-videos__videos-wrapper { border-right: 1px solid #ececec; } .my-videos__videos-wrapper .filter__btn { padding: 0; } @media (max-width: 600px) { .my-videos__videos-wrapper .filter__btn { flex-grow: 2; } } .my-videos__videos-wrapper .item-action { display: block; } @media (min-width: 1025px) { .my-videos__videos-wrapper .item-action { display: flex; } } @media (max-width: 960px) { .my-videos__videos-wrapper { border-right: none; padding-right: 6px; } } .my-videos__videos-wrapper .my-videos-table { display: none; } @media (min-width: 1025px) { .my-videos__videos-wrapper .my-videos-table { display: table; } } @media (min-width: 1025px) { .my-videos__videos-wrapper .my-videos-table .item-list .row { border-bottom: 0px !important; } } @media (min-width: 1025px) { .my-videos__videos-wrapper .my-videos-table .item-list .row .list-item__content .video-like-item { display: none; } } @media (min-width: 1025px) { .my-videos__videos-wrapper .my-videos-table .list-item .video-like-item { display: none; } } .my-videos__videos-wrapper .my-videos-table thead tr th { font-size: 14px; } .my-videos__videos-wrapper .my-videos-table tbody td:not(:first-child) { font-size: 14px; } .my-videos__videos-wrapper .my-videos-table .react-bs-table-no-data { text-align: center; text-align: -webkit-center; } .my-videos__videos-wrapper .my-videos-list { display: block; } @media (min-width: 1025px) { .my-videos__videos-wrapper .my-videos-list { display: none; } } @media (min-width: 1025px) { .my-videos__videos-wrapper .list-container .list .row { border-bottom: 0px !important; } } .EmbedPlayer .AVTab { color: #FFFFFF; background-color: #424345; } .EmbedPlayer .AVTabActive { background-color: #1994e8; color: #FFFFFF; } .EmbedPlayer #AVVideo.AVTabActive { filter: drop-shadow(1px 0px 3px rgba(0, 0, 0, 0.85)); } .EmbedPlayer #AVAudio.AVTabActive { filter: drop-shadow(-1px 0px 3px rgba(0, 0, 0, 0.85)); } .EmbedPlayer .vjs-settings-box { background-color: rgba(0, 0, 0, 0.75); } @media (max-width: 499.9px) { .EmbedPlayer .AVTab { padding: 8px; font-size: 8px; line-height: 8px; } } .stripe__text { color: black; } .stripe__text, .stripe__card-number, .stripe__card-expiry, .stripe__card-cvc, .stripe__custom-label { display: block; margin-bottom: 20px; font-size: 16px; } .stripe__control-bar { display: flex; justify-content: space-between; } .stripe__button-pay { width: 140px; height: 40px; background-color: #3366cc; color: white; } .stripe__error-message { color: #eb1c26; font-size: 14px; } .stripe__custom-element { width: 100%; font-family: 'Roboto', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; color: #32325d; background-color: white; border: solid 1px #ececec; height: 40px; padding: 10px 12px; border-radius: 4px; box-shadow: 0 1px 3px 0 #e6ebf1; -webkit-transition: box-shadow 150ms ease; transition: box-shadow 150ms ease; } .StripeElement { width: 100%; font-family: 'Roboto', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; color: #32325d; background-color: white; height: 40px; padding: 10px 12px; border-radius: 4px; box-shadow: 0 1px 3px 0 #e6ebf1; -webkit-transition: box-shadow 150ms ease; transition: box-shadow 150ms ease; } .StripeElement--focus { box-shadow: 0 1px 3px 0 #cfd7df; } .StripeElement--invalid { border-color: #fa755a; } .stripe__text { color: black; } .stripe__text, .stripe__card-number, .stripe__card-expiry, .stripe__card-cvc, .stripe__custom-label { display: block; margin-bottom: 20px; font-size: 16px; } .stripe__button-pay { width: 140px; height: 40px; background-color: #3366cc; color: white; } .stripe__error-message { color: #eb1c26; font-size: 14px; } .stripe__custom-element { width: 100%; font-family: 'Roboto', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; color: #32325d; background-color: white; border: solid 1px #ececec; height: 40px; padding: 10px 12px; border-radius: 4px; box-shadow: 0 1px 3px 0 #e6ebf1; -webkit-transition: box-shadow 150ms ease; transition: box-shadow 150ms ease; } .StripeElement { width: 100%; font-family: 'Roboto', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; color: #32325d; background-color: white; height: 40px; padding: 10px 12px; border-radius: 4px; box-shadow: 0 1px 3px 0 #e6ebf1; -webkit-transition: box-shadow 150ms ease; transition: box-shadow 150ms ease; } .StripeElement--focus { box-shadow: 0 1px 3px 0 #cfd7df; } .StripeElement--invalid { border-color: #fa755a; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .video-panel { background-color: #000; display: flex; flex-wrap: wrap; } .video-panel__message, .video-panel__cta { padding: 15px; } .video-panel__message { cursor: default; display: flex; flex-basis: 0; flex-grow: 1; max-width: 100%; } .video-panel__paragraph { margin: 0; align-self: center; } .video-panel__text--watch { font-weight: bold; color: white; text-transform: uppercase; font-size: 20px; padding-right: 15px; } .video-panel__text--buy { color: #999; font-size: 12px; } .video-panel__cta__button { background-color: #3366cc; text-transform: uppercase; color: white; border: none; font-weight: bold; font-size: 12px; padding: 12px 15px; } .video-panel__email-input { display: block; width: 100%; max-width: 350px; padding: 4px; border: solid 1px #ececec; font-size: 14px; margin-bottom: 10px; } @media (min-width: 768px) { .video-panel__cta { text-align: right; } } @media (max-width: 768px) { .video-panel { flex-direction: column; } .video-panel__cta { padding-top: 0; } } .video-panel__small-text { font-size: 12px; } .channel-video-actions { margin-left: 8px; } .channel-video-actions .btnLogo { height: 16px; margin-right: 5px; } .channel-video-actions .btn-dropdown-caret { margin-right: 5px; } .channel-video-actions .action_button { font-size: 12px; margin-left: 8px; } .playlist-panel { display: block; width: auto; margin: 0 auto 20px; background-color: #ececec; padding: 0; } .playlist-table { display: block; height: auto; max-height: 300px; overflow: auto; } .playlist-table::-webkit-scrollbar { width: 10px; } .playlist-table::-webkit-scrollbar-thumb { background: #999; } .playlist-table::-webkit-scrollbar-track { background: #f1f1f1; } .playlist-table__row { display: block; margin: 0 auto; border-top: 1px solid #ccc; } .playlist-table__row:hover { background-color: #fcfcfc; } .playlist-table__row__link:hover { text-decoration: none; } .playlist-table__row--selected { display: block; margin: 0 auto; border-top: 1px solid #ccc; background-color: #ed1a3b; } .playlist-table__row--selected:hover { background-color: #ed1a3b; } .playlist-table__row--selected .playlist-post__order, .playlist-table__row--selected .playlist-post .playlist-video-title, .playlist-table__row--selected .playlist-post .playlist-text .playlist-details { color: white; } .playlist-table__row--selected .playlist-thumbnail__image { border: 1px solid #fff; } .playlist-text { display: table-cell; width: auto; vertical-align: top; padding-left: 10px; } .playlist-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .playlist-details { font-family: Roboto, arial, helvetica, sans-serif; display: block; font-size: 12px; line-height: 130%; color: #333; } .playlist-post { display: table; width: 100%; margin: 0 auto; padding: 15px 0; } .playlist-post__order { display: table-cell; width: 15px; vertical-align: middle; padding: 10px; font-family: Roboto; font-size: 11px; color: #999; } .playlist-thumbnail { display: table-cell; width: 80px; vertical-align: top; } .playlist-thumbnail__image { height: 45px; } .playlist-thumbnail__preview { display: block; width: 100%; background-color: #000; margin: 0 auto; position: relative; } .playlist-thumbnail__duration { display: block; width: auto; background-color: rgba(0, 0, 0, 0.85); font-family: Roboto; font-size: 11px; color: #fff; position: absolute; z-index: 100; right: 5px; bottom: 5px; font-weight: 700; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 6px 5px 5px 5px; pointer-events: none; border-radius: 4px; line-height: 100%; } .playlist-title { word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: auto; margin: 0 auto; padding-left: 15px; padding-top: 15px; padding-right: 15px; margin-bottom: 15px; font-family: Roboto; font-size: 16px; font-weight: 700; color: #000; text-overflow: ellipsis; } .playlist-video-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: auto; margin: 0 auto 5px 0; font-family: Roboto, sans-serif; font-weight: 700; font-size: 13px; line-height: normal; color: black; } /* LIVE SHOPPING */ /* //////////////////////////////////////////////////////////////////// */ .LiveShopping { padding-bottom: 30px; border-bottom: solid 1px var(--SectionBorder); } .ScrollNav .ScrollNavButton .Icon { display: table-cell; width: auto; vertical-align: middle; } .LiveShopping .ScrollNavButton .Icon { vertical-align: top; } .LiveShopping .ScrollNavButton .Icon svg { margin-top: 45px; } .LiveShopping .ScrollNavLeft .TTBottom::after { bottom: 60px; } .LiveShopping .ScrollNavRight .TTBottom::after { bottom: 60px; } /* //////////////////////////////////////////////////////////////////// */ .LiveShoppingCol { display: table-cell; width: 120px; vertical-align: top; padding-right: 10px; } /* //////////////////////////////////////////////////////////////////// */ .LiveShoppingProduct { display: block; width: 120px; } .LiveShoppingProduct .Photo { display: table; border-radius: 5px; background-color: var(--White); border: solid 1px var(--LiveShoppingBorder); } .LiveShoppingProduct .Photo .Thumb { display: table-cell; vertical-align: middle; text-align: center; width: 120px; height: 120px; position: relative; } .LiveShoppingProduct .Photo .Thumb img { border-radius: 5px; margin: 0px auto; max-height: 120px; } .LiveShoppingProduct .Title { display: block; font-size: var(--FS11); font-weight: var(--FW700); } .LiveShoppingProduct .Title a { color: var(--TextPrimary); text-decoration: none; } .LiveShoppingProduct .Price { font-size: var(--FS10); } .LiveShoppingProduct .Price a { color: var(--TextSecondary); text-decoration: none; } .LiveShoppingProduct .Price a b { color: var(--Primary); } .LiveShoppingProduct .Sale { font-size: var(--FS8); padding: 3px 5px; } /* //////////////////////////////////////////////////////////////////// */ .ScrollWindow { display: block; position: relative; } .ScrollContainer { display: block; } .ScrollBox { display: block; width: 100%; overflow-x: auto; overflow-y: hidden; overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; } .ScrollBox::-webkit-scrollbar { height: 0px; } .ScrollTable { display: table; scrollbar-width: none; max-width: 100%; } .ScrollTable::-webkit-scrollbar { display: none; } .ScrollNav { display: none; position: absolute; top: 0px; z-index: 1; width: 100%; max-width: 150px; height: 100%; pointer-events: none; } .ScrollNavLeft { left: 0px; } .ScrollNavRight { right: 0px; } .ScrollNavBox { display: block; width: 100%; height: 100%; position: relative; } .ScrollNav .ScrollNavBackgroundLarge { display: block; position: absolute; width: 100%; height: 100%; z-index: 2; pointer-events: none; } .ScrollNav .ScrollNavBackgroundSmall { display: block; position: absolute; width: 100%; height: 100%; z-index: 2; pointer-events: none; } .ScrollNav .ScrollNavButton { display: table; width: 24px; height: 100%; cursor: pointer; position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); pointer-events: auto; } .ScrollNav .ScrollNavButtonLeft { left: 10px; } .ScrollNav .ScrollNavButtonRight { right: 10px; } .ScrollNav .ScrollNavButton .Icon svg { height: 32px; } .ScrollNavLeft .ScrollNavButton .Icon { text-align: left; } .ScrollNavRight .ScrollNavButton .Icon { text-align: right; height: 100%; } /* //////////////////////////////////////////////////////////////////// */ .Clamp3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 3; } /* TOOL TIPS */ @media (min-width: 600px) { .TT { position: relative; } .TT::after { display: block; border-radius: 5px; padding: 8px 12px !important; position: absolute; font-size: var(--FS14) !important; line-height: var(--FS14) !important; text-align: center; z-index: 40; opacity: 0; pointer-events: none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; background-color: var(--ToolTip); color: var(--TextToolTip); -webkit-box-shadow: 0 0 5px var(--Shadow); -moz-box-shadow: 0 0 5px var(--Shadow); } .TT:hover::after { opacity: 1; transition-delay: 1.5s; } .TTTop::after { top: 0px; left: 50%; transform: translate(-50%, calc(-100% - 10px)); } .TTBottom::after { bottom: 0px; left: 50%; transform: translate(-50%, calc(100% + 10px)); } .TTLeft::after { top: 0px; left: 0px; transform: translateX(calc(-100% - 10px)); } .TTRight::after { top: 0px; right: 0px; transform: translateX(calc(100% + 10px)); } .TTAccount::after { content: 'Account'; } .TTClear::after { content: 'Clear'; } .TTClose::after { content: 'Close'; } .TTCreate::after { content: 'Create'; } .TTFilter::after { content: 'Filter'; } .TTMenu::after { content: 'Menu'; } .TTNext::after { content: 'Next'; } .TTNotifications::after { content: 'Notifications'; } .TTOptions::after { content: 'Options'; } .TTPrevious::after { content: 'Previous'; } .TTSearch::after { content: 'Search'; } .TTShop::after { content: 'Shop'; } .TTSort::after { content: 'Sort'; } } .theme__dark .ql-formats button, .theme__dim .ql-formats button, .theme__night .ql-formats button { background: #ffffff !important; } .theme__dark #comments span, .theme__dark #comments div, .theme__dim #comments span, .theme__dim #comments div, .theme__night #comments span, .theme__night #comments div { color: #666666; } .theme__dark #comments b, .theme__dark #comments .CommentHeaderMode span, .theme__dim #comments b, .theme__dim #comments .CommentHeaderMode span, .theme__night #comments b, .theme__night #comments .CommentHeaderMode span { color: #ffffff; } @media (prefers-color-scheme: dark) { .theme__system .ql-formats button { background: #ffffff !important; } .theme__system #comments span, .theme__system #comments div { color: #666666; } .theme__system #comments b, .theme__system #comments .CommentHeaderMode span { color: #ffffff; } } .UpcomingBox img { width: 100%; } .video-description { width: 100%; word-break: break-all; } .video-description .article { word-break: break-word; } .preview { display: block; width: auto; margin: 0px auto 20px auto; } .preview__btn { display: block; width: auto; margin-bottom: 20px; padding-left: 0; font-family: 'Roboto', sans-serif, serif; font-size: 14px; color: #ed1a3b; font-weight: 700; cursor: pointer; } .preview__hidden { height: 160px; overflow: hidden; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(rgba(0, 0, 0, 0))); } .article { display: block; width: auto; font-family: 'Roboto'; font-size: 15px; line-height: 165%; color: #333333; margin: 0px auto 20px auto; } .article a { color: #ed1b2f; } .keywords { display: block; width: auto; font-family: 'Roboto', sans-serif, serif; font-size: 13px; line-height: 165%; color: #333333; margin: 0px auto 20px auto; } .keywords span { display: inline-block; padding: 7px 10px 5px 10px; border: 1px solid #cccccc; text-align: center; text-decoration: none; color: #9c9c9c; border-radius: 3px; margin: 0px 3px 3px 0px; cursor: pointer; -webkit-user-select: none; } .news-list { padding-left: 18px; font-size: 18px; line-height: 20px; margin-bottom: 25px; color: #ed1a3b; } .news-list-item { margin-bottom: 3px; } .news-list-item a { font-size: 16px; color: #36c; } .stripe__text { color: black; } .stripe__text, .stripe__card-number, .stripe__card-expiry, .stripe__card-cvc, .stripe__custom-label { display: block; margin-bottom: 20px; font-size: 16px; } .stripe__button-pay { width: 140px; height: 40px; background-color: #3366cc; color: white; } .stripe__error-message { color: #eb1c26; font-size: 14px; } .stripe__custom-element { width: 100%; font-family: 'Roboto', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; color: #32325d; background-color: white; border: solid 1px #ececec; height: 40px; padding: 10px 12px; border-radius: 4px; box-shadow: 0 1px 3px 0 #e6ebf1; -webkit-transition: box-shadow 150ms ease; transition: box-shadow 150ms ease; } :root { --SYSTEM_White: #FFFFFF; --SYSTEM_Gray10: #DFE1E3; --SYSTEM_Gray20: #B0B3B8; --SYSTEM_Gray30: #909090; --SYSTEM_Gray40: #424345; --SYSTEM_Gray50: #242529; --SYSTEM_Gray60: #17181C; --SYSTEM_Gray70: #0F1013; --SYSTEM_Gray80: #090A0C; --SYSTEM_Black: #000000; --SYSTEM_BlackAlt: #090A0C; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Primary: #1A7EFA; --SYSTEM_PrimaryAlt: #2A87F9; --SYSTEM_Gray: #424345; --SYSTEM_GrayAlt: #4e5052; --SYSTEM_Blue: #1A7EFA; --SYSTEM_BlueAlt: #2A87F9; --SYSTEM_Orange: #FF3300; --SYSTEM_OrangeAlt: #FF4E00; --SYSTEM_Red: #E0203C; --SYSTEM_RedAlt: #EE3048; --SYSTEM_Green: #45BD62; --SYSTEM_GreenAlt: #4BD66C; --SYSTEM_Purple: #4E39D1; --SYSTEM_PurpleAlt: #5E48ED; --SYSTEM_Aqua: #2ECFF5; --SYSTEM_AquaAlt: #54DEFF; --SYSTEM_Yellow: #FFCC00; --SYSTEM_YellowAlt: #FFDE00; --SYSTEM_Pink: #CC0383; --SYSTEM_PinkAlt: #DB088E; --SYSTEM_Gold: #D4B665; --SYSTEM_GoldAlt: #EACD80; --SYSTEM_Brighteon: #1B2E5A; --SYSTEM_BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Transparent: rgba(0,0,0,0); --SYSTEM_TransparentDark: rgba(0,0,0,0.75); --SYSTEM_TransparentLight: rgba(255,255,255,0.85); --SYSTEM_TransparentHover: rgba(66,67,68,0.7); --SYSTEM_Shadow: rgba(0,0,0,20); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_TextPrimary: var(--SYSTEM_White); --SYSTEM_TextSecondary: var(--SYSTEM_Gray30); --SYSTEM_TextDisabled: var(--SYSTEM_Gray40); --SYSTEM_TextButton: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Page: var(--SYSTEM_Gray80); --SYSTEM_Icon: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_ToolTip: var(--SYSTEM_Gray40); --SYSTEM_TextToolTip: var(--SYSTEM_Gray10); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Track: var(--SYSTEM_Gray80); --SYSTEM_Thumb: var(--SYSTEM_Gray40); --SYSTEM_BodyTrack: var(--SYSTEM_Gray80); --SYSTEM_BodyThumb: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Input: var(--SYSTEM_Gray50); --SYSTEM_InputBorder: var(--SYSTEM_Gray40); --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); --SYSTEM_InputSelected: var(--SYSTEM_Primary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Privacy: var(--SYSTEM_Gray60); --SYSTEM_PrivacyBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Search: var(--SYSTEM_Gray50); --SYSTEM_SearchBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Helper: var(--SYSTEM_Gray80); --SYSTEM_HelperBorder: var(--SYSTEM_Gray60); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Menu: var(--SYSTEM_Gray60); --SYSTEM_MenuHover: var(--SYSTEM_Gray40); --SYSTEM_MenuBorder: var(--SYSTEM_Gray50); --SYSTEM_Dropdown: var(--SYSTEM_Gray60); --SYSTEM_DropdownHover: var(--SYSTEM_Gray40); --SYSTEM_DropdownBorder: var(--SYSTEM_Gray40); --SYSTEM_Modal: var(--SYSTEM_Gray60); --SYSTEM_ModalHover: var(--SYSTEM_Gray40); --SYSTEM_ModalBorder: var(--SYSTEM_Gray60); --SYSTEM_ModalSection: var(--SYSTEM_Gray70); --SYSTEM_PopUp: var(--SYSTEM_Gray60); --SYSTEM_PopUpHover: var(--SYSTEM_Gray40); --SYSTEM_PopUpBorder: var(--SYSTEM_Gray60); --SYSTEM_Notifications: var(--SYSTEM_Gray70); --SYSTEM_NotificationsHover: var(--SYSTEM_Gray50); --SYSTEM_NotificationsBorder: var(--SYSTEM_Gray50); --SYSTEM_Button: var(--SYSTEM_Primary); --SYSTEM_ButtonHover: var(--SYSTEM_PrimaryAlt); --SYSTEM_ButtonBorder: var(--SYSTEM_Gray40); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Masthead: rgba(9,10,12,0.85); --SYSTEM_MastheadHover: var(--SYSTEM_Gray40); --SYSTEM_MastheadBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Footer: var(--SYSTEM_Gray80); --SYSTEM_FooterHover: var(--SYSTEM_Gray50); --SYSTEM_FooterBorder: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Duration: rgba(0,0,0,0.85); --SYSTEM_StatBox: var(--SYSTEM_Gray50); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Tag: var(--SYSTEM_Gray50); --SYSTEM_TagHover: var(--SYSTEM_Gray40); --SYSTEM_TagText: var(--SYSTEM_White); --SYSTEM_TagFollowing: var(--SYSTEM_White); --SYSTEM_TagFollowingHover: var(--SYSTEM_White); --SYSTEM_TagFollowingText: var(--SYSTEM_Black); --SYSTEM_TagLive: var(--SYSTEM_Red); --SYSTEM_TagLiveHover: var(--SYSTEM_RedAlt); --SYSTEM_TagLiveText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_InputText: var(--SYSTEM_TextPrimary); --SYSTEM_InputPlaceholder: var(--SYSTEM_TextSecondary); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_UI: var(--SYSTEM_Primary); --SYSTEM_UIText: var(--SYSTEM_White); /* /////////////////////////////////////////////////////////////// */ --SYSTEM_Section: var(--SYSTEM_Transparent); --SYSTEM_SectionBorder: var(--SYSTEM_Gray50); --LIGHT_White: #FFFFFF; --LIGHT_Gray10: #F7F7F9; --LIGHT_Gray20: #ECECEC; --LIGHT_Gray30: #DBDBDB; --LIGHT_Gray40: #828282; --LIGHT_Gray50: #666666; --LIGHT_Gray60: #333333; --LIGHT_Gray70: #171819; --LIGHT_Gray80: #121212; --LIGHT_Black: #000000; --LIGHT_BlackAlt: #121212; --LIGHT_Primary: #287CED; --LIGHT_PrimaryAlt: #3399FF; --LIGHT_Gray: #B0B3B8; --LIGHT_GrayAlt: #BABCBF; --LIGHT_Blue: #1A94FA; --LIGHT_BlueAlt: #41A5FC; --LIGHT_Orange: #FF3300; --LIGHT_OrangeAlt: #FF4E00; --LIGHT_Red: #E0203C; --LIGHT_RedAlt: #EE3048; --LIGHT_Green: #219150; --LIGHT_GreenAlt: #24AF5F; --LIGHT_Purple: #4E39D1; --LIGHT_PurpleAlt: #5E48ED; --LIGHT_Aqua: #2ECFF5; --LIGHT_AquaAlt: #54DEFF; --LIGHT_Yellow: #FFCC00; --LIGHT_YellowAlt: #FFDE00; --LIGHT_Pink: #CC0383; --LIGHT_PinkAlt: #DB088E; --LIGHT_Gold: #D4B665; --LIGHT_GoldAlt: #EACD80; --LIGHT_Brighteon: #1B2E5A; --LIGHT_BrighteonAlt: #213668; --LIGHT_Transparent: rgba(0,0,0,0); --LIGHT_TransparentDark: rgba(0,0,0,0.85); --LIGHT_TransparentLight: rgba(255,255,255,0.85); --LIGHT_TransparentHover: rgba(0,0,0,0.08); --LIGHT_Shadow: rgba(0,0,0,0.4); --LIGHT_TextPrimary: var(--LIGHT_Gray80); --LIGHT_TextSecondary: var(--LIGHT_Gray40); --LIGHT_TextDisabled: var(--LIGHT_Gray40); --LIGHT_TextButton: var(--LIGHT_White); --LIGHT_Page: var(--LIGHT_White); --LIGHT_Icon: var(--LIGHT_Gray70); --LIGHT_ToolTip: var(--LIGHT_Gray30); --LIGHT_TextToolTip: var(--LIGHT_Gray40); --LIGHT_Track: var(--LIGHT_Gray20); --LIGHT_Thumb: var(--LIGHT_Gray30); --LIGHT_BodyTrack: var(--LIGHT_Gray20); --LIGHT_BodyThumb: var(--LIGHT_Gray30); --LIGHT_Input: var(--LIGHT_Gray10); --LIGHT_InputBorder: var(--LIGHT_Gray30); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_InputSelected: var(--LIGHT_Primary); --LIGHT_Privacy: var(--LIGHT_Gray60); --LIGHT_PrivacyBorder: var(--LIGHT_Gray50); --LIGHT_Search: var(--LIGHT_Gray10); --LIGHT_SearchBorder: var(--LIGHT_Gray30); --LIGHT_Helper: var(--LIGHT_White); --LIGHT_HelperBorder: var(--LIGHT_Gray20); --LIGHT_Menu: var(--LIGHT_White); --LIGHT_MenuHover: var(--LIGHT_Gray10); --LIGHT_MenuBorder: var(--LIGHT_Gray20); --LIGHT_Dropdown: var(--LIGHT_White); --LIGHT_DropdownHover: var(--LIGHT_Gray10); --LIGHT_DropdownBorder: var(--LIGHT_Gray10); --LIGHT_Modal: var(--LIGHT_White); --LIGHT_ModalHover: var(--LIGHT_Gray10); --LIGHT_ModalBorder: var(--LIGHT_Gray20); --LIGHT_ModalSection: var(--LIGHT_Gray20); --LIGHT_PopUp: var(--LIGHT_White); --LIGHT_PopUpHover: var(--LIGHT_Gray10); --LIGHT_PopUpBorder: var(--LIGHT_Gray20); --LIGHT_Notifications: var(--LIGHT_White); --LIGHT_NotificationsHover: var(--LIGHT_Gray10); --LIGHT_NotificationsBorder: var(--LIGHT_Gray20); --LIGHT_Button: var(--LIGHT_Primary); --LIGHT_ButtonHover: var(--LIGHT_PrimaryAlt); --LIGHT_ButtonBorder: var(--LIGHT_Gray20); --LIGHT_Masthead: rgba(255,255,255,0.85); --LIGHT_MastheadHover: var(--LIGHT_Gray10); --LIGHT_MastheadBorder: var(--LIGHT_Gray20); --LIGHT_Footer: var(--LIGHT_White); --LIGHT_FooterHover: var(--LIGHT_Gray10); --LIGHT_FooterBorder: var(--LIGHT_Gray20); --LIGHT_Duration: rgba(0,0,0,0.85); --LIGHT_StatBox: var(--LIGHT_Gray20); --LIGHT_Tag: var(--LIGHT_Gray20); --LIGHT_TagHover: var(--LIGHT_Gray30); --LIGHT_TagText: var(--LIGHT_Gray40); --LIGHT_TagFollowing: var(--LIGHT_Brighteon); --LIGHT_TagFollowingHover: var(--LIGHT_BrighteonAlt); --LIGHT_TagFollowingText: var(--LIGHT_White); --LIGHT_TagLive: var(--LIGHT_Red); --LIGHT_TagLiveHover: var(--LIGHT_RedAlt); --LIGHT_TagLiveText: var(--LIGHT_White); --LIGHT_InputText: var(--LIGHT_TextPrimary); --LIGHT_InputPlaceholder: var(--LIGHT_TextSecondary); --LIGHT_UI: var(--LIGHT_Primary); --LIGHT_UIText: var(--LIGHT_White); --LIGHT_Section: var(--LIGHT_Transparent); --LIGHT_SectionBorder: var(--LIGHT_Gray20); --DARK_White: #FFFFFF; --DARK_Gray10: #DFE1E3; --DARK_Gray20: #B0B3B8; --DARK_Gray30: #909090; --DARK_Gray40: #424345; --DARK_Gray50: #242529; --DARK_Gray60: #17181C; --DARK_Gray70: #0F1013; --DARK_Gray80: #090A0C; --DARK_Black: #000000; --DARK_BlackAlt: #090A0C; --DARK_Primary: #1A7EFA; --DARK_PrimaryAlt: #2A87F9; --DARK_Gray: #424345; --DARK_GrayAlt: #4e5052; --DARK_Blue: #1A7EFA; --DARK_BlueAlt: #2A87F9; --DARK_Orange: #FF3300; --DARK_OrangeAlt: #FF4E00; --DARK_Red: #E0203C; --DARK_RedAlt: #EE3048; --DARK_Green: #45BD62; --DARK_GreenAlt: #4BD66C; --DARK_Purple: #4E39D1; --DARK_PurpleAlt: #5E48ED; --DARK_Aqua: #2ECFF5; --DARK_AquaAlt: #54DEFF; --DARK_Yellow: #FFCC00; --DARK_YellowAlt: #FFDE00; --DARK_Pink: #CC0383; --DARK_PinkAlt: #DB088E; --DARK_Gold: #D4B665; --DARK_GoldAlt: #EACD80; --DARK_Brighteon: #1B2E5A; --DARK_BrighteonAlt: #213668; --DARK_Transparent: rgba(0,0,0,0); --DARK_TransparentDark: rgba(0,0,0,0.75); --DARK_TransparentLight: rgba(255,255,255,0.85); --DARK_TransparentHover: rgba(66,67,68,0.7); --DARK_Shadow: rgba(0,0,0,20); --DARK_TextPrimary: var(--DARK_White); --DARK_TextSecondary: var(--DARK_Gray30); --DARK_TextDisabled: var(--DARK_Gray40); --DARK_TextButton: var(--DARK_White); --DARK_Page: var(--DARK_Gray80); --DARK_Icon: var(--DARK_White); --DARK_ToolTip: var(--DARK_Gray40); --DARK_TextToolTip: var(--DARK_Gray10); --DARK_Track: var(--DARK_Gray80); --DARK_Thumb: var(--DARK_Gray40); --DARK_BodyTrack: var(--DARK_Gray80); --DARK_BodyThumb: var(--DARK_Gray40); --DARK_Input: var(--DARK_Gray50); --DARK_InputBorder: var(--DARK_Gray40); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_InputSelected: var(--DARK_Primary); --DARK_Privacy: var(--DARK_Gray60); --DARK_PrivacyBorder: var(--DARK_Gray50); --DARK_Search: var(--DARK_Gray50); --DARK_SearchBorder: var(--DARK_Gray50); --DARK_Helper: var(--DARK_Gray80); --DARK_HelperBorder: var(--DARK_Gray60); --DARK_Menu: var(--DARK_Gray60); --DARK_MenuHover: var(--DARK_Gray40); --DARK_MenuBorder: var(--DARK_Gray50); --DARK_Dropdown: var(--DARK_Gray60); --DARK_DropdownHover: var(--DARK_Gray40); --DARK_DropdownBorder: var(--DARK_Gray40); --DARK_Modal: var(--DARK_Gray60); --DARK_ModalHover: var(--DARK_Gray40); --DARK_ModalBorder: var(--DARK_Gray60); --DARK_ModalSection: var(--DARK_Gray70); --DARK_PopUp: var(--DARK_Gray60); --DARK_PopUpHover: var(--DARK_Gray40); --DARK_PopUpBorder: var(--DARK_Gray60); --DARK_Notifications: var(--DARK_Gray70); --DARK_NotificationsHover: var(--DARK_Gray50); --DARK_NotificationsBorder: var(--DARK_Gray50); --DARK_Button: var(--DARK_Primary); --DARK_ButtonHover: var(--DARK_PrimaryAlt); --DARK_ButtonBorder: var(--DARK_Gray40); --DARK_Masthead: rgba(9,10,12,0.85); --DARK_MastheadHover: var(--DARK_Gray40); --DARK_MastheadBorder: var(--DARK_Gray50); --DARK_Footer: var(--DARK_Gray80); --DARK_FooterHover: var(--DARK_Gray50); --DARK_FooterBorder: var(--DARK_Gray50); --DARK_Duration: rgba(0,0,0,0.85); --DARK_StatBox: var(--DARK_Gray50); --DARK_Tag: var(--DARK_Gray50); --DARK_TagHover: var(--DARK_Gray40); --DARK_TagText: var(--DARK_White); --DARK_TagFollowing: var(--DARK_White); --DARK_TagFollowingHover: var(--DARK_White); --DARK_TagFollowingText: var(--DARK_Black); --DARK_TagLive: var(--DARK_Red); --DARK_TagLiveHover: var(--DARK_RedAlt); --DARK_TagLiveText: var(--DARK_White); --DARK_InputText: var(--DARK_TextPrimary); --DARK_InputPlaceholder: var(--DARK_TextSecondary); --DARK_UI: var(--DARK_Primary); --DARK_UIText: var(--DARK_White); --DARK_Section: var(--DARK_Transparent); --DARK_SectionBorder: var(--DARK_Gray50); --DIM_White: #FFFFFF; --DIM_Gray10: #DFE1E3; --DIM_Gray20: #B0B3B8; --DIM_Gray30: #3E5F7D; --DIM_Gray40: #233B51; --DIM_Gray50: #0F2B44; --DIM_Gray60: #0A2034; --DIM_Gray70: #061726; --DIM_Gray80: #04111C; --DIM_Black: #000000; --DIM_BlackAlt: #030B16; --DIM_Primary: #204ECF; --DIM_PrimaryAlt: #2A5AE1; --DIM_Gray: #45586D; --DIM_GrayAlt: #4d6178; --DIM_Blue: #204ECF; --DIM_BlueAlt: #2A5AE1; --DIM_Orange: #FF3300; --DIM_OrangeAlt: #FF4E00; --DIM_Red: #E0203C; --DIM_RedAlt: #EE3048; --DIM_Green: #45BD62; --DIM_GreenAlt: #4BD66C; --DIM_Purple: #4E39D1; --DIM_PurpleAlt: #5E48ED; --DIM_Aqua: #2ECFF5; --DIM_AquaAlt: #54DEFF; --DIM_Yellow: #FFCC00; --DIM_YellowAlt: #FFDE00; --DIM_Pink: #CC0383; --DIM_PinkAlt: #DB088E; --DIM_Gold: #D4B665; --DIM_GoldAlt: #EACD80; --DIM_Brighteon: #1B2E5A; --DIM_BrighteonAlt: #213668; --DIM_Transparent: rgba(0,0,0,0); --DIM_TransparentDark: rgba(0,0,0,0.85); --DIM_TransparentLight: rgba(255,255,255,0.85); --DIM_TransparentHover: rgba(30,60,90,0.4); --DIM_Shadow: rgba(0,0,0,20); --DIM_TextPrimary: var(--DIM_White); --DIM_TextSecondary: var(--DIM_Gray20); --DIM_TextDisabled: var(--DIM_Gray40); --DIM_TextButton: var(--DIM_White); --DIM_Page: var(--DIM_Gray70); --DIM_Icon: var(--DIM_White); --DIM_ToolTip: var(--DIM_Gray40); --DIM_TextToolTip: var(--DIM_Gray10); --DIM_Track: var(--DIM_Gray80); --DIM_Thumb: var(--DIM_Gray40); --DIM_BodyTrack: var(--DIM_Gray80); --DIM_BodyThumb: var(--DIM_Gray40); --DIM_Input: var(--DIM_Gray50); --DIM_InputBorder: var(--DIM_Gray40); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_InputSelected: var(--DIM_Primary); --DIM_Privacy: var(--DIM_Gray60); --DIM_PrivacyBorder: var(--DIM_Gray50); --DIM_Search: var(--DIM_Gray60); --DIM_SearchBorder: var(--DIM_Gray50); --DIM_Helper: var(--DIM_Gray80); --DIM_HelperBorder: var(--DIM_Gray60); --DIM_Menu: var(--DIM_Gray70); --DIM_MenuHover: var(--DIM_Gray60); --DIM_MenuBorder: var(--DIM_Gray50); --DIM_Dropdown: var(--DIM_Gray60); --DIM_DropdownHover: var(--DIM_Gray50); --DIM_DropdownBorder: var(--DIM_Gray50); --DIM_Modal: var(--DIM_Gray60); --DIM_ModalHover: var(--DIM_Gray50); --DIM_ModalBorder: var(--DIM_Gray50); --DIM_ModalSection: var(--DIM_Gray80); --DIM_PopUp: var(--DIM_Gray60); --DIM_PopUpHover: var(--DIM_Gray50); --DIM_PopUpBorder: var(--DIM_Gray50); --DIM_Notifications: var(--DIM_Gray60); --DIM_NotificationsHover: var(--DIM_Gray50); --DIM_NotificationsBorder: var(--DIM_Gray50); --DIM_Button: var(--DIM_Primary); --DIM_ButtonHover: var(--DIM_PrimaryAlt); --DIM_ButtonBorder: var(--DIM_Gray40); --DIM_Masthead: rgba(6,23,38,0.85); --DIM_MastheadHover: var(--DIM_Gray60); --DIM_MastheadBorder: var(--DIM_Gray50); --DIM_Footer: var(--DIM_Gray70); --DIM_FooterHover: var(--DIM_Gray60); --DIM_FooterBorder: var(--DIM_Gray50); --DIM_Duration: rgba(0,0,0,0.85); --DIM_StatBox: var(--DIM_Gray50); --DIM_Tag: var(--DIM_Gray50); --DIM_TagHover: var(--DIM_Gray40); --DIM_TagText: var(--DIM_White); --DIM_TagFollowing: var(--DIM_White); --DIM_TagFollowingHover: var(--DIM_White); --DIM_TagFollowingText: var(--DIM_Black); --DIM_TagLive: var(--DIM_Red); --DIM_TagLiveHover: var(--DIM_RedAlt); --DIM_TagLiveText: var(--DIM_White); --DIM_InputText: var(--DIM_TextPrimary); --DIM_InputPlaceholder: var(--DIM_TextSecondary); --DIM_UI: var(--DIM_Primary); --DIM_UIText: var(--DIM_White); --DIM_Section: var(--DIM_Transparent); --DIM_SectionBorder: var(--DIM_Gray40); --NIGHT_White: #FFFFFF; --NIGHT_Gray10: #B0B3B8; --NIGHT_Gray20: #4E4B68; --NIGHT_Gray30: #312D4D; --NIGHT_Gray40: #26233E; --NIGHT_Gray50: #1B192E; --NIGHT_Gray60: #100E1F; --NIGHT_Gray70: #090813; --NIGHT_Gray80: #070A0D; --NIGHT_Black: #000000; --NIGHT_BlackAlt: #070A0D; --NIGHT_Primary: #5E48ED; --NIGHT_PrimaryAlt: #7F6CFA; --NIGHT_Gray: #3B375D; --NIGHT_GrayAlt: #433f68; --NIGHT_Blue: #1994E8; --NIGHT_BlueAlt: #31A5F4; --NIGHT_Orange: #FF3300; --NIGHT_OrangeAlt: #FF4E00; --NIGHT_Red: #E0203C; --NIGHT_RedAlt: #EE3048; --NIGHT_Green: #45BD62; --NIGHT_GreenAlt: #4BD66C; --NIGHT_Purple: #4E39D1; --NIGHT_PurpleAlt: #5E48ED; --NIGHT_Aqua: #2ECFF5; --NIGHT_AquaAlt: #54DEFF; --NIGHT_Yellow: #FFCC00; --NIGHT_YellowAlt: #FFDE00; --NIGHT_Pink: #CC0383; --NIGHT_PinkAlt: #DB088E; --NIGHT_Gold: #D4B665; --NIGHT_GoldAlt: #EACD80; --NIGHT_Brighteon: #1B2E5A; --NIGHT_BrighteonAlt: #213668; --NIGHT_Transparent: rgba(0,0,0,0); --NIGHT_TransparentDark: rgba(0,0,0,0.85); --NIGHT_TransparentLight: rgba(255,255,255,0.85); --NIGHT_TransparentHover: rgba(49,45,77,0.7); --NIGHT_Shadow: rgba(0,0,0,20); --NIGHT_TextPrimary: var(--NIGHT_White); --NIGHT_TextSecondary: var(--NIGHT_Gray10); --NIGHT_TextDisabled: var(--NIGHT_Gray40); --NIGHT_TextButton: var(--NIGHT_White); --NIGHT_Page: var(--NIGHT_Gray50); --NIGHT_Icon: var(--NIGHT_White); --NIGHT_ToolTip: var(--NIGHT_Gray40); --NIGHT_TextToolTip: var(--NIGHT_Gray10); --NIGHT_Track: var(--NIGHT_Gray80); --NIGHT_Thumb: var(--NIGHT_Gray30); --NIGHT_BodyTrack: var(--NIGHT_Gray80); --NIGHT_BodyThumb: var(--NIGHT_Gray30); --NIGHT_Input: var(--NIGHT_Gray30); --NIGHT_InputBorder: var(--NIGHT_Gray20); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_InputSelected: var(--NIGHT_Primary); --NIGHT_Privacy: var(--NIGHT_Gray60); --NIGHT_PrivacyBorder: var(--NIGHT_Gray50); --NIGHT_Search: var(--NIGHT_Gray30); --NIGHT_SearchBorder: var(--NIGHT_Gray40); --NIGHT_Helper: var(--NIGHT_Gray80); --NIGHT_HelperBorder: var(--NIGHT_Gray60); --NIGHT_Menu: var(--NIGHT_Gray40); --NIGHT_MenuHover: var(--NIGHT_Gray30); --NIGHT_MenuBorder: var(--NIGHT_Gray30); --NIGHT_Dropdown: var(--NIGHT_Gray40); --NIGHT_DropdownHover: var(--NIGHT_Gray30); --NIGHT_DropdownBorder: var(--NIGHT_Gray30); --NIGHT_Modal: var(--NIGHT_Gray40); --NIGHT_ModalHover: var(--NIGHT_Gray30); --NIGHT_ModalBorder: var(--NIGHT_Gray30); --NIGHT_ModalSection: var(--NIGHT_Gray50); --NIGHT_PopUp: var(--NIGHT_Gray40); --NIGHT_PopUpHover: var(--NIGHT_Gray30); --NIGHT_PopUpBorder: var(--NIGHT_Gray30); --NIGHT_Notifications: var(--NIGHT_Gray40); --NIGHT_NotificationsHover: var(--NIGHT_Gray30); --NIGHT_NotificationsBorder: var(--NIGHT_Gray30); --NIGHT_Button: var(--NIGHT_Primary); --NIGHT_ButtonHover: var(--NIGHT_PrimaryAlt); --NIGHT_ButtonBorder: var(--NIGHT_Gray40); --NIGHT_Masthead: rgba(27,25,46,0.85); --NIGHT_MastheadHover: var(--NIGHT_Gray40); --NIGHT_MastheadBorder: var(--NIGHT_Gray40); --NIGHT_Footer: var(--NIGHT_Gray50); --NIGHT_FooterHover: var(--NIGHT_Gray40); --NIGHT_FooterBorder: var(--NIGHT_Gray40); --NIGHT_Duration: rgba(0,0,0,0.85); --NIGHT_StatBox: var(--NIGHT_Gray60); --NIGHT_Tag: var(--NIGHT_Gray40); --NIGHT_TagHover: var(--NIGHT_Gray30); --NIGHT_TagText: var(--NIGHT_White); --NIGHT_TagFollowing: var(--NIGHT_White); --NIGHT_TagFollowingHover: var(--NIGHT_White); --NIGHT_TagFollowingText: var(--NIGHT_Black); --NIGHT_TagLive: var(--NIGHT_Red); --NIGHT_TagLiveHover: var(--NIGHT_RedAlt); --NIGHT_TagLiveText: var(--NIGHT_White); --NIGHT_InputText: var(--NIGHT_TextPrimary); --NIGHT_InputPlaceholder: var(--NIGHT_TextSecondary); --NIGHT_UI: var(--NIGHT_Primary); --NIGHT_UIText: var(--NIGHT_White); --NIGHT_Section: var(--NIGHT_Transparent); --NIGHT_SectionBorder: var(--NIGHT_Gray40); --Promo: #4646FE; --PromoError: #FBFB62; } @media (prefers-color-scheme: dark) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } } @media (prefers-color-scheme: light) { :root .theme__system { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ } :root .theme__system .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .AuthBody { background-color: var(--Gray10); } :root .theme__system .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } :root .theme__system .ButtonTransparent:hover { color: var(--Gray40) !important; } :root .theme__system .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } :root .theme__system .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--White) !important; color: var(--TextPrimary) !important; } :root .theme__system .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } :root .theme__system .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } :root .theme__system .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } :root .theme__system .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } :root .theme__system .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } :root .theme__system .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; } } /* /////////////////////////////////////////////////////////////// */ :root .theme__dark { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #909090; --Gray40: #424345; --Gray50: #242529; --Gray60: #17181c; --Gray70: #0f1013; --Gray80: #090a0c; --Black: #000000; --BlackAlt: #090a0c; /* /////////////////////////////////////////////////////////////// */ --Primary: #1a7efa; --PrimaryAlt: #2a87f9; --Gray: #424345; --GrayAlt: #4e5052; --Blue: #1a7efa; --BlueAlt: #2a87f9; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; --Promo: #4646FE; --PromoError: #FBFB62; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.75); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(66, 67, 68, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray30); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray80); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray50); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray60); --MenuHover: var(--Gray40); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray40); --DropdownBorder: var(--Gray40); --Modal: var(--Gray60); --ModalHover: var(--Gray40); --ModalBorder: var(--Gray60); --ModalSection: var(--Gray70); --PopUp: var(--Gray60); --PopUpHover: var(--Gray40); --PopUpBorder: var(--Gray60); --Notifications: var(--Gray70); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(9, 10, 12, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray80); --FooterHover: var(--Gray50); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray50); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dark .TagsNavLeft { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .TagsNavRight { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%) !important; } .theme__dark .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%) !important; } .theme__dark .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%) !important; } .theme__dark .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #090a0c 0%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 100%); } .theme__dark .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #090a0c 40%, rgba(9, 10, 12, 0) 100%); } .theme__dark .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(9, 10, 12, 0) 0%, #090a0c 60%); } .theme__dark .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__dim { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #dfe1e3; --Gray20: #b0b3b8; --Gray30: #3e5f7d; --Gray40: #233b51; --Gray50: #0f2b44; --Gray60: #0a2034; --Gray70: #061726; --Gray80: #04111c; --Black: #000000; --BlackAlt: #030b16; /* /////////////////////////////////////////////////////////////// */ --Primary: #204ecf; --PrimaryAlt: #2a5ae1; --Gray: #45586d; --GrayAlt: #4d6178; --Blue: #204ecf; --BlueAlt: #2a5ae1; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(30, 60, 90, 0.4); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray20); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray70); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray40); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray50); --InputBorder: var(--Gray40); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray60); --SearchBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray70); --MenuHover: var(--Gray60); --MenuBorder: var(--Gray50); --Dropdown: var(--Gray60); --DropdownHover: var(--Gray50); --DropdownBorder: var(--Gray50); --Modal: var(--Gray60); --ModalHover: var(--Gray50); --ModalBorder: var(--Gray50); --ModalSection: var(--Gray80); --PopUp: var(--Gray60); --PopUpHover: var(--Gray50); --PopUpBorder: var(--Gray50); --Notifications: var(--Gray60); --NotificationsHover: var(--Gray50); --NotificationsBorder: var(--Gray50); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(6, 23, 38, 0.85); --MastheadHover: var(--Gray60); --MastheadBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray70); --FooterHover: var(--Gray60); --FooterBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray50); --TagHover: var(--Gray40); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray50); --PlaylistHover: var(--Gray60); --PlaylistItemHover: var(--Gray50); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__dim .TagsNavLeft { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .TagsNavRight { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim input.ButtonSubmitDefault[type=submit] { background-color: #204ECF !important; } .theme__dim .InputFieldDefault { border-color: #233B51 !important; background-color: #0F2B44 !important; color: #FFFFFF !important; } .theme__dim .InputFieldDefault:focus { border-color: #204ECF !important; outline-color: #204ECF !important; } .theme__dim .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #061726 0%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 100%); } .theme__dim .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #061726 40%, rgba(6, 23, 38, 0) 100%); } .theme__dim .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(6, 23, 38, 0) 0%, #061726 60%); } .theme__dim .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ :root .theme__light { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #f7f7f9; --Gray20: #ececec; --Gray30: #dbdbdb; --Gray40: #828282; --Gray50: #666666; --Gray60: #333333; --Gray70: #171819; --Gray80: #121212; --Black: #000000; --BlackAlt: #121212; /* /////////////////////////////////////////////////////////////// */ --Primary: #287ced; --PrimaryAlt: #3399ff; --Gray: #b0b3b8; --GrayAlt: #babcbf; --Blue: #1a94fa; --BlueAlt: #41a5fc; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #219150; --GreenAlt: #24af5f; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(0, 0, 0, 0.08); --Shadow: rgba(0, 0, 0, 0.4); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--Gray80); --TextSecondary: var(--Gray40); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--White); --Icon: var(--Gray70); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray30); --TextToolTip: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray20); --Thumb: var(--Gray30); --BodyTrack: var(--Gray20); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray10); --InputBorder: var(--Gray30); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray10); --SearchBorder: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--White); --HelperBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--White); --MenuHover: var(--Gray10); --MenuBorder: var(--Gray20); --Dropdown: var(--White); --DropdownHover: var(--Gray10); --DropdownBorder: var(--Gray10); --Modal: var(--White); --ModalHover: var(--Gray10); --ModalBorder: var(--Gray20); --ModalSection: var(--Gray20); --PopUp: var(--White); --PopUpHover: var(--Gray10); --PopUpBorder: var(--Gray20); --Notifications: var(--White); --NotificationsHover: var(--Gray10); --NotificationsBorder: var(--Gray20); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(255, 255, 255, 0.85); --MastheadHover: var(--Gray10); --MastheadBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--White); --FooterHover: var(--Gray10); --FooterBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray20); --TagHover: var(--Gray30); --TagText: var(--Gray60); --TagFollowing: var(--Brighteon); --TagFollowingHover: var(--BrighteonAlt); --TagFollowingText: var(--White); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray20); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray60); --ArticleHover: var(--Gray80); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--White); --NewsletterBorder: var(--Gray20); --PlaylistBorder: var(--Gray20); --PlaylistHover: var(--Gray10); --PlaylistItemHover: var(--Gray20); --Premium: var(--Gray10); --PremiumBorder: var(--Gray20); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__light { /* /////////////////////////////////////////////////////////////// */ } .theme__light .TagsNavLeft { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .TagsNavRight { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .CardsNavLeft .CardsBackground { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .AuthBody { background-color: var(--Gray10); } .theme__light .ButtonTransparent { background-color: var(--Transparent) !important; color: var(--Gray40) !important; } .theme__light .ButtonTransparent:hover { color: var(--Gray40) !important; } .theme__light .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--BorderAlt); color: var(--TextPrimary) !important; } .theme__light .ButtonTransBorder:hover { background-color: var(--Border) !important; color: var(--TextButton) !important; color: var(--Gray40) !important; } .theme__light .PrivacyNotice .ButtonTransBorder { background-color: var(--Transparent) !important; border-color: var(--TextPrimary) !important; color: var(--TextPrimary) !important; } .theme__light .PrivacyNotice .ButtonTransBorder:hover { color: var(--Gray40) !important; border-color: var(--Gray40) !important; } .theme__light .InputFieldDefault { border-color: #ececec !important; background-color: #ffffff !important; color: #121212 !important; } .theme__light .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); } .theme__light .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .theme__light .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .theme__light .PrivacyBox .PrivacyTable .PrivacyNoticeHeadline { color: var(--White); } .theme__light .PrivacyBox .PrivacyTable .ButtonPrivacy { color: var(--White) !important; border-color: var(--White) !important; } /* /////////////////////////////////////////////////////////////// */ :root .theme__night { /* /////////////////////////////////////////////////////////////// */ --White: #ffffff; --Gray10: #b0b3b8; --Gray20: #4e4b68; --Gray30: #312d4d; --Gray40: #26233e; --Gray50: #1b192e; --Gray60: #100e1f; --Gray70: #090813; --Gray80: #070a0d; --Black: #000000; --BlackAlt: #070a0d; /* /////////////////////////////////////////////////////////////// */ --Primary: #5e48ed; --PrimaryAlt: #7f6cfa; --Gray: #3b375d; --GrayAlt: #433f68; --Blue: #5E48ED; --BlueAlt: #31a5f4; --Orange: #ff3300; --OrangeAlt: #ff4e00; --Red: #e0203c; --RedAlt: #ee3048; --Green: #45bd62; --GreenAlt: #4bd66c; --Purple: #4e39d1; --PurpleAlt: #5e48ed; --Aqua: #2ecff5; --AquaAlt: #54deff; --Yellow: #ffcc00; --YellowAlt: #ffde00; --Pink: #cc0383; --PinkAlt: #db088e; --Gold: #d4b665; --GoldAlt: #eacd80; --Brighteon: #1b2e5a; --BrighteonAlt: #213668; /* /////////////////////////////////////////////////////////////// */ --Transparent: rgba(0, 0, 0, 0); --TransparentDark: rgba(0, 0, 0, 0.85); --TransparentLight: rgba(255, 255, 255, 0.85); --TransparentHover: rgba(49, 45, 77, 0.7); --Shadow: rgba(0, 0, 0, 20); /* /////////////////////////////////////////////////////////////// */ --TextPrimary: var(--White); --TextSecondary: var(--Gray10); --TextDisabled: var(--Gray40); --TextButton: var(--White); /* /////////////////////////////////////////////////////////////// */ --Page: var(--Gray50); --Icon: var(--White); /* /////////////////////////////////////////////////////////////// */ --ToolTip: var(--Gray40); --TextToolTip: var(--Gray10); /* /////////////////////////////////////////////////////////////// */ --Track: var(--Gray80); --Thumb: var(--Gray30); --BodyTrack: var(--Gray80); --BodyThumb: var(--Gray30); /* /////////////////////////////////////////////////////////////// */ --Input: var(--Gray30); --InputBorder: var(--Gray20); --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); --InputSelected: var(--Primary); /* /////////////////////////////////////////////////////////////// */ --Privacy: var(--Gray60); --PrivacyBorder: var(--Gray50); /* /////////////////////////////////////////////////////////////// */ --Search: var(--Gray30); --SearchBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Helper: var(--Gray80); --HelperBorder: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Menu: var(--Gray40); --MenuHover: var(--Gray30); --MenuBorder: var(--Gray30); --Dropdown: var(--Gray40); --DropdownHover: var(--Gray30); --DropdownBorder: var(--Gray30); --Modal: var(--Gray40); --ModalHover: var(--Gray30); --ModalBorder: var(--Gray30); --ModalSection: var(--Gray50); --PopUp: var(--Gray40); --PopUpHover: var(--Gray30); --PopUpBorder: var(--Gray30); --Notifications: var(--Gray40); --NotificationsHover: var(--Gray30); --NotificationsBorder: var(--Gray30); --Button: var(--Primary); --ButtonHover: var(--PrimaryAlt); --ButtonBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Masthead: rgba(27, 25, 46, 0.85); --MastheadHover: var(--Gray40); --MastheadBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Footer: var(--Gray50); --FooterHover: var(--Gray40); --FooterBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Duration: rgba(0, 0, 0, 0.85); --StatBox: var(--Gray60); /* /////////////////////////////////////////////////////////////// */ --Tag: var(--Gray40); --TagHover: var(--Gray30); --TagText: var(--White); --TagFollowing: var(--White); --TagFollowingHover: var(--White); --TagFollowingText: var(--Black); --TagLive: var(--Red); --TagLiveHover: var(--RedAlt); --TagLiveText: var(--White); /* /////////////////////////////////////////////////////////////// */ --InputText: var(--TextPrimary); --InputPlaceholder: var(--TextSecondary); /* /////////////////////////////////////////////////////////////// */ --UI: var(--Primary); --UIText: var(--White); /* /////////////////////////////////////////////////////////////// */ --Section: var(--Transparent); --SectionBorder: var(--Gray40); /* /////////////////////////////////////////////////////////////// */ --Article: var(--Gray10); --ArticleHover: var(--White); /* /////////////////////////////////////////////////////////////// */ --Newsletter: var(--Gray60); --NewsletterBorder: var(--Gray40); --PlaylistBorder: var(--Gray30); --PlaylistHover: var(--Gray40); --PlaylistItemHover: var(--Gray30); --Premium: var(--Gray60); --PremiumBorder: var(--Gray40); } /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////// */ /* same color as masthead */ .theme__night .TagsNavLeft { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .TagsNavRight { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .CardsNavLeft .CardsBackground { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .CardsNavRight .CardsBackground { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night input.ButtonSubmitDefault[type=submit] { background-color: #5E48ED !important; } .theme__night .InputFieldDefault { border-color: #4E4B68 !important; background-color: #312D4D !important; color: #FFFFFF !important; } .theme__night .InputFieldDefault:focus { border-color: #5E48ED !important; outline-color: #5E48ED !important; } .theme__night .ScrollNavLeft .ScrollNavBackgroundLarge { background: linear-gradient(to right, #1b192e 0%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundLarge { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 100%); } .theme__night .ScrollNavLeft .ScrollNavBackgroundSmall { background: linear-gradient(to right, #1b192e 40%, rgba(27, 25, 46, 0) 100%); } .theme__night .ScrollNavRight .ScrollNavBackgroundSmall { background: linear-gradient(to right, rgba(27, 25, 46, 0) 0%, #1b192e 60%); } .theme__night .PrivacyBox .PrivacyTable .ButtonPrivacy { border-color: var(--White); } /* /////////////////////////////////////////////////////////////// */ .video-panel { background-color: #000; display: flex; flex-wrap: wrap; } .video-panel__message, .video-panel__cta { padding: 15px; } .video-panel__message { cursor: default; display: flex; flex-basis: 0; flex-grow: 1; max-width: 100%; } .video-panel__paragraph { margin: 0; align-self: center; } .video-panel__text--watch { font-weight: bold; color: white; text-transform: uppercase; font-size: 20px; padding-right: 15px; } .video-panel__text--buy { color: #999; font-size: 12px; } .video-panel__cta__button { background-color: #3366cc; text-transform: uppercase; color: white; border: none; font-weight: bold; font-size: 12px; padding: 12px 15px; } .video-panel__email-input { display: block; width: 100%; max-width: 350px; padding: 4px; border: solid 1px #ececec; font-size: 14px; margin-bottom: 10px; } @media (min-width: 768px) { .video-panel__cta { text-align: right; } } @media (max-width: 768px) { .video-panel { flex-direction: column; } .video-panel__cta { padding-top: 0; } } .video-panel__small-text { font-size: 12px; } .channel-video-actions { margin-left: 8px; } .channel-video-actions .btnLogo { height: 16px; margin-right: 5px; } .channel-video-actions .btn-dropdown-caret { margin-right: 5px; } .channel-video-actions .action_button { font-size: 12px; margin-left: 8px; } .playlist-panel { display: block; width: auto; margin: 0 auto 20px; padding: 8px; border-radius: 5px; background-color: var(--PlaylistHover) !important; border: 1px solid var(--PlaylistBorder); } .playlist-panel-top { display: flex; justify-content: space-between; align-items: center; padding: 0 10px 10px 10px; } .playlist-panel__options { display: flex; gap: 5px; } .playlist-panel__options .Dropdown { padding: 5px 0; z-index: 200; min-width: 175px; } @media (max-width: 499px) { .playlist-panel__options__share { display: none; } } .playlist-panel-table { display: block; height: auto; max-height: 300px; overflow: auto; padding-right: 20px; scrollbar-width: thin; scrollbar-color: var(--Thumb) var(--Track); } .playlist-panel-table__row { display: block; margin: 3px auto; } .playlist-panel-table__row:hover { background-color: var(--PlaylistItemHover); border-radius: 5px; } .playlist-panel-table__row__link:hover { text-decoration: none; } .playlist-panel-table__row--selected { display: block; margin: 0 auto; background-color: var(--PlaylistItemHover); border-radius: 5px; } .playlist-panel-table__row--selected .playlist-post__order, .playlist-panel-table__row--selected .playlist-post .playlist-video-title, .playlist-panel-table__row--selected .playlist-post .playlist-text .playlist-details { color: white; } .playlist-panel-table__row--selected .playlist-thumbnail__image { border: 1px solid #fff; } .playlist-panel-text { display: table-cell; width: auto; vertical-align: top; padding-left: 10px; } .playlist-panel__title { display: flex; flex-direction: column; gap: 5px; } .playlist-panel__title__name a { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 1; font-size: 16px; font-weight: 600; } .playlist-panel__title__name a:hover { text-decoration: none; } .playlist-panel__title__info { color: var(--TextSecondary); font-size: 11px; font-weight: 500; line-height: 130%; } .playlist-panel-details { font-family: Roboto, arial, helvetica, sans-serif; display: block; font-size: 11px; line-height: 130%; color: var(--TextSecondary); } .playlist-panel-post { display: table; width: 100%; margin: 0 auto; padding: 5px 5px 5px 0; } .playlist-panel-post__order { display: table-cell; width: 15px; vertical-align: middle; padding: 10px; font-family: Roboto; font-size: 12px; color: var(--TextSecondary); font-weight: 500; } .playlist-panel-thumbnail { display: table-cell; width: 100px; vertical-align: top; border-radius: 5px; } .playlist-panel-thumbnail__image { height: 56.25px; border-radius: 5px; } .playlist-panel-thumbnail__preview { display: block; width: 100%; background-color: #000; margin: 0 auto; position: relative; border-radius: 5px; } .playlist-panel-thumbnail__duration { display: block; width: auto; background-color: rgba(0, 0, 0, 0.85); font-family: Roboto; font-size: 11px; color: #fff; position: absolute; z-index: 100; right: 5px; bottom: 5px; font-weight: 700; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 6px 5px 5px 5px; pointer-events: none; border-radius: 4px; line-height: 100%; } .playlist-panel-title { word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: 100% !important; margin: 0 !important; padding-left: 15px; padding-top: 15px; padding-right: 15px; margin-bottom: 15px !important; font-family: Roboto; font-size: 16px; font-weight: 700; color: #000; text-overflow: ellipsis; } .playlist-panel-video-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: auto; margin: 0 auto 5px 0; font-family: Roboto, sans-serif; font-weight: 700; font-size: 12px; line-height: normal; color: black; } .modal-monero-cash-tip { max-width: 450px; } .modal-monero-cash-tip .desc { max-width: 350px; } .modal-monero-cash-tip .modal-window__title { height: 30px; } .modal-monero-cash-tip .epic-wallet-info-actions { display: flex; gap: 6px; } .modal-monero-cash-tip .epic-wallet-info-actions .row { width: 100%; } .modal-monero-cash-tip .epic-wallet-info-actions input { width: 100%; } .modal-monero-cash-tip .about-monero { color: #ed1a3b; cursor: pointer; } .modal-monero-cash-tip .crypto-option img { margin-right: 10px; width: 30px; } .video__info { display: flex; justify-content: space-between; flex-direction: column; width: 100%; } .video__info--left { display: table-cell; vertical-align: middle; width: auto; padding-right: 15px; } .video__info--left .name { display: block; margin-bottom: 3px; font-family: 'Roboto'; font-size: 18px; color: #000000; } .video__info--left .stats { display: block; font-family: 'Roboto'; font-size: 14px; color: #999999; } .video__info--left .stats a { color: #ed1a3b; text-decoration: none; } .video__info--right { display: table-cell; vertical-align: middle; text-align: right; width: 80px; } .video__info__banner--left { display: flex; min-width: 220px; margin-bottom: 20px; } .video__info__banner--right { display: flex; margin-bottom: 20px; } .author { display: table; width: auto; } .author__thumbnail { display: none; } .author__details { display: table-cell; vertical-align: top; font-family: 'Roboto', serif; font-size: 14px; line-height: 165%; color: #999999; } .author__details .btn-link { font-size: inherit; padding: 0; border: 0; text-decoration: none; } .author__name { font-size: 18px; font-weight: 700; color: #000000 !important; } .channel-video-actions { margin-left: 8px; } .channel-video-actions .btnLogo { height: 16px; margin-right: 5px; } .channel-video-actions .btn-dropdown-caret { margin-right: 5px; } .channel-video-actions .action_button { font-size: 12px; margin-left: 8px; } .btn-dropdown-more-options { display: inline-block; background-color: #ececec; border: 1px solid transparent; padding: 0.375rem 0.75rem; cursor: pointer; line-height: 1.75; border-radius: 0.25rem; } .btn-dropdown-more-options .dropdown-menu { width: 200px; } .btn-dropdown-more-options .dropdown-item { font-size: 14px; padding: 5px 15px; } .btn-dropdown-more-options .dropdown-item-color { color: #212529; } .btn-dropdown-more-options .btn-more-actions::after { content: 'More'; border: 0px; } .channel_buttons { display: block; } .channel_buttons--left, .channel_buttons--right { display: flex; margin-bottom: 5px; padding: 0px; } .channel_buttons .btn { display: block; padding: 5px 8px; text-align: center; margin-right: 5px; font-size: 12px; font-weight: 700; } .channel_buttons .btn img { height: 24px; margin-right: 10px; } .channel_buttons .btn-send-epic-cash { background: #000000; color: #ffffff; } @media (min-width: 500px) { .author__thumbnail { display: flex; height: 60px; width: 60px; vertical-align: top; overflow: hidden; position: relative; align-items: center; flex-shrink: 0; border-radius: 50%; justify-content: center; margin-right: 15px; } .author__thumbnail img { width: 100%; height: 100%; object-fit: cover; text-align: center; } .channel_buttons { display: table; float: right; max-width: initial; } .channel_buttons--left { display: table-cell; width: auto; padding-left: 5px; margin-bottom: 0px; } .channel_buttons--right { display: flex; flex-wrap: wrap; justify-content: flex-end; width: auto; margin-bottom: 0px; } .channel_buttons--right .channel-video-actions { margin-left: 24px; } .channel_buttons--right .btn { margin-left: 5px; margin-bottom: 5px; font-weight: 700; } .channel_buttons .btn { font-size: 12px !important; } .channel_buttons .following { padding-left: 25px !important; } } @media (min-width: 768px) { .video__info { flex-direction: row; } .channel-video-actions { margin-left: 8px; } .channel-video-actions .btnLogo { height: 20px; margin-right: 12px; } .channel-video-actions .btn-dropdown-caret { margin-right: 12px; } .channel-video-actions .action_button { font-size: 12px; margin-left: 8px; } .channel-video-actions .btn-more-actions::after { content: 'More Options'; } } .video-actions { display: flex; justify-content: space-between; margin-bottom: 20px; } .video-actions--left { display: flex; } .video-actions--left .published { display: flex; } .video-actions--left .views, .video-actions--left .formattedDate { font-family: 'Roboto', serif; font-size: 15px; line-height: 25px; color: #666666; } .video-actions--left .btn-comment { padding: 0px; } .video-actions--right { display: block; } .video-actions .action_buttons { display: flex; } .video-actions .action_buttons > div { margin-left: 5px; } .video-actions .like, .video-actions .donate, .video-actions .coin { padding-left: 24px; line-height: 20px; padding-top: 0; padding-bottom: 0; } .video-actions .donate { background-image: url(/static/icons/Icon-Donate.svg); } .video-actions .coin { background-image: url(/static/icons/Icon-Donate-Video.svg); height: 18px; } .video-actions .like { background-image: url(/static/icons/Icon-Like.svg); } .video-actions .liked { background-image: url(/static/icons/Icon-Liked.svg) !important; } .video-actions .watch-later { background-image: url(/static/icons/Icon-Watch-Later.svg); background-size: contain; background-repeat: no-repeat; padding: 0 12px; height: 18px; } .video-actions .added-watch-later { background-image: url(/static/icons/Icon-Watch-Later-Added.svg); } .video-actions .watch-later-added { background-image: url(/static/icons/Icon-Watch-Later-Added.svg) !important; } @media (min-width: 500px) { .video-actions .actions { display: flex; justify-content: space-between; margin-bottom: 20px; } .video-actions .actions--left { display: flex; align-items: center; margin: 0; } .video-actions .actions--right { display: flex; justify-content: flex-end; margin: 0; } } .RelatedVideos .CollectionRelated { border-bottom: solid 1px var(--SectionBorder); max-width: 100%; margin-bottom: 20px; } .RelatedVideos .CollectionRelated .Post .Title { display: block; margin: 0px 0px 4px 0px; color: var(--TextPrimary); font-weight: 600; } .RelatedVideos .CollectionRelated .Post .EpisodeDetails { display: table; width: 100%; margin: 0px auto; } .RelatedVideos .CollectionRelated .Post .EpisodeDetails .EpisodeDetailsText { display: table-cell; width: auto; vertical-align: top; } .RelatedVideos .CollectionRelated .Post .EpisodeDetails .EpisodeDetailsText .Info { font-size: 12px; font-weight: 500; display: block; color: var(--TextSecondary); white-space: normal; } .RelatedVideos .CollectionRelated .Post .Photo img { width: 100%; } @media (max-width: 799px) { .RelatedVideos { margin: 0 20px; } } @media (max-width: 599px) { .RelatedVideos .PostRelated { margin-bottom: 30px; } } @media (min-width: 600px) { .RelatedVideos .CollectionRelated .Post { display: table; width: 100%; margin: 0px auto 15px auto; } .RelatedVideos .CollectionRelated .Post .Photo { padding-right: 0px; display: table-cell; width: 130px; vertical-align: top; margin: 0px auto; } .RelatedVideos .CollectionRelated .Post .Text { display: table-cell; width: auto; vertical-align: top; padding: 0px 0px 0px 10px !important; } .RelatedVideos .CollectionRelated .Post .EpisodeInfo { display: table; width: 100%; margin: 0px auto; } .RelatedVideos .CollectionRelated .Post .EpisodeInfo .EpisodeText { display: table-cell; width: auto; vertical-align: top; } .RelatedVideos .CollectionRelated .Post .Title { font-size: 12px; } .RelatedVideos .CollectionRelated .Post .Info { max-width: 640px; margin: 0px 0px 5px 0px; } } @media (min-width: 1200px) { .RelatedVideos .CollectionRelated .Post .Photo { width: 150px; } .RelatedVideos .CollectionRelated .Post .Title { font-size: 13px; } } .VideoRelatedBox { width: 100%; } .Sale { padding: 6px 8px 5px 8px; background-color: var(--Red); color: var(--White); text-transform: uppercase; font-weight: var(--FW700); left: 8px; top: 8px; } .video__info { display: flex; justify-content: space-between; flex-direction: column; width: 100%; } .video__info--left { display: table-cell; vertical-align: middle; width: auto; padding-right: 15px; } .video__info--left .name { display: block; margin-bottom: 3px; font-family: 'Roboto'; font-size: 18px; color: #000000; } .video__info--left .stats { display: block; font-family: 'Roboto'; font-size: 14px; color: #999999; } .video__info--left .stats a { color: #ed1a3b; text-decoration: none; } .video__info--right { display: table-cell; vertical-align: middle; text-align: right; width: 80px; } .video__info__banner--left { display: flex; min-width: 220px; margin-bottom: 20px; } .video__info__banner--right { display: flex; align-items: center; margin-bottom: 20px; } .author { display: table; width: auto; } .author__thumbnail { display: none; } .author__details { display: table-cell; vertical-align: top; font-family: 'Roboto', serif; font-size: 14px; line-height: 165%; color: #999999; } .author__details .btn-link { font-size: inherit; padding: 0; border: 0; text-decoration: none; } .author__name { font-size: 18px; font-weight: 700; color: #000000 !important; } .channel-video-actions { margin-left: 8px; } .channel-video-actions .btnLogo { height: 16px; margin-right: 5px; } .channel-video-actions .btn-dropdown-caret { margin-right: 5px; } .channel-video-actions .action_button { font-size: 12px; margin-left: 8px; } .btn-dropdown-more-options { display: inline-block; background-color: #ececec; border: 1px solid transparent; padding: 0.375rem 0.75rem; cursor: pointer; line-height: 1.75; border-radius: 0.25rem; } .btn-dropdown-more-options .dropdown-menu { width: 200px; } .btn-dropdown-more-options .dropdown-item { font-size: 14px; padding: 5px 15px; } .btn-dropdown-more-options .dropdown-item-color { color: #212529; } .btn-dropdown-more-options .btn-more-actions::after { content: 'More'; border: 0px; } .channel_buttons { display: block; } .channel_buttons--left, .channel_buttons--right { display: flex; margin-bottom: 5px; padding: 0px; } .channel_buttons .btn { display: block; padding: 5px 8px; text-align: center; margin-right: 5px; font-size: 12px; font-weight: 700; } .channel_buttons .btn img { height: 24px; margin-right: 10px; } .channel_buttons .btn-send-epic-cash { background: #000000; color: #ffffff; } @media (min-width: 500px) { .author__thumbnail { display: flex; height: 60px; width: 60px; vertical-align: top; overflow: hidden; position: relative; align-items: center; flex-shrink: 0; border-radius: 50%; justify-content: center; margin-right: 15px; } .author__thumbnail img { width: 100%; height: 100%; object-fit: cover; text-align: center; } .channel_buttons { display: table; float: right; max-width: initial; } .channel_buttons--left { display: table-cell; width: auto; padding-left: 5px; margin-bottom: 0px; } .channel_buttons--right { display: flex; flex-wrap: wrap; justify-content: flex-end; width: auto; margin-bottom: 0px; } .channel_buttons--right .channel-video-actions { margin-left: 24px; } .channel_buttons--right .btn { margin-left: 5px; margin-bottom: 5px; font-weight: 700; } .channel_buttons .btn { font-size: 12px !important; } .channel_buttons .following { padding-left: 25px !important; } } @media (min-width: 768px) { .video__info { flex-direction: row; } .channel-video-actions { margin-left: 8px; } .channel-video-actions .btnLogo { height: 20px; margin-right: 12px; } .channel-video-actions .btn-dropdown-caret { margin-right: 12px; } .channel-video-actions .action_button { font-size: 12px; margin-left: 8px; } .channel-video-actions .btn-more-actions::after { content: 'More Options'; } } .video-actions { display: flex; justify-content: space-between; margin-bottom: 20px; } .video-actions--left { display: flex; } .video-actions--left .published { display: flex; } .video-actions--left .views, .video-actions--left .formattedDate { font-family: 'Roboto', serif; font-size: 15px; line-height: 25px; color: #666666; } .video-actions--left .btn-comment { padding: 0px; } .video-actions--right { display: block; } .video-actions .action_buttons { display: flex; } .video-actions .action_buttons > div { margin-left: 5px; } .video-actions .like, .video-actions .donate, .video-actions .coin { padding-left: 24px; line-height: 20px; padding-top: 0; padding-bottom: 0; } .video-actions .donate { background-image: url(/static/icons/Icon-Donate.svg); } .video-actions .coin { background-image: url(/static/icons/Icon-Donate-Video.svg); height: 18px; } .video-actions .like { background-image: url(/static/icons/Icon-Like.svg); } .video-actions .liked { background-image: url(/static/icons/Icon-Liked.svg) !important; } .video-actions .watch-later { background-image: url(/static/icons/Icon-Watch-Later.svg); background-size: contain; background-repeat: no-repeat; padding: 0 12px; height: 18px; } .video-actions .added-watch-later { background-image: url(/static/icons/Icon-Watch-Later-Added.svg); } .video-actions .watch-later-added { background-image: url(/static/icons/Icon-Watch-Later-Added.svg) !important; } @media (min-width: 500px) { .video-actions .actions { display: flex; justify-content: space-between; margin-bottom: 20px; } .video-actions .actions--left { display: flex; align-items: center; margin: 0; } .video-actions .actions--right { display: flex; justify-content: flex-end; margin: 0; } } .vjs-fluid { position: relative; } .vjs-fluid .video-player-error-message { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; flex-direction: column; text-align: center; background: lightgray; padding: 3.5em; transition: 0.7s; } .vjs-fluid .video-player-error-message:hover { background: darkgray; color: white; } .content__right { position: relative; } @media (max-width: 1065px) { .content__right { top: 0 !important; } } .content__right .content__wrap-live { display: flex; flex-direction: column; }