/* 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-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, .ffz-hide-recent-past-broadcast .recent-past-broadcast, .ffz-hide-view-count .stat.twitch-channel-views, .ffz-minimal-chat-input .chat-interface .emoticon-selector-toggle, .ffz-menu-replace .chat-interface .emoticon-selector-toggle { display: none !important; } 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 + script + .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 + script + .ffz-ui-toggle { height: 14px; width: 18px; top: 28px; } .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); } .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, .ffz-ui-toggle.dark svg.svg-emoticons path { fill: #888; } .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, .ffz-ui-toggle.dark:hover svg.svg-emoticons path { fill: #777; } .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, .ember-chat .chat-interface .textarea-contain .ffz-ui-toggle.dark.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, .ember-chat .chat-interface .textarea-contain .ffz-ui-toggle.dark.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, .ember-chat .chat-interface .textarea-contain .ffz-ui-toggle.dark.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, .ember-chat .chat-interface .textarea-contain .ffz-ui-toggle.dark.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, .ember-chat .chat-interface .textarea-contain .ffz-ui-toggle.dark.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, .ember-chat .chat-interface .textarea-contain .ffz-ui-toggle.dark.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, .ember-chat .chat-interface .textarea-contain .ffz-ui-toggle.dark.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, .ember-chat .chat-interface .textarea-contain .ffz-ui-toggle.dark.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; } } .drawer__item--brick .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-ui-following .follow-button a { padding: 0 10px; color: #fff; } #ffz-following-popup { background-image: url('//cdn.frankerfacez.com/script/zreknarf-bg.png'); background-repeat: no-repeat; background-position: 115% -75%; background-size: 50%; } .ffz-live-team-channel .ffz-game { display: inline-block; max-width: 150px; text-overflow: ellipsis; overflow: hidden; margin-bottom: -5px; } /* Theater Mode hover bar */ .ffz-theater-stats .app-main.theatre .player-column:focus #hostmode > div.target-meta, .ffz-theater-stats .app-main.theatre .player-column:hover #hostmode > div.target-meta, .ffz-theater-stats .app-main.theatre #channel .player-column:focus #broadcast-meta, .ffz-theater-stats .app-main.theatre #channel .player-column:hover #broadcast-meta { background-color: #19191f; color: #aaa; position: absolute; top: -20px; left: 10px; right: 10px; z-index: 7; opacity: 0.95; height: 20px; } .ffz-theater-stats.ffz-sidebar-swap .app-main.theatre .player-column:focus #hostmode > div.target-meta, .ffz-theater-stats.ffz-sidebar-swap .app-main.theatre .player-column:hover #hostmode > div.target-meta, .ffz-theater-stats.ffz-sidebar-swap .app-main.theatre #channel .player-column:focus #broadcast-meta, .ffz-theater-stats.ffz-sidebar-swap .app-main.theatre #channel .player-column:hover #broadcast-meta { left: 145px; } .ffz-theater-stats .app-main.theatre #hostmode > div.target-meta div.target-title { padding: 5px 0 2px 5px; } .ffz-theater-stats .app-main.theatre #hostmode > div.target-meta div.target-title, .ffz-theater-stats .app-main.theatre #channel .player-column #broadcast-meta .info { padding-left: 5px; } .ffz-theater-stats .app-main.theatre #hostmode > div.target-meta div.target-title, .ffz-theater-stats .app-main.theatre #channel .player-column #broadcast-meta .info .title { font-size: 12px; line-height: 20px; color: #dedede; } .ffz-theater-stats .app-main.theatre #hostmode > div.target-meta div.target-title, .ffz-theater-stats .app-main.theatre #channel .player-column #broadcast-meta .info .title, .ffz-theater-stats .app-main.theatre #channel .player-column #broadcast-meta .info .title .over { background-color: rgba(16,16,16,0.3); } .ffz-theater-stats .app-main.theatre #hostmode > div.target-meta .target-user-and-game, .ffz-theater-stats .app-main.theatre #channel .player-column #broadcast-meta .info .channel, .ffz-theater-stats .app-main.theatre #channel .player-column #broadcast-meta .info .edit-link, .ffz-theater-stats .app-main.theatre #broadcast-meta .profile-link { display: none; } .ffz-theater-stats .app-main.theatre .player-column:focus #hostmode > div.clearfix, .ffz-theater-stats .app-main.theatre .player-column:hover #hostmode > div.clearfix { margin-bottom: 30px; } .ffz-theater-stats .app-main.theatre #channel .player-column:focus .archive_info + .stats-and-actions, .ffz-theater-stats .app-main.theatre #channel .player-column:hover .archive_info + .stats-and-actions { display: none; } .ffz-theater-stats .app-main.theatre .player-column:focus #hostmode > div.clearfix, .ffz-theater-stats .app-main.theatre .player-column:hover #hostmode > div.clearfix, .ffz-theater-stats .app-main.theatre .player-column:focus .stats-and-actions, .ffz-theater-stats .app-main.theatre .player-column:hover .stats-and-actions { background-color: #19191f; color: #aaa; position: absolute; bottom: 55px; margin-right: 150px; left: 10px; z-index: 7; padding: 10px; opacity: 0.95; } .ffz-theater-stats.ffz-theatre-conversations .app-main.theatre .player-column:focus #hostmode > div.clearfix, .ffz-theater-stats.ffz-theatre-conversations .app-main.theatre .player-column:hover #hostmode > div.clearfix, .ffz-theater-stats.ffz-theatre-conversations .app-main.theatre .player-column:focus .stats-and-actions, .ffz-theater-stats.ffz-theatre-conversations .app-main.theatre .player-column:hover .stats-and-actions, .ffz-theater-stats.ffz-top-conversations .app-main.theatre .player-column:focus #hostmode > div.clearfix, .ffz-theater-stats.ffz-top-conversations .app-main.theatre .player-column:hover #hostmode > div.clearfix, .ffz-theater-stats.ffz-top-conversations .app-main.theatre .player-column:focus .stats-and-actions, .ffz-theater-stats.ffz-top-conversations .app-main.theatre .player-column:hover .stats-and-actions { bottom: 15px; } .ffz-theater-stats .app-main.theatre .channel-stats .stat { color: #aaa; } .ffz-theater-stats .app-main.theatre .channel-stats span:not(.live-count) svg path { fill: rgba(255,255,255,0.35); } .ffz-theater-stats .app-main.theatre .follow-button .notify:before, .ffz-theater-stats .app-main.theatre .button.drop:after, .ffz-theater-stats .app-main.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 .app-main.theatre .follow-button .notify { background-color: #25252a; } .ffz-theater-stats .app-main.theatre .button:not(.primary) { color: #a68ed2; } .ffz-theater-stats .app-main.theatre .button.glyph-only svg path { fill: #a68ed2; } .ffz-theater-stats .app-main.theatre .button.primary.subscribe-button { color: #fff; } /* SRL Race Support */ #ffz-following-popup.right { right: 0; left: auto; } #ffz-ui-following .notification-controls, #ffz-ui-race { position: relative; } #ffz-ui-race .button span { display: inline-block; height: 30px; background: no-repeat 0 50%; } #ffz-ui-race .button span.logo { padding-left: 44px; background-image: url("//cdn.frankerfacez.com/script/srl_button.png"); } #ffz-race-popup { position: absolute; bottom: 0; background-image: url("//cdn.frankerfacez.com/script/zreknarf-bg.png"); background-repeat: no-repeat; background-position: 115% 110%; } #ffz-race-popup.right { right: 10px; } #ffz-race-popup .heading { margin: -20px -20px 20px; width: 340px; height: 65px; position: relative; } #ffz-race-popup .heading div { padding: 10px 0 0 20px; max-width: 240px; } #ffz-race-popup .heading h2 { font-size: 1.5em; padding-bottom: 5px; display: block; width: 240px; max-height: 45px; overflow: hidden; text-overflow: ellipsis; } #ffz-race-popup .heading span { line-height: 30px; position: absolute; top: 17.5px; right: 20px; padding: 0 5px; background: rgba(0,0,0,0.5); color: #fff; border-radius: 5px; } #ffz-race-popup .right { text-align: right; } #ffz-race-popup .table { overflow-y: auto; } #ffz-race-popup table { width: 100%; text-align: center; border-spacing: 0; } #ffz-race-popup table a { color: inherit; } .ffz-about-table a.twitch, .ffz-about-table a.youtube, .ffz-about-table a.twitter, #ffz-race-popup a.twitch, #ffz-race-popup 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-race-popup a.twitch, .ffz-about-table a.twitch { width: 15px; background-image: url("//cdn.frankerfacez.com/script/twitch_logo.png"); } #ffz-race-popup a.hitbox { width: 12px; background-image: url("//cdn.frankerfacez.com/script/hitbox_logo.png"); } #ffz-race-popup table tbody tr.done:nth-child(0n+1) td { background-color: rgba(255,255,0,.2); } #ffz-race-popup table tbody tr.done:nth-child(0n+2) td { background-color: rgba(128,128,128,.2); } #ffz-race-popup table tbody tr.done:nth-child(0n+3) td { background-color: rgba(210,100,0,.2); } #ffz-race-popup table tbody tr.forfeit td { opacity: 0.5; background-color: rgba(210,100,100,.2); } #ffz-race-popup table tbody tr.racing td.time { opacity: 0.5; } #ffz-race-popup table th, #ffz-race-popup td { padding: 1px; } #ffz-race-popup 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, .force-dark .ember-chat .chat-menu .list-header { border-top-color: rgba(255,255,255, 0.2); } .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, .force-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, .force-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, .force-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, .force-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, .ffz-sidebar-swap .force-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, .force-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, .force-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, .force-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, .force-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-is-favorite, .emoticon.ffz-favorite { position: relative; } .favorites-grid:not(:empty) + .ffz-no-emotes, .favorites-grid .emoticon.ffz-favorite:before { display: none } .suggestion.ffz-is-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-is-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.collapsed span, .chat-menu-content.collapsed p { display: none; } .chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content.collapsed .heading, .chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid.collapsed .heading { padding-bottom: 0; } .emoticon-grid.collapsable .heading, .emoticon-grid.collapsed, .chat-menu-content.collapsed { cursor: pointer; } .emoticon-grid.collapsable .heading, .chat-menu-content.collapsable .heading { position: relative; } .list-header span.right { float: right; } .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-ui-menu-page .version-list span { float: right } .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 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, .chat-container.force-dark .chat-interface .ffz-ui-popup.emoticon-selector .emoticon-selector-box, .ember-chat-container.dark .chat-interface .ffz-ui-popup.emoticon-selector .emoticon-selector-box, .ember-chat-container.force-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; } .app-main.theatre .ffz-ui-popup ul.menu, .chat-container.dark .ffz-ui-popup ul.menu, .chat-container.force-dark .ffz-ui-popup ul.menu, .ember-chat-container.dark .ffz-ui-popup ul.menu, .ember-chat-container.force-dark .ffz-ui-popup ul.menu, .ffz-ui-popup.dark 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, .chat-container.force-dark .ffz-ui-popup ul.sub-menu, .ember-chat-container.dark .ffz-ui-popup ul.sub-menu, .ember-chat-container.force-dark .ffz-ui-popup ul.sub-menu, .ffz-ui-popup.dark 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, .chat-container.force-dark .ffz-ui-popup ul.sub-menu a, .ember-chat-container.dark .ffz-ui-popup ul.sub-menu a, .ember-chat-container.force-dark .ffz-ui-popup ul.sub-menu a, .ffz-ui-popup.dark 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, .chat-container.force-dark span.ffz-handle:before, .ember-chat-container.dark span.ffz-handle:before, .ember-chat-container.force-dark span.ffz-handle:before, .ffz-ui-popup.dark span.ffz-handle:before, .app-main.theatre span.ffz-handle:after, .chat-container.dark span.ffz-handle:after, .chat-container.force-dark span.ffz-handle:after, .ember-chat-container.dark span.ffz-handle:after, .ember-chat-container.force-dark span.ffz-handle:after, .ffz-ui-popup.dark 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, .chat-container.force-dark .ffz-ui-popup.ui-moved span.ffz-handle:before, .ember-chat-container.dark .ffz-ui-popup.ui-moved span.ffz-handle:before, .ember-chat-container.force-dark .ffz-ui-popup.ui-moved span.ffz-handle:before, .ffz-ui-popup.ui-moved.dark 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, .chat-container.force-dark .ffz-ui-popup.ui-moved span.ffz-handle:after, .ember-chat-container.dark .ffz-ui-popup.ui-moved span.ffz-handle:after, .ember-chat-container.force-dark .ffz-ui-popup.ui-moved span.ffz-handle:after, .ffz-ui-popup.ui-moved.dark 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); } .ffz-ui-popup.dark ul.menu { border-top-color: rgba(255,255,255,0.1) } .ffz-ui-popup.dark ul.menu a { border-left-color: rgba(255,255,255,0.1) } .ffz-ui-popup.dark 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, .chat-container.force-dark .chat-interface .ffz-ui-popup ul.menu li.active, .ember-chat-container.dark .chat-interface .ffz-ui-popup ul.menu li.active, .ember-chat-container.force-dark .chat-interface .ffz-ui-popup ul.menu li.active, .app-main.theatre .chat-container .chat-interface .ffz-ui-popup ul.menu li.active, .ffz-ui-popup.dark ul.menu li.active { background-color: rgb(16,16,16); } .chat-container.dark .chat-interface .ffz-ui-popup ul.menu li.active a, .chat-container.force-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, .ember-chat-container.force-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, .ffz-ui-popup.dark 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, .chat-container.force-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, .ember-chat-container.force-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, .ffz-ui-popup.dark 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, .chat-container.force-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, .ember-chat-container.force-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, .ffz-ui-popup.dark ul.menu li.active.has-sub-menu a { border-top-color: #181818; } .chat-container.dark .chat-interface .ffz-ui-popup a, .chat-container.force-dark .chat-interface .ffz-ui-popup a, .ember-chat-container.dark .chat-interface .ffz-ui-popup a, .ember-chat-container.force-dark .chat-interface .ffz-ui-popup a, .app-main.theatre .chat-container .chat-interface .ffz-ui-popup a, .ffz-ui-popup.dark .ffz-ui-menu-page a { color: #fff; } .chat-container.dark .chat-interface .ffz-ui-popup ul.menu svg path, .chat-container.force-dark .chat-interface .ffz-ui-popup ul.menu svg path, .ember-chat-container.dark .chat-interface .ffz-ui-popup ul.menu svg path, .ember-chat-container.force-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, .ffz-ui-popup.dark 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 */ .bttv-incompatibility { padding-top: 8px !important; } .ffz-ui-popup.dark .emoticon-grid .heading, .ffz-ui-popup.dark li.title { color: #fff; } .ffz-ui-popup.dark .ffz-ui-menu-page { background-color: #101010; } .ffz-bttv .ffz-ui-popup .chat-menu-content p a { padding: 0; } .ffz-bttv .ffz-ui-popup.dark ul.menu, .ffz-bttv .ffz-ui-popup.dark .ffz-ui-menu-page { margin: 0 } .ffz-ui-popup.dark .ffz-ui-menu-page .chat-menu-content .heading, .ffz-ui-popup.dark .ffz-ui-menu-page .emoticon-grid .heading { border-color: rgba(255,255,255,0.1); } .ffz-ui-popup.dark ul.menu:not(.sub-menu), .ffz-ui-popup.dark .ffz-ui-menu-page { border: 1px solid rgba(255,255,255,0.1) } .ffz-ui-popup.dark .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-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: 2px; bottom: 2px; padding: 4px 5px 4px 4px; background: rgba(255,255,255,0.8); transition: margin-left .08s linear; } .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 */ .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-race-popup .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; } .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-race-popup .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 .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 .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, .force-dark .chatters-container::-webkit-scrollbar-thumb, .force-dark .ffz-scrollbar::-webkit-scrollbar-thumb, .force-dark .ember-chat .chat-settings::-webkit-scrollbar-thumb, .force-dark .chat-history::-webkit-scrollbar-thumb, .force-dark .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb, .force-dark .ffz-ui-menu-page::-webkit-scrollbar-thumb, .force-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 */ img.channel_background[src=""], img.channel_background[src="null"] { display: none; } .ffz-moderation-card { border: 2px solid #cbcbcb; max-width: 340px; } .ember-chat .ffz-moderation-card .close-button { right: 7px; } .ember-chat .ffz-moderation-card .extra-interface { padding-top: 0; } .ffz-moderation-card .extra-interface + .extra-interface { margin-top: -10px; } .ffz-moderation-card.ffz-has-info h3.name { margin-top: -2px; margin-bottom: 0; padding-top: 0; white-space: nowrap; } .ffz-moderation-card .info { float: none; position: relative; z-index: 4; margin-left: 50px; height: 18px; line-height: 18px; pointer-events: none; } .ffz-moderation-card .info .stat { pointer-events: auto; } .ffz-moderation-card .info.channel-stats .stat { color: #fff !important; } .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; } .ember-chat .ffz-moderation-card .mod-controls button { width: auto; margin-right: 10px; } .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 button:last-of-type { margin-right: 0 } .ffz-moderation-card .follow-button a { text-indent: -9999px; padding-right: 0 !important; } .ffz-moderation-card .button.glyph-only { padding: 0 !important } .ffz-moderation-card button:not(.glyph-only):hover, .ffz-moderation-card button:not(.glyph-only):focus { color: #fff; background-color: rgba(117,80,186, 1); } .ffz-moderation-card button.message { height: 30px; } .ffz-moderation-card.ffz-is-mod .interface .mod-controls:last-of-type, .ffz-moderation-card .interface span.right { float: right; } .ffz-moderation-card:focus { outline: none; border-color: #444; /*box-shadow: #000 0 0 5px;*/ } .ffz-moderation-card .interface:not(:last-of-type) { border-bottom: none; } .ffz-moderation-card .interface { border-top: none; } .ffz-moderation-card h3.name { display: inline-block; } .ffz-moderation-card .info, .ffz-moderation-card h3.name { text-shadow: black 0 0 5px; } .ember-chat .ffz-moderation-card .channel_background { width: 100%; top: 0; } /* dark moderation card */ .dark .ffz-moderation-card, .force-dark .ffz-moderation-card, .theatre .ffz-moderation-card { border-color: #1b1b20; } .dark .ffz-moderation-card:focus, .force-dark .ffz-moderation-card:focus, .theatre .ffz-moderation-card:focus { border-color: #cbcbcb; } .dark .ffz-moderation-card .interface, .force-dark .ffz-moderation-card .interface, .theatre .ffz-moderation-card .interface { background-color: #232329; } .ffz-no-blue .dark .ember-chat .moderation-card .interface, .ffz-no-blue .force-dark .ember-chat .moderation-card .interface, .ffz-no-blue .theatre .ember-chat .moderation-card .interface { background-color: #232323; } .moderation-card h3.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 .custom { text-indent: 0 !important; text-align: center; text-decoration: none; font-size: 18px; font-weight: bold; margin-top: -1px !important; color: #888 !important; } /* Chat Rows */ .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; } .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-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-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, .chat-container.force-dark, .ember-chat-container.dark, .app-main.theatre .ember-chat-container.chat-container, .ember-chat-container.force-dark { 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, .chat-container.force-dark a.unsafe-link, .ember-chat-container.dark a.unsafe-link, .ember-chat-container.force-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.glyph-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, .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 { 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, .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: 200px; overflow-y: auto; } .chat-history.interface li:first-child { padding-top: 10px; } .chat-history.interface li:last-child { padding-bottom: 10px; } .chat-history .chat-line { line-height: 20px; padding: 4px 10px; word-wrap: break-word; list-style-position: unset; } .ember-chat .moderation-card .interface.chat-history .chat-line.action { float: none; margin-right: 0px; } .chat-history .chat-line.admin .from, .chat-history .chat-line.admin .colon { display: none } .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:hover { cursor: pointer; text-decoration: underline; } .chat-history.loading { position: relative; 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, .force-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; } .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, .force-dark .moderation-card .back-button { background-color: #232329; } /* Room State */ .ffz.room-state.stat { line-height: 30px; margin-left: -10px; margin-right: 15px; } .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), .chat-container.force-dark .button-primary.ffz-waiting:not(:hover), .ember-chat-container.dark .button-primary.ffz-waiting:not(:hover), .ember-chat-container.force-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), .chat-container.force-dark .button-primary.ffz-waiting.ffz-banned:not(:hover), .ember-chat-container.dark .button-primary.ffz-waiting.ffz-banned:not(:hover), .ember-chat-container.force-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 #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 #carousel .nav { background-color: rgba(25,25,25,.5); } .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 .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 .chat-container.force-dark, .ffz-no-blue .ember-chat-container.dark, .ffz-no-blue .app-main.theatre .ember-chat-container.chat-container, .ffz-no-blue .ember-chat-container.force-dark, .ffz-no-blue .chat-container.dark .chat-hidden-overlay, .ffz-no-blue .app-main.theatre .chat-container .chat-hidden-overlay, .ffz-no-blue .chat-container.force-dark .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 .ember-chat-container.force-dark .chat-hidden-overlay, .ffz-no-blue .chat-container.dark .chatters-view, .ffz-no-blue .app-main.theatre .chat-container .chatters-view, .ffz-no-blue .chat-container.force-dark .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 .ember-chat-container.force-dark .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 .chat-container.force-dark .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 .ember-chat-container.force-dark .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 .chat-container.force-dark .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 .ember-chat-container.force-dark .emoticon-selector .emoticon-grid, /*.ffz-no-blue .chat-container.dark .emoticon-selector .subscribe-message, .ffz-no-blue .app-main.theatre .chat-container .emoticon-selector .subscribe-message, .ffz-no-blue .chat-container.force-dark .emoticon-selector .subscribe-message, .ffz-no-blue .ember-chat-container.dark .emoticon-selector .subscribe-message, .ffz-no-blue .app-main.theatre .ember-chat-container.chat-container .emoticon-selector .subscribe-message, .ffz-no-blue .ember-chat-container.force-dark .emoticon-selector .subscribe-message,*/ .ffz-no-blue .chat-container.dark .chat-commands-dropdown, .ffz-no-blue .app-main.theatre .chat-container .chat-commands-dropdown, .ffz-no-blue .chat-container.force-dark .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 .ember-chat-container.force-dark .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 .chat-container.force-dark .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 .ember-chat-container.force-dark .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 .warp__anchor, .ffz-no-blue .warp__item--anchor, .ffz-no-blue .warp__drawer, .ffz-no-blue .leaf, .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 .force-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 .chat-container.force-dark .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, .ffz-no-blue .ember-chat-container.force-dark .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 .conversation-header, .ffz-no-blue.ffz-dark .conversation-header, .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 .conversation-header, .ffz-no-blue.ffz-dark .conversation-window.has-focus .conversation-header, .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-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; } /* 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 .app-main.theatre .player .player-video, .ffz-classic-player .player[data-fullscreen="true"] .player-video { bottom: 0; } .ffz-classic-player .app-main.theatre .player .player-controls-bottom, .ffz-classic-player .player[data-fullscreen="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) .app-main.theatre .player .player-controls-bottom, .ffz-classic-player:not(.ffz-top-conversations) .app-main.theatre .player[data-controls=true] .player-controls-bottom, .ffz-classic-player .app-main.theatre .player[data-fullscreen="true"] .player-controls-bottom, .ffz-classic-player .app-main.theatre .player[data-fullscreen="true"][data-controls=true] .player-controls-bottom { padding-bottom: 0; } .ffz-classic-player .app-main.theatre .player.player-isvod .player-controls-bottom, .ffz-classic-player .player.player-isvod[data-fullscreen="true"] .player-controls-bottom { margin-bottom: -36px; } .ffz-classic-player .app-main.theatre .player-column:hover .player .player-controls-bottom, .ffz-classic-player .app-main.theatre .player-column:focus .player .player-controls-bottom, .ffz-classic-player .player[data-fullscreen="true"][data-controls="true"] .player-controls-bottom { margin-bottom: 0; } .ffz-classic-player:not(.ffz-top-conversations) .app-main.theatre .player-column:hover .player[data-fullscreen="false"] .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-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; } /* Directory Logos */ .item .meta .title a a, .item .meta .title a img { pointer-events: none } .ffz-directory-logo .meta p.title { padding-top: 4px; } .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) .force-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, body:not(.ffz-bttv) .force-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, body.ffz-conv-title-clickable .conversation-header span.conversation-header-name, body:not(.ffz-conv-title-clickable) .conversation-header a.conversation-header-name { display:none } .conversation-window.has-unread .conversation-header .conversation-header-name { 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 .conversation-header { 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 #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; } .user.item .overlay_info.length { position: absolute; top: 5px; right: 25px; z-index: 1; display: inline-block; padding: 0 5px; font-size: 11px; line-height: 22px; background: black; color: #fff; opacity: 0.75; } .user.item .overlay_info.length svg { float: left; margin: 3px 5px 3px 0; } .user.item .actions .follow svg path, .user.item .overlay_info.length svg path { fill: #fff; } .user.item .actions { margin-top: -15px; margin-bottom: 20px; margin-right: 20px; 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; } .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: 4.5px 0 -4.5px -1px; } /* Creative Directory */ .ffz-top-conversations .ct-banner { margin-top: -50px } .ffz-top-conversations .ct-banner__feature { top: 40px; margin-bottom: 0 } body:not(.ffz-tags-on-channel) #broadcast-meta .ct-tags, body:not(.ffz-creative-showcase) .ct-gallery { display: none; } body:not(.ffz-tags-on-channel) .tw-title--tall { height: 60px } /* 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 */ .ember-chat .chat-interface .suggestions.ffz-suggestions .suggestion { width: auto; background-repeat: no-repeat; background-position: calc(100% - 10px) center; } .ember-chat .chat-interface .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; } .ember-chat .chat-interface .suggestions.ffz-suggestions .suggestion.has-image:not(.has-info) { line-height: 40px; } /* Banned and Spoiler Games */ .ffz-game-spoilered .thumb .cap img, .ffz-game-banned { display: none } .ffz-game-spoilered .thumb .cap { position: absolute !important; top: 0; left: 0; bottom: 0; right: 0; background: url("https://static-cdn.jtvnw.net/ttv-static/404_preview-320x180.jpg") no-repeat !important; background-size: cover !important; } /* 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 */ .ffz-hide-friends-collapsed .drawer--summary.closed .friend-list { display: none } .warp__anchor { height: 5.5rem }