/* Fix Tooltip Opacity */ body > div.tipsy { opacity: 1 !important; } body > div.tipsy .tipsy-inner { background-color: rgba(0,0,0,0.8); } body > div.tipsy .tipsy-arrow { opacity: 0.8; } .ffz-flip .drawer__item--brick .warp__logo, .ffz-flip .drawer__item--xs .warp__glitch, .ffz-flip { transform: scale(-1); } .ffz-ui-toggle { display: block; position: absolute; top: 5px; right: 5px; height: 18px; width: 24px; cursor: pointer; } .ffz-minimal-dashboard[data-current-path="user.dashboards.index"] #main_col { margin: 0 !important } .ffz-minimal-dashboard[data-current-path="user.dashboards.index"] .dash-dragula { height: calc(100vh - 70px) } .ffz-minimize-conversations.ffz-minimal-dashboard[data-current-path="user.dashboards.index"] .dash-dragula { height: calc(100vh - 50px) } .cn-bar-spacer.show, .ffz-minimal-dashboard[data-current-path="user.dashboards.index"] #left_col, .ffz-minimal-dashboard[data-current-path="user.dashboards.index"] #left_close, .ffz-minimal-dashboard[data-current-path="user.dashboards.index"] #right_col, .ffz-minimal-dashboard[data-current-path="user.dashboards.index"] #right_close, .ffz-minimal-dashboard[data-current-path="user.dashboards.index"] .new-dashboard .directory_header, .ffz-hide-directory-uploads .ffz-following-uploads, .pinned-cheers__dismiss, .ffz-hide-pinned-cheers .pinned-cheers, .cn-hosting--bottom .ffz-channel-options .balloon:after, .ffz-host-info .card__layout:not(.ffz), .ffz-following-row[data-loaded="false"] .button, .ffz-following-row[data-loaded="false"] .switch, .ffz-following-row[data-following="false"] .switch, .ffz-moderation-card:not(.lv-notes) ul.menu li[data-page="notes"], .ffz-moderation-card:not(.lv-logs) ul.menu li[data-page="history"], .ffz-moderation-card:not(.lv-logs) ul.menu li[data-page="stats"], .ffz-moderation-card:not(.lv-tabs) ul.menu, .ffz-hide-prime .drawer .warp__list.js-offers, .ffz-hide-prime-collapsed .drawer.closed .js-offers, .ffz-hide-friends-collapsed .drawer.closed .friend-list, .ffz-minimal-channel-title .cn-metabar__title:not(:hover) .card__info, .ffz-minimal-channel-bar .cn-bar-spacer, .ffz-channel-bar-bottom .cn-bar-spacer, .ffz-hide-channel-banner .cn-cover-wrap, .app-main .ad_leader:empty, body:not(.ffz-show-bits-tags) .bits-tag--container, .ffz-hide-friends .friend-button, .ffz-hide-friends nav .friend-list, .ffz-hide-friends .warp__status .js-presence-indicator, .ffz-hide-more-at-twitch nav .tse-content > .warp__list:last-of-type, .ffz-hide-recommended-friends .recommended-friends, .ffz-hide-recommended-channels .js-recommended-channels, .drawer.closed .promotedGames .warp__item--header, .ffz-hide-promoted-games .promotedGames, .ffz-hide-recent-past-broadcast .recent-past-broadcast, .ffz-hide-view-count .stat.twitch-channel-views, .ffz-hide-view-count .cn-metabar__viewcount, .ffz-minimal-chat-input .chat-interface .emoticon-selector-toggle, .ffz-menu-replace .chat-interface .ember-emoticon-selector, .ffz-menu-replace .chat-interface .emoticon-selector-toggle { display: none !important; } .ffz-channel-bar-bottom #channel { margin-bottom: 60px; } .ffz-channel-bar-bottom .notification-controls .balloon { top: auto; bottom: 50px; } .ffz-channel-bar-bottom .js-username-hover-tip .balloon { top: auto; bottom: 100px; } .ffz-channel-bar-bottom .subscription-modal__balloon { top: -220px !important; } .cn-hosting--bottom .ffz-channel-options .balloon { left: 0; right: auto; } .ffz-channel-bar-bottom .cn-bar-fixed { top: auto; bottom: 0; box-shadow: inset 0 1px 0 #e5e3e8,0 -1px -1px rgba(0,0,0,.065); } .ffz-dark.ffz-channel-bar-bottom .cn-bar-fixed { box-shadow: inset 0 1px 0 #161616, -1px -1px rgba(255,255,255,0.065); } body:not(.ffz-show-bits-tags) .ember-chat .chat-messages.bits-tags__offset { top: 0; } body:not(.ffz-minimal-chat-input):not(.ffz-menu-replace) .chat-interface .emoticon-selector-toggle + .ffz-ui-toggle svg, body:not(.ffz-minimal-chat-input):not(.ffz-menu-replace) .chat-interface .emoticon-selector-toggle + div + .ffz-ui-toggle svg { height: 14px; width: 18px; } body:not(.ffz-minimal-chat-input):not(.ffz-menu-replace) .chat-interface .emoticon-selector-toggle + .ffz-ui-toggle, body:not(.ffz-minimal-chat-input):not(.ffz-menu-replace) .chat-interface .emoticon-selector-toggle + div + .ffz-ui-toggle { height: 14px; width: 18px; top: 28px; right: 6px; } .ffz-ui-toggle svg.svg-emoticons path { fill: rgba(0,0,0,0.2); } .ffz-ui-toggle:hover svg.svg-emoticons path { fill: rgba(0,0,0,0.5); } .carousel__item .card__img .overlay_info.live svg path, .streams .stream .content .overlay_info.live svg path, .videos .video .content .overlay_info.live svg path { fill: #ff2020; } .ember-chat-container.dark .ffz-ui-toggle svg.svg-emoticons path, .chat-container.dark .ffz-ui-toggle svg.svg-emoticons path, .app-main.theatre .ffz-ui-toggle svg.svg-emoticons path, body.ffz-bttv-dark .ffz-ui-toggle svg.svg-emoticons path { fill: #555; } .ember-chat-container.dark .ffz-ui-toggle:hover svg.svg-emoticons path, .chat-container.dark .ffz-ui-toggle:hover svg.svg-emoticons path, .app-main.theatre .ffz-ui-toggle:hover svg.svg-emoticons path, body.ffz-bttv-dark .ffz-ui-toggle:hover svg.svg-emoticons path { fill: #999; } .ffz-ui-toggle.no-emotes svg.svg-emoticons path { fill: rgba(80,0,0,0.2); } .ffz-ui-toggle.no-emotes:hover svg.svg-emoticons path { fill: rgba(80,0,0,0.5); } .ffz-ui-toggle.live svg.svg-emoticons path { fill: rgba(100,65,165,0.5); } .ffz-ui-toggle.live:hover svg.svg-emoticons path { fill: rgba(100,65,165,1); } .ffz-ui-toggle.blue.live svg.svg-emoticons path { fill: rgba(47,88,185,0.5); } .ffz-ui-toggle.blue.live:hover svg.svg-emoticons path { fill: rgba(47,88,185,1); } .ember-chat-container.dark .ffz-ui-toggle.news svg.svg-emoticons path, .app-main.theatre .ffz-ui-toggle.news svg.svg-emoticons path, .chat-container.dark .ffz-ui-toggle.news svg.svg-emoticons path, body.ffz-bttv-dark .ffz-ui-toggle.news svg.svg-emoticons path, .ffz-ui-toggle.news svg.svg-emoticons path { fill: rgba(117, 80, 0, 0.5); } .ember-chat-container.dark .ffz-ui-toggle.news:hover svg.svg-emoticons path, .app-main.theatre .ffz-ui-toggle.news:hover svg.svg-emoticons path, .chat-container.dark .ffz-ui-toggle.news:hover svg.svg-emoticons path, body.ffz-bttv-dark .ffz-ui-toggle.news:hover svg.svg-emoticons path, .ffz-ui-toggle.news:hover svg.svg-emoticons path { fill: rgba(117, 80, 0, 0.8); } .ember-chat-container.dark .ffz-ui-toggle.no-emotes svg.svg-emoticons path, .app-main.theatre .ffz-ui-toggle.no-emotes svg.svg-emoticons path, .chat-container.dark .ffz-ui-toggle.no-emotes svg.svg-emoticons path, body.ffz-bttv-dark .ffz-ui-toggle.no-emotes svg.svg-emoticons path { fill: #453434; } .ember-chat-container.dark .ffz-ui-toggle.no-emotes:hover svg.svg-emoticons path, .app-main.theatre .ffz-ui-toggle.no-emotes:hover svg.svg-emoticons path, .chat-container.dark .ffz-ui-toggle.no-emotes:hover svg.svg-emoticons path, body.ffz-bttv-dark .ffz-ui-toggle.no-emotes:hover svg.svg-emoticons path { fill: #543f3f; } .ember-chat-container.dark .ffz-ui-toggle.live svg.svg-emoticons path, .app-main.theatre .ffz-ui-toggle.live svg.svg-emoticons path, .chat-container.dark .ffz-ui-toggle.live svg.svg-emoticons path, body.ffz-bttv-dark .ffz-ui-toggle.live svg.svg-emoticons path { fill: #513c78; } .ember-chat-container.dark .ffz-ui-toggle.live:hover svg.svg-emoticons path, .app-main.theatre .ffz-ui-toggle.live:hover svg.svg-emoticons path, .chat-container.dark .ffz-ui-toggle.live:hover svg.svg-emoticons path, body.ffz-bttv-dark .ffz-ui-toggle.live:hover svg.svg-emoticons path { fill: #5b4487; } .ember-chat-container.dark .ffz-ui-toggle.blue.live svg.svg-emoticons path, .app-main.theatre .ffz-ui-toggle.blue.live svg.svg-emoticons path, .chat-container.dark .ffz-ui-toggle.blue.live svg.svg-emoticons path, body.ffz-bttv-dark .ffz-ui-toggle.blue.live svg.svg-emoticons path { fill: #3c4e78; } .ember-chat-container.dark .ffz-ui-toggle.blue.live:hover svg.svg-emoticons path, .app-main.theatre .ffz-ui-toggle.blue.live:hover svg.svg-emoticons path, .chat-container.dark .ffz-ui-toggle.blue.live:hover svg.svg-emoticons path, body.ffz-bttv-dark .ffz-ui-toggle.blue.live:hover svg.svg-emoticons path { fill: #445887; } .ffz-ui-toggle.live { animation: ffzfade 8s linear infinite; } @keyframes ffzfade { from, to { opacity: 1; } 50% { opacity: 0.75; } } .warp__logo:hover { animation: ffzflipwobble 4s infinite; } @keyframes ffzflipwobble { 0%,30% { transform: none } 36% { transform: rotate(185deg) } 38% { transform: rotate(175deg) } 40%,90% { transform: rotate(180deg) } 96% { transform: rotate(365deg) } 98% { transform: rotate(355deg) } 100% { transform: rotate(360deg) } } .ember-chat .chat-menu.ffz-ui-popup { padding: 0 } .ffz-button { float: right; margin-top: -6px; text-transform: none; } .ffz-noty .noty_message { background-image: url("//cdn.frankerfacez.com/icon32.png") !important; background-repeat: no-repeat !important; background-position: 5px 10px !important; padding-left: 42px !important; text-align: left; } .ffz-ui-popup .button.live { overflow: hidden; background: #6441A5; color: #fff; } .ffz-ui-popup .button.live span { z-index: 2; position: relative; } .ffz-ui-popup .button.live:before, .ffz-ui-popup .button.live:after { content: ""; display: block; position: absolute; width: 0px; height: 0px; border-radius: 999px; top: 50%; left: 50%; z-index: 1 } .ffz-ui-popup .button.live.purple:before, .ffz-ui-popup .button.live.purple:after { box-shadow: 0 0 3px 1px #a68ed2,inset 0 0 3px 1px #a68ed2; -moz-box-shadow: 0 0 3px 1px #a68ed2,inset 0 0 3px 1px #a68ed2; -webkit-box-shadow: 0 0 3px 1px #a68ed2,inset 0 0 3px 1px #a68ed2; } .ffz-ui-popup .button.live.blue:before, .ffz-ui-popup .button.live.blue:after { box-shadow: 0 0 3px 1px #8ea2d1,inset 0 0 3px 1px #8ea2d1; -moz-box-shadow: 0 0 3px 1px #8ea2d1,inset 0 0 3px 1px #8ea2d1; -webkit-box-shadow: 0 0 3px 1px #8ea2d1,inset 0 0 3px 1px #8ea2d1; } .ffz-ui-popup .button.live:before { animation: expand 1500ms infinite ease-in; } .ffz-ui-popup .button.live:after { animation: expand 1500ms infinite 750ms ease-in; } #dash_main #stats .stat.dark#ffz_count svg path { fill: #cacaca; } .ffz-live-team-channel .ffz-game { display: inline-block; max-width: 150px; text-overflow: ellipsis; overflow: hidden; margin-bottom: -5px; } /* Minimal Channel Title */ .ffz-minimal-channel-title .cn-metabar__title:hover { background-color: #fff; padding: 1rem; margin-left: -1rem; } .ffz-dark.ffz-minimal-channel-title .cn-metabar__title:hover { background-color: #101010 } .ffz-minimal-channel-title .cn-metabar__title:not(:hover) .card__img--boxart { height: 20px !important; width: 14px !important; } /* Theater Mode hover bar */ .ffz-theater-basic-stats .theatre .player-userinfo__game, .ffz-theater-basic-stats .theatre .player-controls-top { display: block } .ffz-theater-stats .theatre #main_col:hover .cn-hosting--bottom, .ffz-theater-stats .theatre #main_col:focus .cn-hosting--bottom, .ffz-theater-stats .theatre .cn-hosting--bottom:hover, .ffz-theater-stats .theatre .cn-hosting--bottom:focus, .ffz-theater-stats .theatre #main_col:hover .cn-metabar__more, .ffz-theater-stats .theatre #main_col:focus .cn-metabar__more, .ffz-theater-stats .theatre .cn-metabar__more:hover, .ffz-theater-stats .theatre .cn-metabar__more:focus { background-color: rgba(25,25,31,0.95); color: #aaa; position: fixed; left: 10px; width: auto; z-index: 7; padding: 10px !important; flex-wrap: wrap; } .ffz-theater-stats .theatre .cn-hosting--bottom, .ffz-theater-stats .theatre .cn-metabar__more { bottom: 55px; } .ffz-theater-stats:not(.ffz-theatre-conversations):not(.ffz-top-conversations) .theatre .cn-hosting--bottom, .ffz-theater-stats:not(.ffz-theatre-conversations):not(.ffz-top-conversations) .theatre .cn-metabar__more { bottom: 95px; } .ffz-theater-stats .theatre .cn-metabar__more span, .ffz-theater-stats .theatre .cn-metabar__more div { flex-grow: 0 !important } .ffz-theater-stats .theatre .channel-stats .stat { color: #aaa; } .ffz-theater-stats .theatre .channel-stats span:not(.live-count) svg path { fill: rgba(255,255,255,0.35); } .ffz-theater-stats .theatre .follow-button .notify:before, .ffz-theater-stats .theatre .button.drop:after, .ffz-theater-stats .theatre .follow-button .drop.follow:after { border: 5px solid rgba(255,255,255,0.35); border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; } .ffz-theater-stats .theatre .follow-button .notify { background-color: #25252a; } .ffz-theater-stats .theatre .button.button--icon-only:not(.follow-button) svg path { fill: #a68ed2; } .ffz-theater-stats .theatre .button.primary.subscribe-button { color: #fff; } /* SRL Race Support */ #ffz-ui-host-button { vertical-align: middle } .srl-logo { display: inline-block; width: 34px; height: 16px; background-image: url("//cdn.frankerfacez.com/script/srl_button.png"); } .cn-metabar__ffz .srl-logo { vertical-align: middle; margin-top: -2px; } #ffz-metadata-popup[data-key="srl_race"] { background-image: url("//cdn.frankerfacez.com/script/zreknarf-bg.png"); background-repeat: no-repeat; padding: 1rem; background-position: 115% 110%; } #ffz-metadata-popup[data-key="srl_race"] .heading { margin: -1rem -1rem 1rem; height: 65px; position: relative; } #ffz-metadata-popup[data-key="srl_race"] .heading div { padding: 0 1rem; } #ffz-metadata-popup[data-key="srl_race"] .heading h2, #ffz-metadata-popup[data-key="srl_race"] .heading .goal { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ffz-metadata-popup[data-key="srl_race"] .heading .goal { display: block; margin: calc(-1rem + 1px); padding: calc(1rem - 1px); } #ffz-metadata-popup[data-key="srl_race"] .heading .goal:hover { white-space: normal; background-color: rgba(255,255,255,0.9); border-bottom: 1px solid rgba(0,0,0,0.2); } .theatre #ffz-metadata-popup[data-key="srl_race"] .heading .goal:hover, .ffz-dark #ffz-metadata-popup[data-key="srl_race"] .heading .goal:hover { background-color: rgba(16,16,16,0.9); border-color: rgba(255,255,255,0.2); } #ffz-metadata-popup[data-key="srl_race"] .heading h2 { max-width: 240px; font-size: 1.5em; padding-bottom: 5px; display: block; width: 200px; margin-bottom: 0; } #ffz-metadata-popup[data-key="srl_race"] .heading > span { line-height: 30px; position: absolute; top: 7.5px; right: 1rem; padding: 0 5px; background: rgba(0,0,0,0.5); color: #fff; border-radius: 5px; } #ffz-metadata-popup[data-key="srl_race"] p { float: right; margin-bottom: 0; } #ffz-metadata-popup[data-key="srl_race"] .right { padding-top: 0; text-align: right; } #ffz-metadata-popup[data-key="srl_race"] .table { overflow-y: auto; border-bottom: 1px solid; margin-bottom: 1rem; } #ffz-metadata-popup[data-key="srl_race"] table { width: 100%; text-align: center; border-spacing: 0; } #ffz-metadata-popup[data-key="srl_race"] table a { color: inherit; } .ffz-about-table a.twitch, .ffz-about-table a.youtube, .ffz-about-table a.twitter, #ffz-metadata-popup[data-key="srl_race"] a.twitch, #ffz-metadata-popup[data-key="srl_race"] a.hitbox { display: inline-block; height: 16px; margin-left: 5px; background-repeat: no-repeat; } .ffz-about-table a.youtube { width: 23px; background-image: url("//cdn.frankerfacez.com/script/youtube_logo.png"); } .ffz-about-table a.twitter { width: 20px; background-image: url("//cdn.frankerfacez.com/script/twitter_logo.png"); } #ffz-metadata-popup[data-key="srl_race"] a.twitch, .ffz-about-table a.twitch { width: 15px; background-image: url("//cdn.frankerfacez.com/script/twitch_logo.png"); } #ffz-metadata-popup[data-key="srl_race"] a.hitbox { width: 12px; background-image: url("//cdn.frankerfacez.com/script/hitbox_logo.png"); } #ffz-metadata-popup[data-key="srl_race"] table tbody tr[data-state="done"]:nth-child(0n+1) td { background-color: rgba(255,255,0,.2); } #ffz-metadata-popup[data-key="srl_race"] table tbody tr[data-state="done"]:nth-child(0n+2) td { background-color: rgba(128,128,128,.2); } #ffz-metadata-popup[data-key="srl_race"] table tbody tr[data-state="done"]:nth-child(0n+3) td { background-color: rgba(210,100,0,.2); } #ffz-metadata-popup[data-key="srl_race"] table tbody tr[data-state="forfeit"] td { opacity: 0.5; background-color: rgba(210,100,100,.2); } #ffz-metadata-popup[data-key="srl_race"] table tbody tr[data-state="racing"] td.time { opacity: 0.5; } #ffz-metadata-popup[data-key="srl_race"] table th, #ffz-metadata-popup[data-key="srl_race"] td { padding: 1px; } #ffz-metadata-popup[data-key="srl_race"] table th { border-bottom: 1px solid; } /* Dark Menu */ #ffz-chat-menu { background-color: transparent !important; } .ffz-dark .ember-chat .chat-menu .list-header, .theatre .ember-chat .chat-menu .list-header, .dark .ember-chat .chat-menu .list-header { border-top-color: rgba(255,255,255, 0.2); } .ffz-dark .ffz-ui-menu-page .ffz-filter-container, .theatre .ffz-ui-menu-page .ffz-filter-container, .dark .ffz-ui-menu-page .ffz-filter-container, .ffz-dark .chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content .heading, .theatre .chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content .heading, .dark .chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content .heading, .ffz-dark .chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid .heading, .theatre .chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid .heading, .dark .chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid .heading, .ffz-dark .ffz-ui-popup ul.menu, .theatre .ffz-ui-popup ul.menu, .dark .ffz-ui-popup ul.menu, .ffz-dark .ffz-ui-popup ul.menu a, .theatre .ffz-ui-popup ul.menu a, .dark .ffz-ui-popup ul.menu a, .ffz-sidebar-swap.ffz-dark .ffz-ui-popup ul.menu a, .ffz-sidebar-swap .theatre .ffz-ui-popup ul.menu a, .ffz-sidebar-swap .dark .ffz-ui-popup ul.menu a { border-color: #32323e; } .ffz-dark .ffz-ui-popup ul.menu, .theatre .ffz-ui-popup ul.menu, .dark .ffz-ui-popup ul.menu { background-color: #212121; } .ffz-dark .ffz-ui-popup ul.menu li.active, .theatre .ffz-ui-popup ul.menu li.active, .dark .ffz-ui-popup ul.menu li.active { background-color: #101010; } .ffz-dark .ffz-ui-popup ul.menu li.active a, .theatre .ffz-ui-popup ul.menu li.active a, .dark .ffz-ui-popup ul.menu li.active a { border-top-color: #101010; } .ffz-dark .ffz-ui-popup.emoticon-selector .emoticon-selector-box, .theatre .ffz-ui-popup.emoticon-selector .emoticon-selector-box, .dark .ffz-ui-popup.emoticon-selector .emoticon-selector-box { background-color: #101010; color: #c3c3c3; border-color: #32323e; } /* Menu Options */ .emoticon-selector .emoticon-selector-box .subscribe-message { padding: 10px 20px; margin: 0; } .emoticon-selector .emoticon-grid.ffz-no-emotes img { padding: 5px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .ffz-ui-sub-menu-page[data-page="favorites"] .emoticon-grid.ffz-no-emotes { padding: 10px 20px; } .suggestion.ffz-favorite, .emoticon.ffz-favorite { position: relative; } .favorites-grid:not(:empty) + .ffz-no-emotes, .favorites-grid .emoticon.ffz-favorite:before { display: none } .suggestion.ffz-favorite:before, .emoticon.ffz-favorite:before { content: ""; display: block; height: 14px; width: 14px; position: absolute; right: 0; bottom: 0; background: url("//cdn.frankerfacez.com/script/emoticon_favorite.png") no-repeat; } .suggestion.ffz-favorite:before { right: 2.5px; bottom: 2.5px } .chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content.menu-side-padding { padding-left: 20px; padding-right: 20px; } .emoticon-grid.collapsable.collapsed span, .chat-menu-content.collapsable.collapsed p { display: none; } .chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content.collapsable.collapsed .heading, .chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid.collapsable.collapsed .heading { padding-bottom: 0; } .emoticon-grid.collapsable .heading, .emoticon-grid.collapsable.collapsed, .chat-menu-content.collapsable.collapsed, .chat-menu-content.collapsable .heading { cursor: pointer; } .emoticon-grid.collapsable .heading, .chat-menu-content.collapsable .heading { position: relative; } .pin-switch { display: block; height: 16px; padding: 2px; margin: 0 !important; cursor: pointer; } .pin-switch:hover svg path, .pin-switch.active svg path { fill: #14b866 !important } .pin-switch.active:hover svg path { fill: #fc3636 !important } .pin-switch svg path { fill: rgba(0,0,0,0.2); } .dark .pin-switch svg path, .theatre .dark .pin-switch svg path { fill: rgba(255,255,255,0.2) } .pin-switch, .list-header time, .list-header span.right { float: right; } .ember-chat .chat-menu .list-header.sub-header { border-top: none; margin: 0 20px; padding: 5px 0 0; } .ember-chat .chat-menu .list-header.sub-header + .chat-menu-content { padding-top: 0; } .chat-menu-content.collapsable .heading span.right { padding-right: 15px; } .emoticon-grid.collapsable .heading:before, .chat-menu-content.collapsable .heading:before { content: ""; border: 5px solid #666; border-left-color: transparent; border-right-color: transparent; position: absolute; margin-top: 6px; right: 20px; } .emoticon-grid.collapsable.collapsed .heading:before, .chat-menu-content.collapsable.collapsed .heading:before { border-bottom-color: transparent; } .emoticon-grid.collapsable:not(.collapsed) .heading:before { display: none; } .chat-menu-content.collapsable:not(.collapsed) .heading:before { border-top-color: transparent; margin-top: 1px; } #small_nav .content ul li#ffz_small_menu .filter_icon svg { margin: 11px 13px; } .ffz-ui-sub-menu-page, .ffz-ui-menu-page { overflow-y: auto; } .ffz-ui-menu-page[data-page="about"] .ffz-ui-sub-menu-page .chat-menu-content:first-child { padding: 20px 0 10px; } .ffz-ui-sub-menu-page[data-page="about"], .ffz-ui-menu-page .chat-menu-content p { padding: 0 20px; } .ffz-moderation-card .version-list span, .ffz-ui-menu-page .version-list span { float: right } .ffz-moderation-card .version-list li:not(:last-of-type), .ffz-ui-menu-page .version-list li:not(:last-of-type) { border-bottom: 1px dotted rgba(127,127,127,0.5); } .ffz-ui-menu-page .version-list ul { margin-left: 20px } .ffz-ui-menu-page pre { box-shadow: none !important; white-space: pre-wrap; } #ffz-old-news-button { text-align: center; text-transform: none; padding-bottom: 15px; } #ffz-old-news { display: none } .chat-container.dark .chat-interface .ffz-ui-popup.emoticon-selector .emoticon-selector-box, .app-main.theatre .chat-container .chat-interface .ffz-ui-popup.emoticon-selector .emoticon-selector-box, .ember-chat-container.dark .chat-interface .ffz-ui-popup.emoticon-selector .emoticon-selector-box { background-color: rgb(16,16,16); color: rgb(195,195,195); border-color: #32323e; } .chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content .heading, .chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid .heading { padding: 10px 20px; border-top: 1px solid rgba(0,0,0,0.2); text-align: left; } .chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid .heading { padding-left: 43px; background-repeat: no-repeat; background-position: 20px 10px; } .chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid + .emoticon-grid { padding-top: 0; } .chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content:first-of-type .heading, .chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid:first-of-type .heading { border-top: none; padding-top: 0; background-position: 20px 0; } .chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content { padding: 10px 0; background-color: transparent; } .chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content + .chat-menu-content { padding-top: 0; } .ffz-ui-menu-page span.help { display: block; opacity: 0.75; } .ffz-ui-menu-page p.disabled span.switch-label, .ffz-ui-menu-page span.help, .ffz-ui-menu-page span.option-label, .ffz-ui-menu-page p.option a { margin-left: 50px; } .ffz-ui-menu-page span.option-label { line-height: 25px; } .ffz-ui-menu-page input, .ffz-ui-menu-page select { margin: 0 10px 5px; } .ffz-ui-menu-page input[type="file"] { width: auto; } #ffz-chat-menu { pointer-events: none; } .ffz-ui-popup ul.menu { list-style-type: none; border-top: 1px solid rgba(0,0,0,0.2); background-color: #eee; margin: 0 1px 1px; } .ffz-ui-popup ul.menu:not(.sub-menu) { cursor: ew-resize; } .ffz-ui-popup .emoticon-selector-box { width: 10000px !important; /* Max-width has our back */ max-width: 300px; pointer-events: auto; } .ember-chat .chat-interface .ffz-ui-popup.emoticon-selector .emoticon-selector-box .emoticon-grid { background-color: transparent !important; } .ffz-bttv-dark .ffz-ui-popup ul.menu { background-color: #282828; } .ffz-ui-popup ul.sub-menu li.title, .ffz-ui-menu-page .heading .right, .ffz-ui-popup ul.menu li.item { float: right; } .ffz-ui-popup ul.sub-menu li.item, .ffz-ui-popup ul.menu li.title { float: left; } .ffz-ui-popup ul.sub-menu { background-color: #dfdfdf; margin: 0 1px; } .app-main.theatre .ffz-ui-popup ul.sub-menu, .chat-container.dark .ffz-ui-popup ul.sub-menu, .ember-chat-container.dark .ffz-ui-popup ul.sub-menu, body.ffz-bttv-dark .ffz-ui-popup ul.sub-menu { background-color: #181818; } .ffz-ui-popup ul.sub-menu a { text-decoration: none; color: #333; } .app-main.theatre .ffz-ui-popup ul.sub-menu a, .chat-container.dark .ffz-ui-popup ul.sub-menu a, .ember-chat-container.dark .ffz-ui-popup ul.sub-menu a, body.ffz-bttv-dark .ffz-ui-popup ul.sub-menu a { color: #d3d3d3 !important; } span.ffz-handle { display: inline-block; position: relative; height: 26px; width: 14px; transition: width 500ms; } span.ffz-handle:before, span.ffz-handle:after { position: absolute; left: 4px; top: 5px; content: ""; height: 14px; border: 1px solid #bbb; border-radius: 4px; transition: transform 500ms, left 500ms, border-color 500ms, border-width 500ms, height 500ms; } span.ffz-handle:after { left: 8px } .ffz-ui-popup.ui-moved span.ffz-handle { width: 24px; cursor: pointer; } .ffz-ui-popup.ui-moved span.ffz-handle:before, .ffz-ui-popup.ui-moved span.ffz-handle:after { left: 11px; border-color: #333; } .ffz-ui-popup.ui-moved span.ffz-handle:before { transform: rotate(45deg); } .ffz-ui-popup.ui-moved span.ffz-handle:after { transform: rotate(-45deg); } .app-main.theatre span.ffz-handle:before, .chat-container.dark span.ffz-handle:before, .ember-chat-container.dark span.ffz-handle:before, body.ffz-bttv-dark .ffz-ui-popup span.ffz-handle:before, .app-main.theatre span.ffz-handle:after, .chat-container.dark span.ffz-handle:after, .ember-chat-container.dark span.ffz-handle:after, body.ffz-bttv-dark .ffz-ui-popup span.ffz-handle:after { border-color: #666; } .app-main.theatre .ffz-ui-popup.ui-moved span.ffz-handle:before, .chat-container.dark .ffz-ui-popup.ui-moved span.ffz-handle:before, .ember-chat-container.dark .ffz-ui-popup.ui-moved span.ffz-handle:before, body.ffz-bttv-dark .ffz-ui-popup.ui-moved span.ffz-handle:before, .app-main.theatre .ffz-ui-popup.ui-moved span.ffz-handle:after, .chat-container.dark .ffz-ui-popup.ui-moved span.ffz-handle:after, .ember-chat-container.dark .ffz-ui-popup.ui-moved span.ffz-handle:after, body.ffz-bttv-dark .ffz-ui-popup.ui-moved span.ffz-handle:after { border-color: #d3d3d3; } .ffz-ui-popup ul.menu li.title > span.ffz-handle { float: left; margin: 5px; } .ffz-ui-popup ul.menu li.title > span.title { display: block; margin-left: 24px; padding: 10px 20px 10px 0; line-height: 16px; transition: margin-left 500ms; } .ffz-ui-popup.ui-moved ul.menu li.title > span.title { margin-left: 34px; } .ffz-ui-popup ul.menu a { display: block; padding: 10px; height: 16px; margin-top: -1px; cursor: pointer; border-left: 1px solid rgba(0,0,0,0.2); border-top: 1px solid transparent; } .ffz-ui-popup ul.sub-menu a { border-left: none; border-right: 1px solid rgba(0,0,0,0.2); } body.ffz-bttv-dark .ffz-ui-popup ul.menu { border-top-color: rgba(255,255,255,0.1) } body.ffz-bttv-dark .ffz-ui-popup ul.menu a { border-left-color: rgba(255,255,255,0.1) } body.ffz-bttv-dark .ffz-ui-popup ul.sub-menu a { border-right-color: rgba(255,255,255,0.1) } .ffz-ui-popup ul.menu li.active { background-color: #fff; } .ffz-ui-popup ul.menu li.active a { border-top-color: #fff; } .ffz-ui-popup ul.menu li.active.has-sub-menu { background-color: #dfdfdf; } .ffz-ui-popup ul.menu li.active.has-sub-menu a { border-top-color: #dfdfdf; } .chat-container.dark .chat-interface .ffz-ui-popup ul.menu li.active, .ember-chat-container.dark .chat-interface .ffz-ui-popup ul.menu li.active, .app-main.theatre .chat-container .chat-interface .ffz-ui-popup ul.menu li.active, body.ffz-bttv-dark .ffz-ui-popup ul.menu li.active { background-color: rgb(16,16,16); } .chat-container.dark .chat-interface .ffz-ui-popup ul.menu li.active a, .ember-chat-container.dark .chat-interface .ffz-ui-popup ul.menu li.active a, .app-main.theatre .chat-container .chat-interface .ffz-ui-popup ul.menu li.active a, body.ffz-bttv-dark .ffz-ui-popup ul.menu li.active a { border-top-color: rgb(16,16,16); } .chat-container.dark .chat-interface .ffz-ui-popup ul.menu li.active.has-sub-menu, .ember-chat-container.dark .chat-interface .ffz-ui-popup ul.menu li.active.has-sub-menu, .app-main.theatre .chat-container .chat-interface .ffz-ui-popup ul.menu li.active.has-sub-menu, body.ffz-bttv-dark .ffz-ui-popup ul.menu li.active.has-sub-menu { background-color: #181818; } .chat-container.dark .chat-interface .ffz-ui-popup ul.menu li.active.has-sub-menu a, .ember-chat-container.dark .chat-interface .ffz-ui-popup ul.menu li.active.has-sub-menu a, .app-main.theatre .chat-container .chat-interface .ffz-ui-popup ul.menu li.active.has-sub-menu a, body.ffz-bttv-dark .ffz-ui-popup li.active.has-sub-menu a { border-top-color: #181818; } .chat-container.dark .chat-interface .ffz-ui-popup a, .ember-chat-container.dark .chat-interface .ffz-ui-popup a, .app-main.theatre .chat-container .chat-interface .ffz-ui-popup a, body.ffz-bttv-dark .ffz-ui-popup .ffz-ui-menu-page a { color: #fff; } .chat-container.dark .chat-interface .ffz-ui-popup ul.menu svg path, .ember-chat-container.dark .chat-interface .ffz-ui-popup ul.menu svg path, .app-main.theatre .chat-container .chat-interface .ffz-ui-popup ul.menu svg path, .ffz-dark .ffz-ui-popup ul.menu svg path, body.ffz-bttv-dark .ffz-ui-popup ul.menu svg path { fill: #d3d3d3; } .ffz-ui-popup ul.menu svg path { fill: #333; } .ffz-ui-popup .option-label span, .ffz-ui-popup .switch-label span { opacity: 0.8; font-size: 10px; line-height: 20px; padding: 4px; background: rgba(0,0,0,0.2); vertical-align: top; } /* BTTV Menu Fixes */ .emote-menu .header-info img { max-width: 18px; max-height: 18px } .bttv-incompatibility { padding-top: 8px !important; } body.ffz-bttv-dark .ffz-ui-popup .emoticon-grid .heading, body.ffz-bttv-dark .ffz-ui-popup li.title { color: #fff; } body.ffz-bttv-dark .ffz-ui-popup .ffz-ui-menu-page { background-color: #101010; } .ffz-bttv .ffz-ui-popup .chat-menu-content p a { padding: 0; } body.ffz-bttv-dark .ffz-ui-popup ul.menu, body.ffz-bttv-dark .ffz-ui-popup .ffz-ui-menu-page { margin: 0 } body.ffz-bttv-dark .ffz-ui-popup .ffz-ui-menu-page .chat-menu-content .heading, body.ffz-bttv-dark .ffz-ui-popup .ffz-ui-menu-page .emoticon-grid .heading { border-color: rgba(255,255,255,0.1); } body.ffz-bttv-dark .ffz-ui-popup ul.menu:not(.sub-menu), body.ffz-bttv-dark .ffz-ui-popup .ffz-ui-menu-page { border: 1px solid rgba(255,255,255,0.1) } body.ffz-bttv-dark .ffz-ui-popup .ffz-ui-menu-page { border-bottom: none } .ffz-bttv .emoticon.emoji { padding-top: 0 } /* Host Menu */ .ffz-subwindow input { padding: 5px; } .ffz-subwindow p { margin-bottom: 0; padding: 0 0 10px; } #ffz-metadata-popup, .ffz-subwindow .card, .ffz-channel-selector { background-image: url("//cdn.frankerfacez.com/script/zreknarf-bg.png"); background-repeat: no-repeat; background-size: 50%; background-position: 110% 115%; } .ffz-channel-selector .dropmenu_action { display: block; position: relative; line-height: 34px; overflow: hidden; padding: 0 !important; } .ffz-channel-selector .image { display: inline-block; width: 20px; height: 20px; float: left; margin: 6px 15px 8px 20px; } .ffz-channel-selector .title { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; padding-right: 20px; } .ffz-channel-selector .header { padding: 5px 20px; margin-bottom: 0; border-bottom: none; line-height: 22px; text-transform: uppercase; font-size: 11px; color: #666; } /* Oh my god this is awful why does Chat Replay move chat lines? */ .app-main.theatre .chatReplay .chat-messages .chat-line .mod-icons, .ffz-dark .chatReplay .chat-messages .chat-line .mod-icons { background-color: rgba(0,0,0,0.8); } .chatReplay .chat-messages .chat-line .mod-icons { position: absolute; z-index: 10; left: 0; top: 0; bottom: 0; padding: 3px 5px 4px 4px; background: rgba(255,255,255,0.8); transition: margin-left .08s linear; } .chatReplay .show-mod-icons .chat-line .mod-icons { transition: none } .chatReplay .chat-messages .chat-line:hover { overflow: visible } .chatReplay .chat-messages .chat-line:hover .mod-icons { margin-left: 0; } .chatReplay .chat-messages .horizontal-line { margin: 4px 0 } /* Positioning Fixes */ body:not(.ffz-bttv) .ember-chat .chat-settings { bottom: 40px; } body:not(.ffz-bttv) .notification-controls .notify-menu { bottom: 25px; } body:not(.ffz-bttv) .dropmenu.share { margin-bottom: 0; } /* Dashboard Changes */ #dash_main #stream-config-status, #chart_container.ffz-stat-chart { margin: 20px auto 0 } /*#dash_main #video_player { height: 303.75px } #stream-config-status { display: none } #delay_controls { float: left } #delay_controls + #commercial_buttons { float: right } #delay_controls + #commercial_buttons + div { clear: both } #delay_controls, #delay_controls + #commercial_buttons { width: 50%; margin-bottom: 20px; } #dash_main #delay_controls, #dash_main #commercial_buttons { margin-top: 0; padding-top: 0; border-top: none; } #dash_main #delay_controls .section_header, #commercial_buttons .section_header { padding-top: 0 } #dash_main #delay_controls .ui-slider { margin-top: 18px }*/ /* Menu Scrollbar */ .dash-column::-webkit-scrollbar, #ffz-metadata-popup .scroller::-webkit-scrollbar, .search-panel .collection-wrapper::-webkit-scrollbar, .activity-react__all::-webkit-scrollbar, .conversations-list .scroll-container::-webkit-scrollbar, .chatters-container::-webkit-scrollbar, .ffz-scrollbar::-webkit-scrollbar, .ember-chat .chat-settings::-webkit-scrollbar, .conversations-list .conversations-list-inner::-webkit-scrollbar, .conversation-window .conversation-content::-webkit-scrollbar, .chat-history::-webkit-scrollbar, #ffz-metadata-popup[data-key="srl_race"] .table::-webkit-scrollbar, .emoticon-selector-box .all-emotes::-webkit-scrollbar, .ffz-ui-sub-menu-page::-webkit-scrollbar, .ffz-ui-menu-page::-webkit-scrollbar { height: 6px; width: 6px; } .dash-column::-webkit-scrollbar-thumb, #ffz-metadata-popup .scroller::-webkit-scrollbar-thumb, .search-panel .collection-wrapper::-webkit-scrollbar-thumb, .activity-react__all::-webkit-scrollbar-thumb, .conversations-list .scroll-container::-webkit-scrollbar-thumb, .chatters-container::-webkit-scrollbar-thumb, .ffz-scrollbar::-webkit-scrollbar-thumb, .ember-chat .chat-settings::-webkit-scrollbar-thumb, .conversations-list .conversations-list-inner::-webkit-scrollbar-thumb, .conversation-window .conversation-content::-webkit-scrollbar-thumb, .chat-history::-webkit-scrollbar-thumb, #ffz-metadata-popup[data-key="srl_race"] .table::-webkit-scrollbar-thumb, .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb, .ffz-ui-sub-menu-page::-webkit-scrollbar-thumb, .ffz-ui-menu-page::-webkit-scrollbar-thumb { border-radius: 7px; background: rgba(0,0,0,0.7); box-shadow: 0 0 1px 1px rgba(255,255,255,0.25); } .ffz-dark .dash-column::-webkit-scrollbar-thumb, .theatre .dash-column::-webkit-scrollbar-thumb, .ffz-dark #ffz-metadata-popup .scroller::-webkit-scrollbar-thumb, .theatre #ffz-metadata-popup .scroller::-webkit-scrollbar-thumb, .ffz-dark .search-panel .collection-wrapper::-webkit-scrollbar-thumb, .ffz-dark .activity-react__all::-webkit-scrollbar-thumb, .ffz-dark .conversations-list .scroll-container::-webkit-scrollbar-thumb, .ffz-dark .ffz-scrollbar::-webkit-scrollbar-thumb, .ffz-dark .table::-webkit-scrollbar-thumb, .ffz-dark .conversation-window .conversation-content::-webkit-scrollbar-thumb, .ffz-dark .conversations-list .conversations-list-inner::-webkit-scrollbar-thumb, .ffz-dark .conversation-input-bar .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb, .theatre .search-panel .collection-wrapper::-webkit-scrollbar-thumb, .theatre .conversations-list .scroll-container::-webkit-scrollbar-thumb, .theatre .chatters-container::-webkit-scrollbar-thumb, .theatre .ffz-scrollbar::-webkit-scrollbar-thumb, .theatre .ember-chat .chat-settings::-webkit-scrollbar-thumb, .theatre .conversation-window .conversation-content::-webkit-scrollbar-thumb, .theatre .conversations-list .conversations-list-inner::-webkit-scrollbar-thumb, .theatre .chat-history::-webkit-scrollbar-thumb, .theatre .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb, .theatre .ffz-ui-menu-page::-webkit-scrollbar-thumb, .theatre .ffz-ui-sub-menu-page::-webkit-scrollbar-thumb, .dark .chatters-container::-webkit-scrollbar-thumb, .dark .ffz-scrollbar::-webkit-scrollbar-thumb, .dark .ember-chat .chat-settings::-webkit-scrollbar-thumb, .dark .chat-history::-webkit-scrollbar-thumb, .dark .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb, .dark .ffz-ui-menu-page::-webkit-scrollbar-thumb, .dark .ffz-ui-sub-menu-page::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.6); box-shadow: 0 0 1px 1px rgba(0,0,0,0.25); } .chatters-container { overflow-x: hidden !important; overflow-y: auto !important; } /* Fix Moderation Cards */ .ffz-moderation-card { border: 2px solid #cbcbcb; width: 340px; } .moderation-card__close-button { margin-right: 0 !important; } .ffz-moderation-card .extra-interface { padding-top: 0; } .ffz-moderation-card .extra-interface + .extra-interface { margin-top: -10px; } .ember-chat .chat-messages .chat-line--force-timestamp .timestamp, .ffz-moderation-card.ffz-has-info .moderation-card__name .intl-login { display: inline } .ffz-moderation-card.ffz-has-info .flex { position: relative } .ffz-moderation-card .flex .info { position: absolute; bottom: 0; left: 50px; height: 18px; line-height: 18px; z-index: 4; pointer-events: none; } .ffz-moderation-card .info .stat { pointer-events: auto; } .ffz-moderation-card .info.channel-stats .stat { color: #fff !important; padding-left: 10px; } .ffz-moderation-card .info.channel-stats .stat svg { margin: 1px 5px 1px 0; pointer-events: none; } .ffz-moderation-card .info svg path { fill: #fff !important; } .ffz-moderation-card button { margin: 0; padding: 0 5px; color: #6441a4; } .ffz-moderation-card .button.ignore { margin-left: 0 !important } .ffz-moderation-card .moderation-card__controls button figure { padding: 0 } .ffz-moderation-card .follow-button, .ffz-moderation-card .friend-button { max-height: 30px } .ffz-moderation-card .right button:last-of-type, .ffz-moderation-card .mod-controls:last-of-type button:last-of-type { margin-right: 0 } body:not(.ffz-hide-friends) .ffz-moderation-card .follow-button { font-size: 0 !important; padding-right: 0 !important; transition: none !important; } .ffz-moderation-card .button.button--icon-only { padding: 0 2.5px 0 2.5px !important; margin-right: 5px; } .ffz-moderation-card .button.button--icon-only figure { padding: 0 !important } .ffz-moderation-card button:not(.button--icon-only):hover, .ffz-moderation-card button:not(.button--icon-only):focus { color: #fff; background-color: rgba(117,80,186, 1); } .ffz-moderation-card button.message { height: 30px; } .ffz-moderation-card.ffz-is-mod .button.ban, .ffz-moderation-card.ffz-is-mod .button.mod, .ffz-moderation-card.ffz-is-mod .button.unban, .ffz-moderation-card span.right { float: right; } .ffz-moderation-card:focus { outline: none; border-color: #444; /*box-shadow: #000 0 0 5px;*/ } .ffz-moderation-card ul.menu + .moderation-card__actions { border-top: none } .ffz-moderation-card .moderation-card__actions:last-child, .ffz-moderation-card .moderation-card__actions:not(:last-of-type) { border-bottom: none; } .ffz-moderation-card .info, .ffz-moderation-card .moderation-card__name { text-shadow: black 0 0 5px; } .ffz-moderation-card .moderation-card__name { max-width: 235px; } .ffz-moderation-card .ffz-ban-reasons { margin-top: 10px; width: 100%; } .ffz-moderation-card ul.menu { list-style-type: none; padding: 0 !important; border: none !important; border-bottom: 1px solid rgba(0,0,0,0.2) !important; } .ffz-moderation-card ul.menu span { text-decoration: underline } .ffz-dark .ffz-schedule-row, .theatre .ffz-schedule-row, .ffz-dark .ffz-following-row, .theatre .ffz-following-row, .ffz-dark .moderation-card .moderation-card__actions, .theatre .moderation-card .moderation-card__actions, .dark .moderation-card .moderation-card__actions, .ffz-dark .ffz-moderation-card ul.menu, .theatre .ffz-moderation-card ul.menu, .dark .ffz-moderation-card ul.menu { border-bottom-color: rgba(255,255,255,0.2) !important; } .ffz-moderation-card ul.menu li:first-of-type { margin-left: 5px } .ffz-moderation-card ul.menu li:last-of-type { margin-right: 5px } .ffz-moderation-card ul.menu li { display: block; cursor: pointer; float: left; padding: 5px 5px 3px; margin-bottom: -1px; border-bottom: 2px solid transparent; } .ffz-moderation-card ul.menu li:hover { color: #7d5bbe; border-bottom-color: #7d5bbe; } .ffz-dark .ffz-moderation-card ul.menu li, .theatre .ffz-moderation-card ul.menu li, .dark .ffz-moderation-card ul.menu li { color: #999; } .ffz-dark .ffz-moderation-card ul.menu li:hover, .theatre .ffz-moderation-card ul.menu li:hover, .dark .ffz-moderation-card ul.menu li:hover { color: #a68ed2; border-bottom-color: #a68ed2; } .ffz-moderation-card ul.menu li.active { border-bottom-color: #6441a4 } .ffz-moderation-card:not(.ffz-default-tab) > .moderation-card__actions:not(.menu) { display: none } /* dark moderation card */ .dark .ffz-moderation-card, .theatre .ffz-moderation-card { border-color: #1b1b20; } .dark .ffz-moderation-card:focus, .theatre .ffz-moderation-card:focus { border-color: #cbcbcb; } .dark .ffz-moderation-card .moderation-card__actions, .theatre .ffz-moderation-card .moderation-card__actions { background-color: #232329; } .ffz-no-blue .cn-hosting, .ffz-no-blue .dark .ember-chat .moderation-card .moderation-card__actions, .ffz-no-blue .theatre .ember-chat .moderation-card .moderation-card__actions { background-color: #232323; } .moderation-card .moderation-card__name a { color: #fff !important; } /* purge icon */ .mod-icons .purge { background-image: url('//cdn.frankerfacez.com/script/PurgeButton.svg'); background-repeat: no-repeat; } .mod-icons .tb-allow { background-image: url("//cdn.frankerfacez.com/script/button_accept.svg") } .mod-icons .tb-reject { background-image: url("//cdn.frankerfacez.com/script/button_reject.svg") } .mod-icons .pc-dismiss { background-image: url("//cdn.frankerfacez.com/script/button_trash.svg") } .mod-icons .pc-dismiss-local { background-image: url("//cdn.frankerfacez.com/script/button_close.svg") } .mod-icons .custom { text-indent: 0 !important; text-align: center; text-decoration: none; font-size: 18px; font-weight: bold; margin-top: -1px !important; color: #888 !important; background: none !important; } .mod-icons .mod-icon img { pointer-events: none; } /* Chat Rows */ .conversation-window .conversation-chat-line { margin: 0; padding: 3px 10px; } .ember-chat .chat-messages .chat-line { margin: 0; padding: 3px 20px; position: relative; } .theatre .conversation-window .conversation-chat-line, .dark .chat-line, .theatre .chat-line { color: #acacbf; } .ffz-alias-italics .ffz-alias { font-style: italic; } .ember-chat .chat-messages .chat-line.ffz-has-deleted { line-height: 30px; } .chat-line.ffz-deleted > span { opacity: 0.5; } .chat-line.ffz-deleted > span.message { text-decoration: line-through; } .chat-line.ffz-deleted:hover > span { opacity: 0.9; } .chat-line.ffz-deleted:hover > span.message { text-decoration: none; } body:not(.ffz-bttv) .ember-chat-container:not(.chatReplay) .more-messages-indicator, body:not(.ffz-bttv) .chat-container:not(.chatReplay) .more-messages-indicator { /* This looks better when it's full width. */ margin: 0 -20px; } .chat-line .message { word-break: break-word; } .ember-chat .chat-messages .tse-scroll-content { padding: 0; } /* Emoticon Tooltips */ .ffz-wide-tip hr { margin: 5px 0; } .ffz-wide-tip .tipsy-inner { min-width: 300px; max-width: 600px; text-align: left; position: relative; } .ffz-wide-tip span.stat { float: right; margin-left: 5px; } .ffz-wide-tip b { margin-right: 20px; } .ffz-wide-tip span.stat svg { float: left; margin: 1px; } .ffz-wide-tip svg path { fill: #fff; } .ffz-wide-tip span.playing { opacity: 0.7; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; position: relative; left: 0; right: 0; } .tipsy .tipsy-inner { white-space: pre-wrap; } /* Menu Page Loader */ .ffz-ui-sub-menu-page:empty, .ffz-ui-menu-page:empty { overflow: hidden; } .ffz-loading-spinner:after, .chat-history.loading:after, .ffz-ui-sub-menu-page:empty::after, .ffz-ui-menu-page:empty::after { content: " "; display: block; width: 80px; height: 63px; background-image: url("//cdn.frankerfacez.com/script/spinner-dark.png"); margin: 50px auto; animation: ffz-rotateplane 1.2s infinite linear; } @keyframes ffz-rotateplane { 0% { transform: perspective(120px) rotateY(90deg) } 25% { transform: perspective(120px) rotateY(180deg) } 75% { transform: perspective(120px) rotateY(180deg) rotateX(180deg) } 100% { transform: perspective(120px) rotateY(90deg) rotateX(180deg) } } /* Menu About Page */ #ffz-chat-menu .center { text-align: center } .ffz-about-table { width: 100%; } .ffz-about-table td:first-child { text-align: left; width: 100%; } .ffz-about-table .debug td { padding-top: 10px; opacity: 0.8; font-size: 10px; } .ffz-about-subheading { /*text-transform: uppercase;*/ letter-spacing: 2px; margin: -5px 0 5px; } .button.ffz-news, .button.ffz-donate { margin-left: 10px; color: #fff !important; padding: 0 10px; font-size: 12px; } .button.ffz-issues { background: #750000; } .button.ffz-issues:not(.disabled):hover { background: #8a0303; } .button.ffz-ideas { background: #004e75; } .button.ffz-ideas:not(.disabled):hover { background: #035d8a; } .button.ffz-donate { background: #00b132; } .button.ffz-donate:not(.disabled):hover { background: #08c43d; } .button.ffz-news { background: #755000; } .button.ffz-news:not(.disabled):hover { background: #8a5f03; } /* Dumb Fixes */ .channel-stats .stat { vertical-align: top; } .ffz-bttv .no-bttv { display: none; } .chat-container.dark, .app-main.theatre .chat-container, .app-main.theatre .ember-chat-container.chat-container { box-shadow: none; } /* Banned Words */ .deleted-word { font-weight: bold; opacity: 0.35; cursor: pointer; } /* Unsafe Links */ a.unsafe-link { color: #a64141 !important; } .theatre a.unsafe-link, .chat-container.dark a.unsafe-link, .ember-chat-container.dark a.unsafe-link { color: #d28e8e !important; } /* Chat Menu */ .ffz-room-list > div.ffz + ul.room-list { display: block !important; } .ffz-room-list > div:not(.ffz), .ffz-room-list > ul:not(.ffz) { display: none !important; } .ffz-room-list > table { padding: 15px 0 0; } .ffz-room-list > table + table { margin-top: 10px; } .ffz-room-list > table th { padding: 2px 5px; color: #8c8c8c; font-weight: normal; text-transform: uppercase; } .ffz-room-list > table > tbody tr { line-height: 26px; } .ffz-room-list > table td { padding: 2px 0; text-align: center; } .ffz-room-list > table th:first-child, .ffz-room-list > table td:nth-child(0n+2) { width: 100%; text-align: left; } .ffz-room-row { cursor: pointer; } .ffz-room-list > table th:first-child, .ffz-room-list > table td:first-child { padding-left: 18px; } .ffz-room-list > table th:last-child, .ffz-room-list > table td:last-child { padding-right: 18px; } .ffz-room-list td svg { margin: 5px 10px 5px 0; float: left; } .ffz-dark .ffz-room-row { color: #a68ed2; } .ffz-dark .ffz-room-row svg path { fill: #a68ed2; } .ffz-room-row { color: #6441a5; } .ffz-room-row svg path { fill: #6441a5; } .ffz-room-row:hover svg path, .ffz-room-row:focus svg path, .ffz-room-row.active svg path { fill: #fff; } .ffz-room-row:hover, .ffz-room-row:focus, .ffz-room-row.active { background-color: #6441A5; color: #fff !important; } th.ffz-row-switch { min-width: 40px; } .ffz-room-row a.leave-chat { float: right; padding: 0 7px; } .ffz-row-switch .switch { float: none; margin: 5px 0 -4px; } .ffz-row-switch .switch.active { background-color: #362359; } /* Chat Tabs */ .ember-chat .chat-room { z-index: 5; } #ffz-group-tabs { padding: 10px 10px 6px; box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.2); display: flex; flex-wrap: wrap; } .ffz-chat-tab { flex-grow: 1; position: relative; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; min-width: 70px; cursor: pointer; padding: 5px; margin: 0 4px 4px 0; display: inline-block; background-color: rgba(127,127,127,0.1); color: #6441A5; } .ffz-chat-tab svg path { fill: #6441A5; } #ffz-group-tabs .button { height: 18px; padding-bottom: 10px; margin-bottom: -10px; margin-right: 4px; } #ffz-group-tabs .button.button--icon-only svg { margin: 6px 0; } .ffz-chat-tab svg { width: 18px; height: 18px; margin: -5px 5px -5px 0; } .ffz-chat-tab:hover, .ffz-chat-tab:focus, .ffz-chat-tab.active { background-color: #6441A5; color: #fff !important; } .ffz-chat-tab.tab-mentioned { background-color: rgba(128,50,50,0.1); color: red !important; } .ffz-chat-tab.tab-mentioned:not(.active):hover, .ffz-chat-tab.tab-mentioned:not(.active):focus { background-color: #a54141; color: #fff !important; } .ffz-chat-tab:not(.active):hover, .ffz-chat-tab:not(.active):focus { background-color: #7550ba; } .ffz-chat-tab:hover svg path, .ffz-chat-tab:focus svg path, .ffz-chat-tab.active svg path { fill: #fff !important; } .ffz-chat-tab.active { cursor: default; } #ffz-group-tabs .button .notifications:empty, .ffz-room-row td > span:empty, .ffz-chat-tab span:empty { display: none; } .ffz-room-row td > span:not(.intl-login), .ffz-chat-tab span { padding: 0 4px; display: inline-block; border-radius: 2px; text-align: center; background-color: #f2f2f2; color: #666; position: absolute; right: 5px; } .ffz-room-row td { position: relative; } .ffz-room-row td > span:not(.intl-login) { line-height: 16px; margin: 5px 0; } .ffz-room-row.row-mentioned { background-color: rgba(128,50,50,0.1); color: red !important; } .ffz-room-row.row-mentioned:not(.active):hover, .ffz-room-row.row-mentioned:not(.active):focus { background-color: #a54141; color: #fff !important; } #ffz-group-tabs .button .notifications { background-color: #d44949; top: 0; right: 0; position: absolute; height: 12px; line-height: 12px; padding: 0 3px; width: auto; color: #fff; font-size: 9px; vertical-align: middle; margin: 0; } /* Dark Group Tabs */ .app-main.theatre #ffz-group-tabs, .chat-container.dark #ffz-group-tabs, .ember-chat-container.dark #ffz-group-tabs { box-shadow: inset 0 -1px 0 0 #32323e; } .app-main.theatre .ffz-chat-tab, .chat-container.dark .ffz-chat-tab, .ember-chat-container.dark .ffz-chat-tab { color: #B9A3E3; } .ffz-dark .ffz-room-row td > span:not(.intl-login), .app-main.theatre .ffz-chat-tab span, .chat-container.dark .ffz-chat-tab span, .ember-chat-container.dark .ffz-chat-tab span { background-color: #19191f; color: #fff; } .app-main.theatre .ffz-chat-tab svg path, .chat-container.dark .ffz-chat-tab svg path, .ember-chat-container.dark .ffz-chat-tab svg path { fill: #B9A3E3; } /* Minimalistic Chat */ body.ffz-minimal-chat-head .ember-chat > .chat-header, body.ffz-minimal-chat-head .ember-chat #ffz-group-tabs, body.ffz-minimal-chat-input .ember-chat .chat-buttons-container { display: none !important; } /*body.ffz-minimal-chat .ember-chat .chat-messages, body.ffz-minimal-chat .ember-chat .chat-interface .emoticon-selector { bottom: 33px; }*/ body.ffz-minimal-chat-input .ember-chat .chat-interface .emoticon-selector { right: 10px; } body.ffz-minimal-chat-input .ember-chat .chat-interface .emoticon-selector .dropmenu { margin-bottom: 10px; } body.ffz-minimal-chat-head .ember-chat .chat-room { top: 0 !important; } body.ffz-minimal-chat-input .ember-chat .chat-interface { /*height: 33px !important;*/ padding: 0; } body.ffz-minimal-chat-input .ember-chat .chat-interface .textarea-contain { top: 0 !important; margin: 0 !important; height: auto; } body.ffz-minimal-chat-input .ember-chat .chat-interface .textarea-contain textarea { /*height: 33px !important;*/ overflow: hidden; border-bottom: 0 !important; border-left: 0; border-right: 0; } /* Chat Pause */ .ember-chat .chat-interface .more-messages-indicator.ffz-freeze-indicator { opacity: 1; cursor: default; pointer-events: none; } .chat-container:not(.chatReplay) .chat-interface .more-messages-indicator.ffz-freeze-indicator { top: 0; } /* Chat History */ .ember-chat .moderation-card .chat-history, .chat-history { list-style-type: none; padding: 0; max-height: 320px; overflow-y: auto; } .moderation-card .chat-history.live-history { max-height: 200px; } .cp-hidden { display: inline-block; width: 1px; height: 1px; margin-left: -1px; overflow: hidden; } .chat-history.moderation-card__actions li:first-child { padding-top: 10px; } .chat-history.moderation-card__actions li:last-child { padding-bottom: 10px; } .chat-history .chat-line { overflow: hidden; line-height: 20px; padding: 4px 10px; word-wrap: break-word; list-style-position: unset; } .chat-history .timestamp-line { text-align: center; color: #8c8c8c; font-size: 1.1rem; } .ember-chat .moderation-card .moderation-card__actions.chat-history .chat-line.action { float: none; margin-right: 0px; } .chat-history .chat-line.notification .from, .chat-history .chat-line.notification .colon, .chat-history .chat-line.admin .from, .chat-history .chat-line.admin .colon { display: none } .chat-history .chat-line.notification .message, .chat-history .chat-line.admin .message { color: #666; } .chat-history .timestamp { color: #8c8c8c; margin-right: 5px; } .chat-history .chat-line:not(.original-sender) span.from:hover, .chat-history .timestamp.ts-action:hover { cursor: pointer; text-decoration: underline; } .chat-history .chat-line.admin.original-msg .message { color: #000 } .ffz-dark .chat-history .chat-line.admin.original-msg .message, .theatre .chat-history .chat-line.admin.original-msg .message, .dark .chat-history .chat-line.admin.original-msg .message { color: #fff } .chat-history.loading { position: relative; min-height: 160px; overflow-y: hidden !important; } .chat-history.loading li { pointer-events: none; } .chat-history .from { font-weight: 700; } .chat-history.loading:before { content: " "; display: block; position: absolute; z-index: 999; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(128,128,128,0.8); } .theatre .chat-history.loading:before, .dark .chat-history.loading:before { background-color: rgba(0,0,0,0.8); } .chat-history.loading:after { visibility: visible; clear: none; position: absolute; top: 0; left: 50%; margin-left: -40px; z-index: 1000; } .moderation-card .ffz-back-button, .moderation-card .ffz-load-more { display: block; text-align: center; padding: 0 1rem !important; margin: 10px; } .ffz-moderation-card .chat-back-button { border-bottom: 1px solid rgba(0,0,0,0.2) !important; } .ffz-chevron { position: relative; display: inline-block; height: 1rem; width: 1rem; margin: 0 .5rem; } .ffz-chevron:before { position: absolute; display: block; content: ''; border: .5rem solid transparent; } .ffz-back-button .ffz-chevron { margin-left: -1rem; } .ffz-back-button .ffz-chevron:before { border-right-color: #fff; } .ffz-load-more:not(.load-after) .ffz-chevron:before { top: -.25rem; border-bottom-color: #fff; } .ffz-load-more.load-after .ffz-chevron:before { top: .25rem; border-top-color: #fff; } .ember-chat .moderation-card .back-button { border: 1px solid rgba(0,0,0,0.2); border-top: none; float: none; display: block; width: 100%; background-color: #fff; } .ember-chat .moderation-card .back-button:hover { background-color: #6441A5 !important; color: #fff !important; } .theatre .moderation-card .back-button, .dark .moderation-card .back-button { background-color: #232329; } /* Room State */ .ffz.room-state.stat { line-height: 30px; margin-left: -10px; margin-right: 15px; cursor: default; } .ffz.room-state.faded { opacity: 0.5 } .ffz.room-state.truncated span { font-size: 8px; } .button.primary.ffz-waiting:not(:hover) { background-color: rgba(0,0,0,0.1); color: #32323e; } .button.primary.ffz-waiting.ffz-banned:not(:hover) { background-color: rgba(128,0,0,0.1); color: #88323e; } .chat-container.dark .button.primary.ffz-waiting:not(:hover), .app-main.theatre .button-primary.ffz-waiting:not(:hover), .ember-chat-container.dark .button-primary.ffz-waiting:not(:hover) { background-color: rgba(255,255,255,0.1); color: #fff; } .chat-container.dark .button.primary.ffz-waiting.ffz-banned:not(:hover), .app-main.theatre .button-primary.ffz-waiting.ffz-banned:not(:hover), .ember-chat-container.dark .button-primary.ffz-waiting.ffz-banned:not(:hover) { background-color: rgba(255,128,128,0.1); color: #f66; } /* Swap Sidebars */ body[data-current-path^="user."].ffz-portrait #right_close { transform: rotate(90deg); } body[data-current-path^="user."].ffz-portrait .archives-contain .more-archives { width: 100%; } body:not([data-current-path^="user."]) .ffz-sidebar-swap .ember-chat .chat-interface .emoticon-selector, .ffz-sidebar-swap:not(.ffz-portrait) .ember-chat .chat-interface .emoticon-selector { right: auto; left: 20px; } .ffz-sidebar-swap .search-panel--slide { left: auto; right: 240px; } .ffz-sidebar-swap .cn-bar-fixed { right: 50px; } .ffz-sidebar-swap:not(.ffz-sidebar-minimize) #left_col.open ~ #main_col .cn-bar-fixed { right: 240px; } .ffz-sidebar-swap #left_col { left: auto; right: 0; } .ffz-sidebar-swap #right_col { right: auto; left: 0; } .ffz-sidebar-swap:not(.ffz-portrait) #right_close, .ffz-sidebar-swap #left_close { transform: scaleX(-1); } .ffz-sidebar-swap #right_close { right: auto; left: 5px; } .ffz-sidebar-swap #left_close { right: 5px; left: auto; } .ffz-sidebar-swap #main_col { margin-left: 340px; margin-right: 240px; } .ffz-sidebar-swap .app-main.theatre #main_col { margin-left: 340px; margin-right: 0px; } .ffz-sidebar-swap .app-main.theatre #main_col.expandRight { margin-left: 0px; } .ffz-sidebar-swap .exit-theatre { left: 30px; } .ffz-sidebar-swap #main_col.expandLeft { margin-right: 50px; } .ffz-sidebar-swap #main_col.expandRight { margin-left: 0px; } .ffz-sidebar-swap #flyout { left: auto !important; right: 50px; } .ffz-sidebar-swap #flyout .content { right: 10px; } .ffz-sidebar-swap #flyout .point { left: auto; right: -1px; } .ffz-sidebar-swap #flyout .point:before { border-left-color: #fff; border-right-color: transparent; right: auto; left: 0px; } .ffz-sidebar-swap #flyout .point:after { border-right-color: transparent; border-left-color: rgba(0,0,0,0.25); right: auto; left: 1px; } .ffz-dark.ffz-sidebar-swap #flyout .point:after { border-left-color: #32323e; border-right-color: transparent; } .ffz-dark.ffz-sidebar-swap #flyout .point:before { border-left-color: #101010; border-right-color: transparent; } /* No Blue */ .ffz-no-blue .theme--dark .form__input, .ffz-no-blue .form--theme-dark .form__input { background-color: rgba(255,255,255,0.05); box-shadow: rgba(255,255,255,0.1) 0 0 0 1px inset; } .ffz-no-blue .theme--dark .form__input:focus, .ffz-no-blue .form--theme-dark .form__input:focus { box-shadow: rgba(255,255,255,0.3) 0 0 0 1px inset; } .ffz-no-blue .theatre .ember-chat .chat-interface .textarea-contain textarea { background-color: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } .ffz-no-blue #carousel .nav { background-color: rgba(25,25,25,.5); } .ffz-no-blue .warp__item a:not(.warp__logo):hover { background-color: #2b2b2b; } .ffz-no-blue .warp__item--toggled > a:not(.warp__logo) { background-color: #2b2b2b; box-shadow: 3px 0 0 #a3a3a3 inset; } .ffz-no-blue .theatre .conversations-list-bottom-bar, .ffz-no-blue.ffz-dark .conversations-list-bottom-bar, .ffz-no-blue .theatre .conversations-list, .ffz-no-blue.ffz-dark .conversations-list, .ffz-no-blue .theatre .conversations-list-header, .ffz-no-blue .theatre .conversation-window, .ffz-no-blue.ffz-dark .conversation-window, .ffz-no-blue .theatre .conversation-system-message, .ffz-no-blue.ffz-dark .conversation-system-message, .ffz-no-blue .app-main.theatre .bits-card, .ffz-no-blue .dark .bits-card, .ffz-no-blue .app-main.theatre .bits-card--standard, .ffz-no-blue .dark .bits-card--standard, .ffz-no-blue .warp, .ffz-no-blue #large_nav .content, .ffz-no-blue #small_nav .content, .ffz-no-blue .chat-container.dark, .ffz-no-blue .app-main.theatre .chat-container, .ffz-no-blue .ember-chat-container.dark, .ffz-no-blue .app-main.theatre .ember-chat-container.chat-container, .ffz-no-blue .chat-container.dark .chat-hidden-overlay, .ffz-no-blue .app-main.theatre .chat-container .chat-hidden-overlay, .ffz-no-blue .ember-chat-container.dark .chat-hidden-overlay, .ffz-no-blue .app-main.theatre .ember-chat-container.chat-container .chat-hidden-overlay, .ffz-no-blue .chat-container.dark .chatters-view, .ffz-no-blue .app-main.theatre .chat-container .chatters-view, .ffz-no-blue .ember-chat-container.dark .chatters-view, .ffz-no-blue .app-main.theatre .ember-chat-container.chat-container .chatters-view, .ffz-no-blue .chat-container.dark .emoticon-selector .emoticon-selector-box, .ffz-no-blue .app-main.theatre .chat-container .emoticon-selector .emoticon-selector-box, .ffz-no-blue .ember-chat-container.dark .emoticon-selector .emoticon-selector-box, .ffz-no-blue .app-main.theatre .ember-chat-container.chat-container .emoticon-selector .emoticon-selector-box, .ffz-no-blue .chat-container.dark .emoticon-selector .emoticon-grid, .ffz-no-blue .app-main.theatre .chat-container .emoticon-selector .emoticon-grid, .ffz-no-blue .ember-chat-container.dark .emoticon-selector .emoticon-grid, .ffz-no-blue .app-main.theatre .ember-chat-container.chat-container .emoticon-selector .emoticon-grid, .ffz-no-blue .chat-container.dark .chat-commands-dropdown, .ffz-no-blue .app-main.theatre .chat-container .chat-commands-dropdown, .ffz-no-blue .ember-chat-container.dark .chat-commands-dropdown, .ffz-no-blue .app-main.theatre .ember-chat-container.chat-container .chat-commands-dropdown, .ffz-no-blue .chat-container.dark .chat-commands-dropdown li, .ffz-no-blue .app-main.theatre .chat-container .chat-commands-dropdown li, .ffz-no-blue .ember-chat-container.dark .chat-commands-dropdown li, .ffz-no-blue .app-main.theatre .ember-chat-container.chat-container .chat-commands-dropdown li, .ffz-no-blue.error_500, .ffz-no-blue.error_400, .ffz-no-blue .takeover #carousel, .ffz-no-blue #carousel_and_background, .ffz-no-blue #carousel .items .pic img, .ffz-no-blue .app-main.theatre .archives-contain, .ffz-no-blue.ffz-dark .archives-contain, .ffz-no-blue #content .turbo_landing { background-color: #191919; } .ffz-no-blue .app-main.theatre .bits-footer, .ffz-no-blue .dark .bits-footer, .ffz-no-blue .theatre .conversation-input-bar textarea, .ffz-no-blue .theatre input.text, .ffz-no-blue .theatre input.countries-input, .ffz-no-blue .theatre .recurly input, .ffz-no-blue .recurly .theatre input { background-color: #202020; } .ffz-no-blue .warp__anchor, .ffz-no-blue .warp__item--anchor, .ffz-no-blue .warp__drawer, .ffz-no-blue .leaf, .ffz-no-blue .dark .emoticon-selector .tabs, .ffz-no-blue .theatre .emoticon-selector .tabs, .ffz-no-blue .app-main.theatre .archives-contain .list-video:hover, .ffz-no-blue.ffz-dark .archives-contain .list-video:hover, .ffz-no-blue .theatre .moderation-card .back-button, .ffz-no-blue .dark .moderation-card .back-button, .ffz-no-blue .chat-container.dark .chat-interface .emoticon-selector .tabs, .ffz-no-blue .app-main.theatre .chat-container .chat-interface .emoticon-selector .tabs, .ffz-no-blue .ember-chat-container.dark .chat-interface .emoticon-selector .tabs, .ffz-no-blue .app-main.theatre .ember-chat-container.chat-container .chat-interface .emoticon-selector .tabs { background-color: #232323; } .ffz-no-blue .theatre .conversations-list-bottom-bar, .ffz-no-blue.ffz-dark .conversations-list-bottom-bar, .ffz-no-blue .theatre .conversations-list .conversation-preview-line, .ffz-no-blue.ffz-dark .conversations-list .conversation-preview-line, .ffz-no-blue .theatre .conversation-window, .ffz-no-blue.ffz-dark .conversation-window { color: #8c8c8c; } .ffz-no-blue .theatre .conversations-list, .ffz-no-blue.ffz-dark .conversations-list { border-color: #323232; } .ffz-no-blue .theatre .converations-list:before, .ffz-no-blue.ffz-dark .conversations-list:before { border-color: transparent; border-top-color: #323232; } .ffz-no-blue .theatre .conversations-list:after, .ffz-no-blue.ffz-dark .conversations-list:after { border-color: transparent; border-top-color: #191919; } .ffz-no-blue .theatre .conversations-list .conversations-list-header, .ffz-no-blue.ffz-dark .conversations-list .conversations-list-header, .ffz-no-blue .theatre .conversations-list .conversations-list-item, .ffz-no-blue.ffz-dark .conversations-list .conversations-list-item { border-bottom-color: #323232; } .ffz-no-blue .theatre .convoHeader, .ffz-no-blue.ffz-dark .convoHeader, .ffz-no-blue .theatre .conversations-list .search-divider, .ffz-no-blue.ffz-dark .conversations-list .search-divider, .ffz-no-blue.ffz-dark .conversations-list .conversations-list-header, .ffz-no-blue .theatre .conversation-window.has-focus .convoHeader, .ffz-no-blue.ffz-dark .conversation-window.has-focus .convoHeader, .ffz-no-blue .theatre .conversations-list .conversations-list-item:hover, .ffz-no-blue.ffz-dark .conversations-list .conversations-list-item:hover { background-color: #121212; } /* Following Count */ li[data-name="following"] a { position: relative; } .ffz-follow-count:empty { display: none; } .ffz-follow-count { display: inline-block; border-radius: 2px; text-align: center; color: #fff; } #header_following .ffz-follow-count { margin: 0 5px; padding: 0 5px; line-height: 20px; background-color: rgba(25,25,25,0.5); } #left_col.open .warp__item .ffz-follow-count, #large_nav .ffz-follow-count, .ffz-dark #header_following .ffz-follow-count { background-color: rgba(127,127,127,0.5); } #left_col.open .warp__item .ffz-follow-count, #large_nav .ffz-follow-count { position: absolute; right: 10px; top: 8px; line-height: 14px; padding: 2px 5px; } #left_col.open .warp__item .ffz-follow-count { top: 6px; right: 20px; } #left_col.closed .warp__item .ffz-follow-count, #small_nav .ffz-follow-count { position: absolute; bottom: 2px; right: 5px; padding: 2px; font-size: 10px; line-height: 10px; background-color: #191919; color: rgba(255,255,255,0.5); } #small_nav .game_filter.selected a .ffz-follow-count, #small_nav .content ul li a:hover .ffz-follow-count { background-color: #101014; } /* Image Tooltips */ .ffz-clip-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; } .ffz-image-hover { border:none; max-width: 186px; max-height: 186px; overflow: hidden; } .emoticon.ffz-image-hover { display: block; margin: 5px auto; } .ffz-yt-thumb { max-height: 90px; } /* Player Captions */ .ffz-dark .player-modal__content, .theatre .player-modal__content { background: #101010; color: #ccc; box-shadow: 0 1px 1px rgba(255,255,255,.1); } .ffz-dark .player-modal__header, .theatre .player-modal__header { color: #ccc; } .ffz-dark .player-modal__content label, .theatre .player-modal__content label { color: #aaa; } .ffz-dark .cc-font-size, .theatre .cc-font-size { background-color: #101010; border-color: #333; } .ffz-dark .cc-color-palette__square:not(:hover), .theatre .cc-color-palette__square:not(:hover), .ffz-dark .cc-edge-palette__square:not(:hover), .theatre .cc-edge-palette__square:not(:hover), .ffz-dark .cc-preset-square:not(:hover):not(.js-cc-preset-selected), .theatre .cc-preset-square:not(:hover):not(.js-cc-preset-selected) { border-color: #101010; } .ffz-dark label.cc-edge-palette__square, .theatre label.cc-edge-palette__square { color: #fff } /* Classic Player */ .ffz-classic-player .player .player-video { position: absolute; top: 0; bottom: 32px; left: 0; right: 0; } .ffz-classic-player .player.player-isvod .player-video { bottom: 36px; } .ffz-classic-player .player .player-controls-bottom { opacity: 1; padding-top: 0; border-top: 1px solid #000; border-bottom: 1px solid #000; background: -webkit-linear-gradient(bottom, #252525, #666); background: linear-gradient(to top, #252525, #666); } .ffz-classic-player .theatre .player .player-video, .ffz-classic-player .player[data-isfullscreen="true"] .player-video { bottom: 0; } .ffz-classic-player .theatre .player .player-controls-bottom, .ffz-classic-player .player[data-isfullscreen="true"] .player-controls-bottom { margin-bottom: -32px; -webkit-transition: margin-bottom .2s ease-out, padding-bottom .2s ease-out; transition: margin-bottom .2s ease-out, padding-bottom .2s ease-out; } .ffz-classic-player:not(.ffz-top-conversations):not(.ffz-theatre-conversations) .theatre .player .player-controls-bottom, .ffz-classic-player:not(.ffz-top-conversations):not(.ffz-theatre-conversations) .theatre .player[data-controls=true] .player-controls-bottom, .ffz-classic-player .theatre .player[data-isfullscreen="true"] .player-controls-bottom, .ffz-classic-player .theatre .player[data-isfullscreen="true"][data-controls=true] .player-controls-bottom { padding-bottom: 0; } .ffz-classic-player .theatre .player.player-isvod .player-controls-bottom, .ffz-classic-player .player.player-isvod[data-isfullscreen="true"] .player-controls-bottom { margin-bottom: -36px; } .ffz-classic-player .theatre .player[data-controls=true] .player-controls-bottom, .ffz-classic-player .player[data-isfullscreen="true"][data-controls="true"] .player-controls-bottom { margin-bottom: 0; } .ffz-classic-player:not(.ffz-top-conversations):not(.ffz-theatre-conversations) .theatre .player[data-isfullscreen=false][data-controls=true] .player-controls-bottom { padding-bottom: 40px; } .ffz-classic-player .player .player-button { padding-bottom: 0; height: 30px; } .ffz-classic-player .player .player-slider:before, .ffz-classic-player .player .player-button, .ffz-classic-player .player .player-slider .ui-slider-handle, .ffz-classic-player .player .player-seek .player-seek__time { -webkit-filter: drop-shadow(0px 0px 1px #000); filter: drop-shadow(0px 0px 1px #000); } .ffz-classic-player .player .player-slider .ui-slider-handle { background-color: #aeaeae; } .ffz-classic-player .player .player-button svg { fill: #aeaeae; } .ffz-classic-player .player .player-seek .player-seek__time { color: #ddd; } .ffz-player-volume .player .player-volume__slider-container, .ffz-classic-player .player .player-volume__slider-container { width: auto; } .ffz-classic-player .player .player-seek { padding: 0; } .ffz-classic-player .player .player-seek .player-slider { margin: -1em 0; } .ffz-classic-player .player .player-seek .player-seek__time-container { position: absolute; bottom: -12px; left: 210px; } .ffz-classic-player .player .player-seek .player-seek__time + .player-seek__time:before { content: "/"; padding: 0 5px; opacity: 0.8; } .player-button--close { top: 0 } /* Directory Logos */ .item .meta .title a a, .item .meta .title a img { pointer-events: none } .ffz-directory-logo .card__body, .ffz-directory-logo .meta { padding-top: 5px; } .ffz-directory-logo .card__title, .ffz-directory-logo .meta p.title { padding-top: 4px; min-height: 24px; } .ffz-directory-logo .meta p { width: auto; } .ffz-directory-logo .profile-photo { float: left; height: 46px; width: 46px; margin-right: 10px; } .ffz-directory-logo .profile-photo.is-csgo { margin-bottom: 20px; } /* Flip Dashboard */ .ffz-flip-dashboard #dash_main #controls_column { float: right; margin-left: 20px; margin-right: 0; } .ffz-flip-dashboard #dash_main .dash-chat-column { right: inherit; left: 0; margin-right: 20px; } /* Chat Interactions Fixes */ body:not(.ffz-bttv) .ember-chat .chat-commands-dropdown { z-index: 998; /* 1 less than the header */ padding: 0; margin-top: -1px; background-color: #9265d5 !important; } body:not(.ffz-bttv) .ember-chat .chat-commands-dropdown li { border: none; } body:not(.ffz-bttv) .ember-chat .chat-commands-dropdown li + li { border-top: 1px solid rgba(0,0,0,0.25); } body:not(.ffz-bttv) .app-main.theatre .chat-container .chat-commands-dropdown li, body:not(.ffz-bttv) .dark .ember-chat .chat-commands-dropdown li, body:not(.ffz-bttv) .ember-chat .chat-commands-dropdown li:hover { background-color: rgba(0,0,0,0.25) !important; color: #fff; } body:not(.ffz-bttv) .app-main.theatre .chat-container .chat-commands-dropdown li:hover, body:not(.ffz-bttv) .dark .ember-chat .chat-commands-dropdown li:hover { background-color: rgba(0,0,0,0.75) !important; color: #fff !important; } /* Conversations */ .ffz-theatre-conversations .app-main.theatre .conversations-content { display: none } body:not(.ffz-bttv) .conversation-window .new-message-divider + .timestamp-line { margin-top: -3px; } /* ignore-cta is a bit silly right now */ body:not(.ffz-bttv) .conversation-window .ignore-cta:not(.hidden) + .conversation-content { padding-top: 76px; } .conversation-window .conversation-system-message.ignore-cta-container { padding-right: 26px; } /* Hide that which should be hidden. */ .conversation-window.collapsed .ignore-cta, .conversation-chat-line.action .colon, .conversation-input-bar .emoticon-selector .tabs, .conversation-preview-line .badges { display:none } .conversation-window.has-unread .convoHeader .username { color: #fff !important; } /* Top Conversations */ body:not(.ffz-top-conversations) .conversations-list-bottom-bar { border-bottom: none; } .ffz-top-conversations .conversations-content { left: 30px; right: 30px; } .ffz-top-conversations .conversation-window, .ffz-top-conversations .conversations-content { bottom: inherit; top: 0px; } .ffz-top-conversations .conversation-window.collapsed .convoHeader { box-shadow: none; } .ffz-top-conversations .conversations-list-container.list-displayed { top: 243px; } .ffz-top-conversations .conversations-list-bottom-bar { border-top: none; } .ffz-top-conversations .conversations-content .total-unread { top: inherit; bottom: -10px; } .ffz-theatre-conversations .theatre .player-controls-bottom, .ffz-theatre-conversations .theatre .player[data-controls=true] .player-controls-bottom, .ffz-top-conversations .theatre .player-controls-bottom, .ffz-top-conversations .theatre .player[data-controls=true] .player-controls-bottom { padding-bottom: 0; } .ffz-top-conversations .theatre .player-livestatus { top: 40px; } .ffz-top-conversations:not([data-current-path="user.dashboards.index"]) #directory-list { padding-top: 50px; } /* Minimize Conversations */ /*.ffz-minimize-conversations .conversation-window,*/ .ffz-minimize-conversations .conversations-list-container { transition: bottom ease-in-out 75ms, top ease-in-out 75ms, padding-bottom ease-in-out 75ms, padding-top ease-in-out 75ms; } .ffz-minimize-conversations .conversations-list-container, .ffz-minimize-conversations .conversations-content:hover { pointer-events: all; } .ffz-minimize-conversations:not(.ffz-top-conversations) .conversations-content:hover .conversation-window.collapsed:not(.has-unread), .ffz-minimize-conversations:not(.ffz-top-conversations) .conversations-content:hover .conversations-list-container:not(.list-displayed) { bottom: 0; padding-top: 0; } .ffz-minimize-conversations:not(.ffz-top-conversations) .conversation-window.collapsed:not(.has-unread), .ffz-minimize-conversations:not(.ffz-top-conversations) .conversations-list-container:not(.list-displayed) { bottom: -30px; padding-top: 30px; } .ffz-minimize-conversations.ffz-top-conversations .conversations-content:hover .conversation-window.collapsed:not(.has-unread), .ffz-minimize-conversations.ffz-top-conversations .conversations-content:hover .conversations-list-container:not(.list-displayed) { top: 0; padding-bottom: 0; } .ffz-minimize-conversations.ffz-top-conversations .conversation-window.collapsed:not(.has-unread), .ffz-minimize-conversations.ffz-top-conversations .conversations-list-container:not(.list-displayed) { top: -30px; padding-bottom: 30px; } /* Following Page */ .directory_header .nav li.ffz-manage-following { float: right; margin-right: 0; } .user.item { position: relative; } .card__img .overlay_info.length, .user.item .overlay_info.length { position: absolute; top: 5px; right: 15px; z-index: 1; display: inline-block; cursor: pointer; padding: 0 5px; font-size: 11px; line-height: 22px; background: black; color: #fff; opacity: 0.75; } .card__img .overlay_info.length { right: 5px } .card__img .overlay_info.length svg, .user.item .overlay_info.length svg { float: left; margin: 3px 5px 3px 0; } .card__img .overlay_info.length svg path, .user.item .actions .follow svg path, .user.item .overlay_info.length svg path { fill: #fff; } .user.item .actions { margin-top: 5px; display: flex; flex-wrap: nowrap; } .user.item .actions button { display: block; font-size: 11px; text-align: center; height: 25px; line-height: 25px; } .user:not(.followed) .actions .follow { width: 100%; } .user.item .actions .notifications { flex-grow: 1; padding: 0; } .user.item .actions button:hover, .user.item .actions .notifications-on { background-color: #6441A5; color: #fff !important; } .user.followed .actions .follow span, .user.item:not(.followed) .actions .notifications, .user:not(.followed) .actions .follow .svg-unheart, .user.followed .actions .follow:not(:hover) .svg-unheart, .user.followed .actions .follow:hover .svg-heart { display: none; } .user.followed .actions .follow { float: left; width: 25px; margin-right: 5px; background-color: #00b132; } .user.followed .actions .follow:hover { background-color: #d44949; } .user.item .actions .follow svg { margin: 4px 0 -5px -5.5px; } /* Creative Directory */ /* Make sure the fancy banner art goes all the way up */ .ffz-top-conversations .ct-banner-container { margin-top: -50px } body:not(.ffz-tags-on-channel) .tw-title--tall { height: 60px } /*body:not(.ffz-tags-on-channel) #broadcast-meta .ct-tags,*/ .cn-metabar__title .ct-tags, /*body:not(.ffz-creative-showcase) .ct-banner-handler .tower > div:last-child,*/ body:not(.ffz-creative-showcase) .ct-spotlight-container { display: none; } /* Content-Box~! Down with Twitch randomly changing the box-sizing for everything! */ #ffz-channel-table *, #ffz-group-table *, .ffz-ui-popup * { box-sizing: content-box; } /* Draggable Stats on Player */ .player .ui-draggable.player-playback-stats { cursor: move } .player .ui-draggable.player-playback-stats li { cursor: default } /* FFZ Suggestions */ .ffz-dark .ffz-suggestions, .theatre .ffz-suggestions, .dark .ffz-suggestions { background-color: #101010 !important; border-color: rgba(255,255,255,0.2) !important; } .conversation-input-bar .ffz-suggestions { padding: 5px 0; position: absolute; bottom: 30px; left: 6px; width: 268px; background-color: white; border: 1px solid rgba(0,0,0,0.2); background-clip: padding-box; z-index: 100; } .conversation-input-bar .ffz-suggestions .suggestion { padding: 0 10px; line-height: 24px; font-size: 12px; } .conversation-input-bar .ffz-suggestions .highlighted { color: #fff; background-color: #6441a4; } .suggestions.ffz-suggestions .suggestion { width: auto !important; background-repeat: no-repeat; background-position: calc(100% - 10px) center; } .suggestions.ffz-suggestions .suggestion.has-info { height: 40px; line-height: 20px; padding-top: 2px; } .ffz-suggestions .suggestion div, .ffz-suggestions .suggestion span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ffz-suggestions .suggestion.is-emoji { background-size: 18px; } .ffz-suggestions .suggestion i { opacity: 0.5 } .ffz-suggestions .suggestion.has-info span { opacity: 0.5; display: block; margin-top: -4px; font-size: 10px; } .suggestions.ffz-suggestions .suggestion.has-image:not(.has-info) { line-height: 40px; } /* Banned and Spoiler Games */ body:not([data-current-path^="directory.csgo"]):not([data-current-path^="directory.game"]):not([data-current-path^="directory.creative"]) .ffz-game-banned { display: none !important } .ffz-game-spoilered .card__img a:not(.card__boxpin) img, .ffz-game-spoilered .thumb .cap img { visibility: hidden } .ffz-game-spoilered .card__img a:not(.card__boxpin):after, .ffz-game-spoilered .thumb .cap:after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url("https://static-cdn.jtvnw.net/ttv-static/404_preview-320x180.jpg") no-repeat #64439a; background-size: cover; content: ''; } .directory_header .ffz-block-button, .directory_header .ffz-spoiler-button { margin-left: 1rem; vertical-align: top; } .balloon .balloon__title button { display: block; } .balloon .balloon__title button:not(:last-of-type) { margin-bottom: 1rem; } body[data-current-path^="directory.creative"] .follow-button.ffz-block-button { margin: 0 1rem; } .button.ffz-spoiler-button, .button.ffz-block-button { background: #555; } .button.ffz-spoiler-button.active { background: #006700; } .button.ffz-spoiler-button:not(.disabled):hover { background: #247324; } .button.ffz-block-button.active { background: #973333; } .button.ffz-block-button:not(.disabled):hover { background: #a94444; } /* Dashboard Channel Feed */ .activity-card .emoticon-selector .tabs { display: none } .ffz-feed-button span { line-height: 30px; } #ffz-feed-tabs .tabs { margin-bottom: 10px } #ffz-feed-tabs textarea { resize: vertical } .ffz-feed-button .char-count.over-limit { color: #A00 } .ffz-feed-button .char-count.over-limit span { display: inline } .ffz-feed-button .char-count span { display: none; opacity: 0.75 } .ffz-feed-button .char-count, .ffz-feed-button button { float: right; margin-left: 10px } body.ffz-bttv #ffz-feed-tabs .tabs li:not(.selected):not(:hover) a { color: #6441a5; } body.ffz-bttv-dark #ffz-feed-tabs .tabs li:not(.selected):not(:hover) a { color: #999; } body.ffz-bttv #ffz-feed-tabs .tabs { margin-bottom: 0 } /* New Sidebar */ .warp__anchor { height: 5.5rem } /* Chat Pane Overhaul */ .ember-chat.ffz-chat-pane .chat-messages { bottom: 0 } /* Hide Outlines */ .convoHeader, .conversations-list-icon, .toggle-notification-menu { outline: none !important } /* Badges */ .badges .badge { background-size: 18px 18px !important; } .convoHeader .badges .badge { background-size: 14px 14px !important; -webkit-mask-size: 14px 14px; mask-size: 14px 14px; } /*.badges .badge { height: 18px; min-width: 18px; display: inline-block; vertical-align: middle; float: left; margin: 1px 3px 1px 0 } .badges .broadcaster { background: #e71818 url(/images/xarth/badge_broadcaster.svg); background-size: 100% } .badges .turbo { cursor: pointer; background: #6441a5 url(/images/xarth/badge_turbo.svg); background-size: 100% } .badges .subscriber { cursor: pointer } .badges .staff { background: #200f33 url(/images/xarth/badge_staff.svg); background-size: 100% } .badges .global-moderator { background: #0c6f20 url(/images/xarth/badge_globalmod.svg); background-size: 100% } .badges .moderator { background: #34ae0a url(/images/xarth/badge_mod.svg); background-size: 100% } .badges .admin { background: #faaf19 url(/images/xarth/badge_admin.svg); background-size: 100% }*/ /* Button Fix */ .ffz-no-bg { background: transparent; } .ffz-hidden-badges.badges { margin-left: 5px } /* Odd Badges */ .badge.click_url { cursor: pointer } .ffz-dark .badge.staff.version-1.colored, .theatre .badge.staff.version-1.colored, .dark .badge.staff.version-1.colored { background: linear-gradient(#6441a4,#6441a4); } /*.badge.premium.version-1:not(.colored) { background: url("https://cdn.frankerfacez.com/badges/twitch/premium/1/1.png") #009cdc; background-image: -webkit-image-set(url("https://cdn.frankerfacez.com/badges/twitch/premium/1/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/premium/1/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/premium/1/4.png") 4x); background-image: image-set(url("https://cdn.frankerfacez.com/badges/twitch/premium/1/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/premium/1/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/premium/1/4.png") 4x); } .badge.premium.version-1.colored { background: linear-gradient(#009cdc,#009cdc); -webkit-mask-image: url("https://cdn.frankerfacez.com/badges/twitch/premium/1/1.png"); } .badge.bits.version-1:not(.colored) { background: url("https://cdn.frankerfacez.com/badges/twitch/bits/1/1.png") #cbc8d0; background-image: -webkit-image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/1/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/1/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/1/4.png") 4x); background-image: image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/1/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/1/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/1/4.png") 4x); } .badge.bits.version-1.colored { background: linear-gradient(#cbc8d0,#cbc8d0); -webkit-mask-image: url("https://cdn.frankerfacez.com/badges/twitch/bits/1/1.png"); } .badge.bits.version-100:not(.colored) { background: url("https://cdn.frankerfacez.com/badges/twitch/bits/100/1.png") #ca7eff; background-image: -webkit-image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/100/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/100/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/100/4.png") 4x); background-image: image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/100/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/100/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/100/4.png") 4x); } .badge.bits.version-100.colored { background: linear-gradient(#ca7eff,#ca7eff); -webkit-mask-image: url("https://cdn.frankerfacez.com/badges/twitch/bits/100/1.png"); } .badge.bits.version-1000:not(.colored) { background: url("https://cdn.frankerfacez.com/badges/twitch/bits/1000/1.png") #3ed8b3; background-image: -webkit-image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/1000/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/1000/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/1000/4.png") 4x); background-image: image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/1000/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/1000/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/1000/4.png") 4x); } .badge.bits.version-1000.colored { background: linear-gradient(#3ed8b3,#3ed8b3); -webkit-mask-image: url("https://cdn.frankerfacez.com/badges/twitch/bits/1000/1.png"); } .badge.bits.version-5000:not(.colored) { background: url("https://cdn.frankerfacez.com/badges/twitch/bits/5000/1.png") #49acff; background-image: -webkit-image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/5000/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/5000/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/5000/4.png") 4x); background-image: image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/5000/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/5000/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/5000/4.png") 4x); } .badge.bits.version-5000.colored { background: linear-gradient(#49acff,#49acff); -webkit-mask-image: url("https://cdn.frankerfacez.com/badges/twitch/bits/5000/1.png"); } .badge.bits.version-10000:not(.colored) { background: url("https://cdn.frankerfacez.com/badges/twitch/bits/10000/1.png") #ff271e; background-image: -webkit-image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/10000/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/10000/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/10000/4.png") 4x); background-image: image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/10000/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/10000/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/10000/4.png") 4x); } .badge.bits.version-10000.colored { background: linear-gradient(#ff271e,#ff271e); -webkit-mask-image: url("https://cdn.frankerfacez.com/badges/twitch/bits/10000/1.png"); } .badge.bits.version-100000:not(.colored) { background: url("https://cdn.frankerfacez.com/badges/twitch/bits/100000/1.png") #ffcb13; background-image: -webkit-image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/100000/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/100000/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/100000/4.png") 4x); background-image: image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/100000/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/100000/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/100000/4.png") 4x); } .badge.bits.version-100000.colored { background: linear-gradient(#ffcb13,#ffcb13); -webkit-mask-image: url("https://cdn.frankerfacez.com/badges/twitch/bits/100000/1.png"); }*/ /* New Resub Banner */ .top-notification--resub { position: relative; z-index: 10; pointer-events: none; } .top-notification--resub > * { pointer-events: auto; } .sticky-message { padding: 5px 15px; } .chat-room .show-mod-icons .chat-lines .chat-line:not(.admin) .mod-icons { display: block !important; position: absolute; top: 0; bottom: 0; padding: 3px 5px 0; left: 0; z-index: 99; background-color: rgba(255,255,255,0.8); } .theatre .chat-room .show-mod-icons .chat-lines .chat-line:not(.admin) .mod-icons, .dark .chat-room .show-mod-icons .chat-lines .chat-line:not(.admin) .mod-icons { background-color: rgba(0,0,0,0.8); } /* Bits */ .bits-card { z-index: 10 } .ffz-bit { display: inline-block; height: 28px; line-height: 28px; font-weight: bold; padding-left: 30px; margin: -5px 5px; box-sizing: content-box; background-position: 0; } .tipsy .ffz-bit { margin: 0 5px; } .ffz-bit:after { content: attr(data-amount); } .theatre .bits-purchase__header, .dark .bits-purchase__header { color: #acacbf; } .theatre .bits-card, .app-main.theatre .chat-container .bits-card, /* Twitch's CSS is retarded */ .dark .bits-card, .theatre .bits-purchase__row, .dark .bits-purchase__row, .theatre .bits-footer, .dark .bits-footer { border-color: rgba(255,255,255,0.2); color: #ccc; } /* New Chat Formatting */ .ember-chat .chat-messages .timestamp { margin-right: 0; } .badges { display: inline-block } .badges .badge { float: none; margin: -1px 3px 0 0; } .ffz-padded-emoticons .activity-body .emoticon, .ffz-padded-emoticons .chat-line .emoticon { margin: -1px 0 0; } .ffz-baseline-emoticons .activity-body .emoticon, .ffz-baseline-emoticons .chat-line .emoticon { vertical-align: baseline; padding-top: 5px; } /* Settings Filtering */ .ffz-ui-menu-page .ffz-filter-container { padding: 10px; border-top: 1px solid rgba(0,0,0,0.2); } .ffz-ui-menu-page input.js-filter-input { margin: 0 } .bttv-incompatibility b + b:before { content: ', '; font-weight: normal; } /* Chat Rules */ .ember-chat .chat-interface .chat-rules { z-index: 1; } .theatre .chat-interface .chat-rules, .chat-container.dark .chat-rules { background: #101010; color: #ccc; border-color: rgba(255,255,255,0.2); } .ffz-mod-balloon { display: block; max-width: 200px; } .ffz-mod-balloon .ffz-title { padding: 0 1rem; } .cn-metabar__ffz svg { fill: #898395; } .cn-metabar__ffz { cursor: default; color: #706a7c; font-size: 1.4rem; } .cn-metabar__ffz figure { margin-right: 5px; } body:not(.ffz-minimal-channel-bar):not(.ffz-channel-bar-bottom) #channel { padding-top: 75px; } .ffz-channel-title-top .cn-metabar__more { width: 100% } .ffz-channel-title-top #channel { position: relative; padding-top: 80px; } .ffz-channel-title-top:not(.ffz-minimal-channel-bar):not(.ffz-channel-bar-bottom) #channel { padding-top: 135px; } .cn-hosting .ffz.card__layout .card__title { color: #9c9c9c } .cn-hosting .ffz.card__layout .card__title, .ffz-channel-title-top .cn-metabar__more, .app-main.theatre .cn-metabar__more { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; } .ffz-hide-channel-banner .cn-cover { height: 0 !important } .ffz-minimal-channel-title.ffz-channel-title-top #channel { padding-top: 50px } .ffz-minimal-channel-title.ffz-channel-title-top:not(.ffz-minimal-channel-bar):not(.ffz-channel-bar-bottom) #channel { padding-top: 100px; } .ffz-channel-title-top .ffz-channel.ffz-host { margin-top: -55px } .ffz-minimal-channel-title.ffz-channel-title-top .ffz-channel.ffz-host { margin-top: -25px } .ffz-channel-title-top .cn-metabar__title { position: absolute; top: 5px; z-index: 3; } .ffz-channel-title-top:not(.ffz-channel-bar-bottom):not(.ffz-minimal-channel-bar) #channel.ffz-bar-fixed .cn-metabar__title { margin-top: 50px; } .ffz-minimal-channel-bar .cn-bar-fixed { top: -40px; transition: top ease-in-out 75ms, bottom ease-in-out 75ms; } .ffz-channel-bar-bottom .player-mini { bottom: 20px } .ffz-minimal-channel-bar .cn-bar-fixed:hover { top: 0 } .ffz-minimal-channel-bar.ffz-channel-bar-bottom .cn-bar-fixed { top: auto; bottom: -40px } .ffz-minimal-channel-bar.ffz-channel-bar-bottom .cn-bar-fixed:hover { bottom: 0 } .ffz-minimal-channel-title .cn-metabar, .ffz-channel-title-top .cn-metabar { min-height: 70px; } .ffz-hide-channel-banner .cn-bar__avatar-wrap { width: 4rem; height: 4rem; } /* Channel Metadata Sorting */ .cn-hosting--bottom > *, .cn-metabar__more > * { margin: .5rem 1rem .5rem 0 !important; order: 49; } .cn-hosting--bottom > *, .cn-metabar__more > span { order: 150 } .cn-hosting--bottom:after, .cn-metabar__more:after { content: ''; order: 75; flex-grow: 1; } .cn-hosting--bottom { padding-right: 0 } #ffz-metadata-popup .button { margin: 0 } .cn-hosting--bottom .button:not(.follow-button), .ffz-channel-options .qa-channel-options, .ffz-share-box .qa-share-box__button { margin: 0 !important } .cn-metabar__more > .cn-metabar__livecount { order: 1 } /*.cn-metabar__more > .cn-metabar__ffz[data-key="uptime"] { order: 2 } .cn-metabar__more > #ffz-chatter-display { order: 51 } .cn-metabar__more > #ffz-player-stats { order: 3 }*/ .cn-metabar__more > .cn-metabar__viewcount { order: 50; flex-grow: 0 !important } .cn-metabar__more > .ffz-channel-broadcast-link { order: 100 } .cn-metabar__more > .ffz-share-box { order: 101 } .cn-metabar__more > .ffz-channel-options { order: 999; margin-right: 0 !important } .cn-hosting--bottom > .follow-button { order: 1 } .cn-hosting--bottom > .follow-button.is-following { margin-right: 0 !important } .cn-hosting--bottom > .notification-controls { order: 1 } .cn-hosting--bottom > span.ember-view { order: 2 } .cn-hosting--bottom > .ffz-channel-options { flex-grow: 0 } .cn-hosting--bottom .cn-hosting__options { box-shadow: inset 0 0 0 1px rgba(100,65,164,.5) } .cn-hosting--bottom .cn-hosting__options:focus { box-shadow: 0 0 6px 0 #7d5bbe,inset 0 0 0 1px rgba(100,65,164,.5) } .cn-metabar__ffz[data-key="viewers"] svg { fill: #fc3636 } .cn-metabar__ffz[data-key="viewers"] { color: #fc3636 } .ffz-dark .button--hollow:hover, .cn-hosting--bottom .button-hollow { background-color: #2c2541; } /* Mod Card Notes */ .ffz-moderation-card .note-input textarea { width: 100%; height: 50px; resize: none; margin-bottom: 10px; } .ffz-moderation-card .mod-icons .delete-note { background-image: url("//cdn.frankerfacez.com/script/button_ban.svg"); background-repeat: no-repeat; } .ffz-moderation-card .mod-icons .edit-note { background-image: url("//cdn.frankerfacez.com/script/button_edit.svg"); background-repeat: no-repeat; } /* Ban Notices */ .theatre .chat-history .chat-line.notification .message, .dark .chat-history .chat-line.notification .message, .theatre .chat-history .chat-line.admin .message, .dark .chat-history .chat-line.admin .message, .theatre .chat-messages .chat-line.admin .message, .dark .chat-messages .chat-line.admin .message, .theatre .chat-messages .chat-line.notification .message, .dark .chat-messages .chat-line.notification .message { color: #777 } .ban-tip { border-bottom: 1px dotted rgba(102,102,102,0.5); } .ffz-clickable-mentions .chat-display .chat-line .user-token { font-weight: bold } .ffz-clickable-mentions .chat-display .chat-line .user-token:hover { text-decoration: underline; cursor: pointer; } /* Following Menu */ #ffz-metadata-popup .scroller { max-height: 420px; overflow-y: scroll; overflow-x: hidden; margin: -1rem; padding: 1rem; } /* Remove BTTV's ugly styling */ .ffz-following-row .button { color: #fff !important; box-shadow: none !important; } .ffz-following-row { padding: 1rem 0; line-height: 30px; border-bottom: 1px solid rgba(0,0,0,0.2); } .ffz-following-row:first-child { padding-top: 0 } .ffz-following-row:last-child { padding-bottom: 0; border-bottom: none } .ffz-following-row .image:not([src]) { visibility: hidden } .ffz-following-row .image { display: inline-block; height: 30px; width: 30px; margin-right: 1rem; } .ffz-following-row .right, .ffz-following-row .button { float: right; } .ffz-following-row .switch { float: right; margin: 7px 1rem 0 0; } /* Schedule */ .ffz-schedule-row { position: relative; margin: 0 -1rem; padding: 1rem 1rem 1rem 6rem; border-bottom: 1px solid rgba(0,0,0,0.2); } .ffz-schedule-row:first-child { margin-top: -1rem } .ffz-schedule-row:last-child { margin-bottom: -1rem; border-bottom: none } .ffz-schedule-row.ffz-old-item { background-color: rgba(0,0,0,0.15); opacity: 0.6 } .ffz-schedule-date { background-color: rgba(127,127,127,0.1) } .ffz-schedule-row.ffz-current-item { background-color: rgba(0,0,0,0.2) } .ffz-dark .ffz-schedule-row.ffz-old-item, .theatre .ffz-schedule-row.ffz-old-item { background-color: rgba(255,255,255,0.1) } .ffz-dark .ffz-schedule-row.ffz-current-item, .theatre .ffz-schedule-row.ffz-current-item { background-color: rgba(255,255,255,0.15) } .ffz-schedule-row .heading h2 span, .ffz-schedule-row .runners, .ffz-schedule-row .meta, .ffz-schedule-date { color: #666; } .ffz-dark .ffz-schedule-row .heading h2 span, .theatre .ffz-schedule-row .heading h2 span, .ffz-dark .ffz-schedule-row .runners, .theatre .ffz-schedule-row .runners, .ffz-dark .ffz-schedule-row .meta, .theatre .ffz-schedule-row .meta, .ffz-dark .ffz-schedule-date, .theatre .ffz-schedule-date { color: #999; } .ffz-schedule-row .runners span { color: #000 } .ffz-dark .ffz-schedule-row .runners span, .theatre .ffz-schedule-row .runners span { color: #fff } .ffz-schedule-row .meta { margin-bottom: 5px; } .ffz-schedule-row .heading h2 { padding: 0; margin: 0 0 5px; font-size: 2rem; line-height: 1em; } .ffz-schedule-row .heading h2 span { font-size: 1.5rem; line-height: 1em; white-space: nowrap; } .ffz-schedule-row .time-start { position: absolute; left: 1rem; width: 45px; font: 16px Sans-Serif; } .ffz-schedule-row .time-start { top: 1rem } .ffz-schedule-date { padding-left: 0; text-align: center; font: bold 1.1rem Sans-Serif; } /* Hidden Navigation */ .ffz-sidebar-minimize:not(.ffz-sidebar-swap) #left_col.closed:not(:hover) { left: -40px } .ffz-sidebar-minimize:not(.ffz-sidebar-swap) #left_col.open:not(:hover) { left: -230px } .ffz-sidebar-minimize:not(.ffz-sidebar-swap) #main_col { margin-left: 10px } .ffz-sidebar-minimize:not(.ffz-sidebar-swap) #left_col ~ #main_col .cn-bar-fixed { left: 10px } .ffz-sidebar-minimize.ffz-sidebar-swap #left_col.closed:not(:hover) { right: -40px } .ffz-sidebar-minimize.ffz-sidebar-swap #left_col.open:not(:hover) { right: -230px } .ffz-sidebar-minimize.ffz-sidebar-swap #main_col { margin-right: 10px } .ffz-sidebar-minimize.ffz-sidebar-swap .cn-bar-fixed { right: 10px } /* Modifier Emotes */ .emoticon-grid span.emoticon:not([data-ffz-emote="59829"]) { padding-top: 0; margin: 0 !important } .modified-emoticon ~ .emoticon { position: relative; z-index: 1} .modified-emoticon { position: relative; z-index: 0; } .ffz-bttv .emoticon[data-ffz-emote="70864"]:hover { opacity: 0 } .modified-emoticon[data-ffz-emote="59829"] span { right: 128px } .modified-emoticon > img.emoticon { margin: 0 !important } .emoticon[data-ffz-modifiers~="147011"] { clip-path: circle(14px at 50% 50%) } .modified-emoticon > img.emoticon[data-ffz-modifiers~="147038"] { transform: translateY(-2px); max-height: 24px; clip-path: circle(14px at 50% 50%); } .modified-emoticon:hover span .emoticon[data-ffz-emote="70864"], .modified-emoticon:not(:hover) .emoticon[data-ffz-modifiers~="70864"] { opacity: 0 } .modified-emoticon span { position: absolute; top: -20px; bottom: -20px; left: -20px; right: -20px; margin: auto; pointer-events: none; } .modified-emoticon span img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ffz-bttv .modified-emoticon span, .ffz-baseline-emoticons .modified-emoticon span { top: -25px; } body:not(.ffz-bttv) .modified-emoticon span, .ffz-bttv .modified-emoticon { pointer-events: none } .ffz-bttv .modified-emoticon > .emoticon { pointer-events: all } .ffz-bttv .chat-line .modified-emoticon, .ffz-baseline-emoticons .chat-line .modified-emoticon { padding-top: 0; margin-bottom: -3px; vertical-align: bottom !important; } body:not(.ffz-sidebar-swap) .app-main.theatre #main_col:not(.expandRight) #player[data-isfullscreen=true] { right: 0 !important } body.ffz-sidebar-swap .app-main.theatre #main_col:not(.expandRight) #player[data-isfullscreen=true] { left: 0 !important } .pinned-cheer__hack-box, .pinned-cheers__message .chat-line:before, .ffz-pinned-cheer-expand .pinned-cheer__expando-arrow, .pinned-cheers__message:before { display: none } .pinned-cheers__message .chat-line { background-color: transparent !important } .pinned-cheers__message .chat-line { padding: 5px } .pinned-cheers .mod-icons { display: inline !important } .ffz-pinned-cheer-expand .pinned-cheers__message .chat-line, .ffz-pinned-cheer-expand-hover .pinned-cheers__message .chat-line:hover { max-height: none !important } .ffz-pinned-cheer-expand-hover .pinned-cheers__message .chat-line:not(:hover) { max-height: 4rem !important } .pinned-cheers--padding { padding: 0 !important } .ffz-pinned-cheer-expand-hover .pinned-cheers__message:hover .pinned-cheer__expando-arrow { transform: none } .ffz-pinned-cheer-expand-hover .pinned-cheers__message .pinned-cheer__expando-arrow { transform: rotateX(180deg); } /* Player Mini Positioning Stuff */ .ffz-sidebar-swap .expandRight .player-mini { left: 10px !important; } /* New Dashboard */ .dash-chat { font-size: 1.2rem; width: calc(100% - 2px); height: calc(100% - 2px); } .dash-column { margin-right: calc(1rem - 5px); padding-right: 5px; } @media(min-width: 1200px) { .dash-column { margin-right: calc(1.5rem - 5px); } }