Avoids navbar dropdown menus from being cut-off and inaccessible by adding scrolling.
// ==UserScript==
// @name SonicHackingContest Navbar Scroll
// @version 2024.10.02
// @description Avoids navbar dropdown menus from being cut-off and inaccessible by adding scrolling.
// @author Obsidian
// @namespace https://greasyfork.org/en/users/318252-obsidian
// @include /^https?://(www\.)?sonichacking\.org//
// @include /^https?://(www\.)?shc\.zone//
// @match http*://*.sonichacking.org/*
// @match http*://*.shc.zone/*
// @exclude /^https?://(www\.)?(shc\.zone|sonichacking\.org)/vault//
// @grant none
// @run-at document-end
// @icon data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAwUExURUdwTKfH4uzz+dfl8+70+nWn0hpqswpfrfD1+glfrXeo0v///wBbqxpstHCj0EWHwjcCEG0AAAALdFJOUwD49/Oay6syPmGDWhDOJgAABMNJREFUeNrtWtu2oyAMbUgVNRL+/28PoLa1AoRael7cD3NbM7O3uRO43S5cuHDhwoULFyQYhvsTw/Breq3oHQqdkN8pmEhZM3sYY6xlBlSrjB+p6AgXAU94IRBU3O8/UQBzDMYyBhHNLQHEcwKLiOYaMK3Ai/AacGicCmbOwQKRGpqmAuYVzIZVUwmpQHyT0NARkA2DTQLR/d/CYJEA7fwwlZ3gwYruzZxgJQraGWFUyswiI5C6N8oEFgmYDbZxg5aaILjhX00Q3DC0iAKQCpjtNxSEYQw93M/TpDWQESsw5/LRUavHBLb+Sikly8TToTgEcmC2ZvtiYywDFlvSVxQMSIRc8ak5BfVxcFek2MzfQb2CQRF+jT5EoqrzPdE36UM2VoSBo4fv0juA2AlDZYzLw0DIT/I628IJ9yafL3cCNvB+RSYMinhuBy6ZYCCyc0ugKvCrtvwz0z3Pb+bGyKXiL/hzqahVY/+XogB/wp9OBGiaf6+1ABP1D+bfIFEOFSEAsG0fhnM8DOExbwI0VgHpTJymCcLODVuKKNbjaerCKNwsKRJhuD/5TECkGvVF4Wg0dkhtWrN4OtTeDC0kSHywScDaBgmoFBZUA8nnY90pkhvBwHaK5LwPag4pI4iHRPtyo5AtrHWLG90J3WB3lxn8JR949LLN4NuNis0ORsvtT9g3lBfsA1K5VRl8v89Jizbvf3X4wkENDjdKGSdYtsaYbeHA2XF9kKWBOfATVrSH7OezrL4eYb4gQHpQixig4oiZzgrxQY1jAqRDliE4fVCDMwKAphS/uA/E+KVRaAn0LT4nivmjIUBKusccz/KfEgDUJeK/4qBgj+Y3s0Ehv46fFGsOCgcLhBUbi/ghwV+3qInGv+B2LcV/Q6obxTBWgYo1xCDF7e8MUHlShDf/L3OHKQ4wCf6bql0VcKQHmIIVmSjFP1UflU2kBXBeAJDqUy1A1e9K8DCImHwhAYIxfTVavyvgiAGOAszz3iPDX50Cu4nwxQAHAaxI8SZvSo/BHy0reN8Cw4jIB/5NlFFKn70aTkQBv+jhyLHBZBvAsi7DT/i3RDAv9oCjwrVGpgrgpyH40pHgpS7BgX+JECY15i7nPz0Q83outBiZSOB5WslVgE9D8CXK4nOxfQSIQcI++z4iE4LGWHawNrFDej8ewT5AeHnm0/X55xHR/9swAL49pYPIxRrv/xJY5kcCcBAI/Zg9C0c84MjVsjzrPPrwI4Q/i8SrsQygdn542B+py9NHPGAYiQgdbz+Oo35gHPu+S5f78OBv0x0MZkP2j+UHKjuzepcRePJY3uq+1LYeLWLhhyK/3r1MYCRKsi+rg9Lywj5nFAn/rgr51pFlX2xQqFu8roz8+FXmv3UPp670umSyvnR8h7A08+OXgP+G9Eo/askCBwpLsa34SfjXEGAk1Yn+wbJTVYSFSGBmkOzGQhWwVfTBDR0JXhsA0SCIQYtEVfTBCL4kEMSee7zIsuX785HUB/TeCE4CLPUZ2PoN1FKJYBei5T25/ox+dYQrjfDeDxGfa38reMbRf0q/GNCVZy9jg/9NWPsjMAOS6sufcf6hm28TK7ReA2SZhrpTX3fq6Vm/4L/4V8Po24ULFy5cuHDhQhp/KJVML/pyu60AAAAASUVORK5CYII=
// @noframes
// ==/UserScript==
/* jshint esversion: 6 */
(function(){
'use strict';
// Greasemonkey or Web Storage APIs:
// To use Greasemonkey functions instead of localStorage, add @grant GM_getValue and @grant GM_setValue to
// the Metadata block in place of @grant none.
// Using the synchronous GM_getValue or localStorage.getItem
if(typeof GM_getValue !== "function"){
var GM_getValue;
GM_getValue = function(aKey, aDefault){
var val = null;
try{
val = localStorage.getItem(aKey, aDefault);
}catch(e){}
if(val === null && typeof aDefault != "undefined"){return aDefault;}
return val;
};
}
// Using the synchronous GM_setValue or localStorage.setItem
if(typeof GM_setValue !== "function"){
var GM_setValue;
GM_setValue = function(aKey, aVal){
try{
localStorage.setItem(aKey, aVal);
}catch(e){}
};
}
function GM_addStyle(aCss){
var head = document.getElementsByTagName('head')[0];
if(head){
var style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.textContent = aCss;
head.appendChild(style);
return style;
}
return null;
}
var strCss = `
@media (min-width: 992px) {
.navbar-nav .dropdown-menu {
max-height: calc(100vh - 100% - 2px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.38) rgba(32,32,32,0.35);
overscroll-behavior: contain;
}
.navbar-dark .nav-link {
height: 100%;
}
}
/* mobile style (max-width: 991.999) */
@media not all and (min-width: 992px) {
.navbar-collapse {
padding-top: 0.7px;
}
.navbar-collapse .navbar-nav {
max-height: calc(100vh - 52px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.38) rgba(32,32,32,0.35);
overscroll-behavior: contain;
min-width: 24em;
max-width: 100vw;
width: -moz-max-content;
width: max-content;
}
.navbar {
max-height: 50.6px;
/*max-height: calc(3rem + 2px);*/
}
#entry_banner_image {
width: 100%;
max-width: 352px;
}
.shc-news-body iframe {
max-width: 100%;
max-height: calc((100vw - 4rem - 2px) * 0.5625); /* assume this is a 16x9 video */
}
.shc-news-body img {
max-width: 100%;
height: auto;
}
}
/* constrain size of news post avatars on narrow screens */
@media only screen and (max-width: 480px) {
.shc-news-header h2 {
margin-right: 0px !important;
font-size: 1.5rem;
}
.shc-news-header h2 a {
font-size: 1.5rem;
}
.shc-news-header img {
top: auto;
bottom: -0.5em;
right: 0.4rem;
height: auto !important;
width: 64px;
width: 4.1rem;
}
/* trick for padding end of last-line */
.shc-news-header h2::after {
content: "\\00a0";
display: inline;
visibility: hidden;
margin-left: -0.25em;
padding-right: 58px;
padding-right: calc(3.7rem - 1px);
}
}
/* avoid entry list items from overflowing screen */
.shc-entry-list-item.m-4 {
max-width: calc(100% - 3rem);
}
@media only screen and (max-width: 414px) {
.shc-entry-list-item.m-4 {
margin-left: auto !important;
margin-right: auto !important;
max-width: 100%;
}
}
/* styles for all */
.navbar-nav > .nav-divider {
flex-shrink: 0;
}
.navbar-nav > .nav-divider:first-child {
display: none;
}
.navbar-backdrop {
top: 50.4px !important;
/*top: calc(3rem + 1px) !important;*/
}
.container-fluid #shc_schedule th {
border-bottom: 1px solid #e3e3e3; /*rgba(255,255,255,.75)*/
border-right: 1px solid #e3e3e3; /*rgba(255,255,255,.75)*/
}
:root {
--shc-tails-light: #edd090;
--shc-knuckles-light: #e0c0c6;
}
.bg-shc-tails-light {
background-color: #edd090 !important;
background-color: var(--shc-tails-light, #edd090) !important;
}
.bg-shc-knuckles-light {
background-color: #e0c0c6 !important;
background-color: var(--shc-knuckles-light, #e0c0c6) !important;
}
/* tint contest logo image */
.bg-shc-tails-light img.d-block.ml-auto.mr-auto.mb-3 {
filter: hue-rotate(calc(39deg - 207deg)) brightness(1.6);
}
.bg-shc-knuckles-light img.d-block.ml-auto.mr-auto.mb-3 {
filter: hue-rotate(calc(349deg - 207deg)) contrast(1.08);
}
.btn-shc-tails0:not(.btn-shc-grey) {
color: #fff;
background-color: #e08000;
border-color: #e08000;
}
.btn-shc-tails0:not(.btn-shc-grey):hover {
color: #fff;
background-color: #ba6a00;
border-color: #ad6300;
}
.btn-shc-tails0:not(.btn-shc-grey):not(:disabled):not(.disabled).active, .btn-shc-tails0:not(.btn-shc-grey):not(:disabled):not(.disabled):active, .show>.btn-shc-tails0.dropdown-toggle {
color: #fff;
background-color: #ad6300;
border-color: #a05c00;
}
.btn-shc-tails0:not(.btn-shc-grey).disabled, .btn-shc-tails0:not(.btn-shc-grey):disabled {
color: #fff;
background-color: #e08000;
border-color: #e08000;
}
.btn-shc-knuckles0:not(.btn-shc-grey) {
color: #fff;
background-color: #c00020;
border-color: #c00020;
}
.btn-shc-knuckles0:not(.btn-shc-grey):hover {
color: #fff;
background-color: #9a001a;
border-color: #8d0018;
}
.btn-shc-knuckles0:not(.btn-shc-grey):not(:disabled):not(.disabled).active, .btn-shc-knuckles0:not(.btn-shc-grey):not(:disabled):not(.disabled):active, .show>.btn-shc-knuckles0.dropdown-toggle {
color: #fff;
background-color: #8d0018;
border-color: #800015;
}
.btn-shc-knuckles0:not(.btn-shc-grey).disabled, .btn-shc-knuckles0:not(.btn-shc-grey):disabled {
color: #fff;
background-color: #c00020;
border-color: #c00020;
}
/* non-standard thin scrollbar style */
.navbar-nav .dropdown-menu::-webkit-scrollbar,
.navbar-collapse .navbar-nav::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.navbar-nav .dropdown-menu::-webkit-scrollbar-track,
.navbar-collapse .navbar-nav::-webkit-scrollbar-track {
background: rgba(32,32,32,0.35);
}
.navbar-nav .dropdown-menu::-webkit-scrollbar-track {
margin: 0 1px 1px 1px; /* push away from menu border */
}
.navbar-nav .dropdown-menu::-webkit-scrollbar-thumb,
.navbar-collapse .navbar-nav::-webkit-scrollbar-thumb {
background: transparent linear-gradient(to right, rgba(248,248,248,0.35) 0%, rgba(248,248,248,0.35) 100%) 1.1px 0px/6.2px repeat-y;
}
.navbar-nav .dropdown-menu::-webkit-scrollbar-thumb:hover,
.navbar-collapse .navbar-nav::-webkit-scrollbar-thumb:hover {
background-image: linear-gradient(to right, rgba(208,208,208,0.35) 0%, rgba(208,208,208,0.35) 100%);
}
.navbar-nav .dropdown-menu::-webkit-scrollbar-thumb:active,
.navbar-collapse .navbar-nav::-webkit-scrollbar-thumb:active {
background-image: linear-gradient(to right, rgba(152,152,152,0.35) 0%, rgba(152,152,152,0.35) 100%);
}
.navbar-nav .dropdown-menu::-webkit-scrollbar-thumb:horizontal,
.navbar-collapse .navbar-nav::-webkit-scrollbar-thumb:horizontal {
background-repeat: repeat-x;
background-position: 0px 1.1px;
background-size: auto 6.15px;
}
.navbar-nav .dropdown-menu::-webkit-scrollbar-corner,
.navbar-collapse .navbar-nav::-webkit-scrollbar-corner {
background: transparent;
}`;
var strCssEx = `
/* EXTRA custom theme: shc-blaze */
:root {
--shc-blaze: #7053bc;
--shc-blaze-light: #d6c4f0;
}
.bg-shc-blaze {
background-color: var(--shc-blaze, #7053bc) !important;
}
.border-shc-blaze {
border-color: var(--shc-blaze, #7053bc) !important;
}
.bg-shc-blaze-light {
background-color: #d6c4f0 !important;
background-color: var(--shc-blaze-light, #d6c4f0) !important;
}
.bg-shc-blaze-75 {
background-color: rgba(102,72,175,0.75) !important;
}
.btn-shc-blaze:not(.btn-shc-grey) {
color: #fff;
background-color: var(--shc-blaze, #7053bc);
border-color: var(--shc-blaze, #7053bc);
}
.btn-shc-blaze:not(.btn-shc-grey):hover {
color: #fff;
background-color: #553a92;
border-color: #54329c;
}
.btn-shc-blaze:not(.btn-shc-grey):not(:disabled):not(.disabled).active,
.btn-shc-blaze:not(.btn-shc-grey):not(:disabled):not(.disabled):active,
.show > .btn-shc-blaze.dropdown-toggle {
color: #fff;
background-color: #4c367d;
border-color: #492a80;
}
.btn-shc-blaze:not(.btn-shc-grey).disabled, .btn-shc-blaze:disabled:not(.btn-shc-grey){
color: #fff;
background-color: var(--shc-blaze, #7053bc);
border-color: var(--shc-blaze, #7053bc);
}
.bg-shc-blaze-light img.d-block.ml-auto.mr-auto.mb-3 {
filter: hue-rotate(calc(260deg - 207deg)) brightness(1.14) saturate(0.6);
}
.bg-shc-blaze + .shc-entry-body, .bg-shc-blaze + .shc-news-body, .shc-entry-list-item .bg-shc-blaze + p {
box-shadow: 0 4px 0 #d7b8f2 inset;
}
.shc-entry-body .bg-shc-blaze.shc-entry-banner, .bg-shc-blaze.shc-news-header img {
box-shadow: 0 4px 0 #d7b8f2;
}
/* EXTRA custom theme: shc-amy */
:root {
--shc-amy: #c84489;
--shc-amy-light: #f0c4e1;
}
.bg-shc-amy {
background-color: var(--shc-amy, #c84489) !important;
}
.border-shc-amy {
border-color: var(--shc-amy, #c84489) !important;
}
.bg-shc-amy-light {
background-color: #f0c4e1 !important;
background-color: var(--shc-amy-light, #f0c4e1) !important;
}
.bg-shc-amy-75 {
background-color: rgba(174,72,120,0.75) !important;
}
.btn-shc-amy:not(.btn-shc-grey) {
color: #fff;
background-color: var(--shc-amy, #c84489);
border-color: var(--shc-amy, #c84489);
}
.btn-shc-amy:not(.btn-shc-grey):hover {
color: #fff;
background-color: #9a426f;
border-color: #943a62;
}
.btn-shc-amy:not(.btn-shc-grey):not(:disabled):not(.disabled).active,
.btn-shc-amy:not(.btn-shc-grey):not(:disabled):not(.disabled):active,
.show > .btn-shc-amy.dropdown-toggle {
color: #fff;
background-color: #8d3e61;
border-color: #873258;
}
.btn-shc-amy:not(.btn-shc-grey).disabled, .btn-shc-amy:disabled:not(.btn-shc-grey){
color: #fff;
background-color: var(--shc-amy, #c84489);
border-color: var(--shc-amy, #c84489);
}
.bg-shc-amy-light img.d-block.ml-auto.mr-auto.mb-3 {
filter: hue-rotate(112deg) brightness(1.1) saturate(0.95) contrast(0.9);
}
.bg-shc-amy + .shc-entry-body, .bg-shc-amy + .shc-news-body, .shc-entry-list-item .bg-shc-amy + p {
box-shadow: 0 4px 0 #e3c1e6 inset;
}
.shc-entry-body .bg-shc-amy.shc-entry-banner, .bg-shc-amy.shc-news-header img {
box-shadow: 0 4px 0 #e3c1e6;
}
.dropdown > .bg-shc-amy.dropdown-menu, .dropup > .bg-shc-amy.dropdown-menu, .navbar-collapse .bg-shc-amy.navbar-nav {
scrollbar-color: rgba(255,175,235,0.68) rgba(42,32,42,0.45);
}
.bg-shc-amy-light.schedule-expanded #shc_schedule-wrapper {
scrollbar-color: rgba(255,175,235,0.68) rgba(42,32,42,0.45) !important;
}
.bg-shc-amy-light .navbar-nav .dropdown-menu::-webkit-scrollbar-track,
.bg-shc-amy-light .navbar-collapse .navbar-nav::-webkit-scrollbar-track {
background: rgba(42,32,38,0.35);
}
.bg-shc-amy-light .navbar-nav .dropdown-menu::-webkit-scrollbar-thumb,
.bg-shc-amy-light .navbar-collapse .navbar-nav::-webkit-scrollbar-thumb {
background: transparent linear-gradient(to right, rgba(255,208,220,0.45) 0%, rgba(255,208,220,0.45) 100%) 1.1px 0px/6.2px repeat-y;
}
.bg-shc-amy-light .navbar-nav .dropdown-menu::-webkit-scrollbar-thumb:hover,
.bg-shc-amy-light .navbar-collapse .navbar-nav::-webkit-scrollbar-thumb:hover {
background-image: linear-gradient(to right, rgba(218,208,210,0.35) 0%, rgba(218,208,210,0.35) 100%);
}
.bg-shc-amy-light .navbar-nav .dropdown-menu::-webkit-scrollbar-thumb:active,
.bg-shc-amy-light .navbar-collapse .navbar-nav::-webkit-scrollbar-thumb:active {
background-image: linear-gradient(to right, rgba(162,152,158,0.35) 0%, rgba(162,152,158,0.35) 100%);
}
/* EXTRA custom dark theme: shc-shadow */
:root {
--shc-shadow: #940010;
--shc-shadow-dark: #0d0f12;
}
body.bg-shc-shadow-light {
/* dark rather, but named light for convenience sake */
/* bg-shc-shadow-light reused to also signify dark theme, instead of better class like theme-dark */
color: #f0f8f3;
background-color: #0d0f12 !important;
background-color: var(--shc-shadow-dark, #0d0f12) !important;
background-blend-mode: soft-light;
}
body.bg-shc-shadow-light .modal {
color: #212529;
}
.bg-shc-shadow-75 {
background-color: rgba(148,6,8,0.75) !important;
}
.bg-shc-shadow {
background-color: var(--shc-shadow, #940010) !important;
}
.border-shc-shadow {
border-color: var(--shc-shadow, #940010) !important;
}
.bg-shc-shadow-light a:not(.btn):not(.navbar-brand) {
color: #03a9f4;
}
.bg-shc-shadow-light a:not(.btn):not(.navbar-brand):hover {
color: #00709f;
}
/* tiny fix to avoid muted text */
.bg-shc-shadow-light .container-fluid > div.bg-white.text-black {
color: #fff !important;
background-color: #1f2327 !important;
}
/* dark:entries */
.bg-shc-shadow-light .shc-news-body,
.bg-shc-shadow-light .shc-entry-body,
.bg-shc-shadow-light .shc-entry-list-item p {
color: #fff !important;
background-color: #1f2327 !important;
border-color: #383e3e !important;
box-shadow: inset 0 4px 0 #2f3236;
}
.bg-shc-shadow-light .border-shc-grey {
border-color: #383e3e !important;
}
.bg-shc-shadow-light .shc-news-header img,
.bg-shc-shadow-light .shc-entry-body .shc-entry-banner {
box-shadow: 0 4px 0 #2f3236;
}
.bg-shc-shadow-light .bg-shc-shadow + .shc-news-body,
.bg-shc-shadow-light .bg-shc-shadow + .shc-entry-body,
.bg-shc-shadow-light .shc-entry-list-item .bg-shc-shadow + p {
box-shadow: inset 0 4px 0 #121618;
}
.bg-shc-shadow-light .bg-shc-shadow.shc-news-header img,
.bg-shc-shadow-light .bg-shc-shadow + .shc-entry-body .shc-entry-banner {
box-shadow: 0 4px 0 #121618;
}
/* dark:comments */
.bg-shc-shadow-light .shc-comment-body {
background-color: #23292e !important;
border-color: #424848 !important;
border-bottom-color: #383e3e !important;
}
.bg-shc-shadow-light .shc-comment-body, .bg-shc-shadow-light .shc-comment-reply > div:first-child {
box-shadow: inset 0 -4px 0 #0f1418;
}
.bg-shc-shadow-light .shc-comment-body::before {
background: linear-gradient(45deg,#22282d 0%,#22282d 55%,transparent 55.1%,transparent 100%) transparent;
border-left-color: #626868;
border-bottom-color: #525858;
margin-left: 0.2px;
}
.bg-shc-shadow-light .shc-comment-avatar {
filter: drop-shadow(0px 0px 1px #fff);
}
/* dark:schedule */
.bg-shc-shadow-light #shc_schedule th {
border-color: var(--shc-shadow-dark, #101010);
}
.bg-shc-shadow-light #shc_schedule td {
background-color: #16191e;
}
.bg-shc-shadow-light #shc_schedule td.now a::after {
border-width: 2px;
border-style: solid;
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}
.bg-shc-shadow-light #shc_schedule td.now {
background-color: #42484d;
}
/* shadow:buttons */
.btn-shc-shadow:not(.btn-shc-grey) {
color: #fff;
background-color: var(--shc-shadow, #940010);
border-color: var(--shc-shadow, #940010);
}
.btn-shc-shadow:not(.btn-shc-grey):hover {
color: #fff;
background-color: #72080a;
border-color: #760c0e;
}
.btn-shc-shadow:not(.btn-shc-grey):not(:disabled):not(.disabled).active,
.btn-shc-shadow:not(.btn-shc-grey):not(:disabled):not(.disabled):active,
.show > .btn-shc-shadow.dropdown-toggle {
color: #fff;
background-color: #680608;
border-color: #6c0a0c;
}
.btn-shc-shadow:not(.btn-shc-grey).disabled, .btn-shc-shadow:disabled:not(.btn-shc-grey){
color: #fff;
background-color: var(--shc-shadow, #940010);
border-color: var(--shc-shadow, #940010);
}
.bg-shc-shadow-light .shc-entry-body .btn-shc-grey {
color: #fff;
background-color: #3e4449;
border-color: #3e4449;
}
.bg-shc-shadow-light .shc-entry-body .btn-shc-grey:hover {
color: #fff;
background-color: #30363b;
border-color: #343a3f;
}
.bg-shc-shadow-light .shc-entry-body .btn-shc-grey:not(:disabled):not(.disabled).active,
.bg-shc-shadow-light .shc-entry-body .btn-shc-grey:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #2b3034;
border-color: #2f3438;
}
/* shadow:menus (main red, dropdown black) */
.bg-shc-shadow.navbar-dark .navbar-nav.navbar-pills:not(.navbar-not-pills) .nav-link:focus,
.bg-shc-shadow.navbar-dark .navbar-nav.navbar-pills:not(.navbar-not-pills) .nav-link:hover {
background-color: rgba(255,220,100,0.17);
}
.bg-shc-shadow.navbar-dark .navbar-nav.navbar-pills:not(.navbar-not-pills) .active > .nav-link,
.bg-shc-shadow.navbar-dark .navbar-nav.navbar-pills:not(.navbar-not-pills) .nav-link.active,
.bg-shc-shadow.navbar-dark .navbar-nav.navbar-pills:not(.navbar-not-pills) .nav-link.show,
.bg-shc-shadow.navbar-dark .navbar-nav.navbar-pills:not(.navbar-not-pills) .show > .nav-link {
background-color: rgba(255,200,120,0.32);
}
.bg-shc-shadow .dropdown-dark .dropdown-header {
background-color: var(--shc-shadow);
}
@media (min-width: 992px) {
.dropdown > .bg-shc-shadow.dropdown-menu, .dropup > .bg-shc-shadow.dropdown-menu {
background-color: #1c2024 !important;
scrollbar-color: rgba(255,255,255,0.38) rgba(4,4,4,0.35);
}
}
@media not all and (min-width: 992px) {
.dropdown > .bg-shc-shadow.dropdown-menu, .dropup > .bg-shc-shadow.dropdown-menu {
background-color: #1c2024 !important;
}
}
.shc-gallery-thumbnail:not(.shc-gallery-thumbnail-active) {
border-color: transparent !important;
}`;
var strCssSticky = `
/* schedule always visible headers */
body.schedule-expanded {
overflow: hidden;
}
body.schedule-expanded::after {
content: "";
background: rgba(0,0,0,0.7);
position: fixed;
top:0;
left:0;
bottom:0;
right: 0;
width: 100%;
height: 100%;
z-index: 1048;
}
table#shc_schedule {
border-width: 0px !important;
}
table#shc_schedule thead th:last-child {
border-right: 1px solid var(--shc-sonic, transparent) !important;
}
table#shc_schedule tbody tr:last-child th:first-of-type {
border-bottom: 1px solid var(--shc-sonic, transparent) !important;
}
/* column headers */
.schedule-expanded #shc_schedule thead, .schedule-expanded #shc_schedule thead th {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 3;
}
/* row headers */
.schedule-expanded #shc_schedule tbody th:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
}
/* corner header */
.schedule-expanded #shc_schedule thead th:first-child {
z-index: 4;
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
}
/* grid on headers */
.schedule-expanded #shc_schedule tbody tr th:first-of-type::after,
.schedule-expanded #shc_schedule thead th::after {
content: "";
z-index: -1;
position: absolute;
height: calc(100% + 0.5px);
width: calc(100% + 0.5px);
top: 0;
left: 0;
border-right: 1.15px solid #f0f0f0;
border-bottom: 1.15px solid #f0f0f0;
background-color: var(--shc-sonic);
}
.schedule-expanded #shc_schedule tbody tr:last-child th:first-of-type::after {
border-bottom: none;
}
.schedule-expanded #shc_schedule thead th:last-child::after {
border-right: none;
}
.bg-shc-shadow-light #shc_schedule thead th::after,
.bg-shc-shadow-light #shc_schedule tbody tr th:first-of-type::after {
border-color: var(--shc-shadow-dark, #101010);
}
body:not(.schedule-expanded) #shc_schedule-wrapper {
position: relative;
margin-left: -1rem;
padding: 0 1rem;
overflow: visible;
scrollbar-width: thin;
}
.schedule-expanded #shc_schedule-wrapper {
position: fixed;
top: 0.65rem;
bottom: 0.65rem;
left: 0.5rem;
right: 0.5rem;
max-height: 100vh;
max-width: 100vw;
overflow: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.38) rgba(32,32,32,0.35);
background-color: var(--shc-sonic);
z-index: 1049;
}
`;
var strCssFilm = `
/* filmstrip effect */
.filmstrip {
position: relative;
}
.filmstrip img {
height: 96px !important;
padding: 0 4px;
box-sizing: border-box;
}
.filmstrip:before,
.filmstrip:after {
content: "";
position: absolute;
top: calc(.5rem + 3.8px);
height: calc(100% - 1rem - 7.8px);
width: 14px;
background-repeat: repeat-y;
background-size: 100% 11px;
background-position-y: -9px;
}
.filmstrip:before {
background-image: linear-gradient(to bottom,
#353535 6px,
rgba(0,0,0,0) 7px),
linear-gradient(to left,
#353535 4px,
#fff 4px,
#fff 10px,
#353535 10px);
left: calc(.5rem + 4px);
}
.filmstrip:after {
background-image: linear-gradient(to bottom,
#353535 6px,
rgba(0,0,0,0) 7px),
linear-gradient(to right,
#353535 4px,
#fff 4px,
#fff 10px,
#353535 10px);
right: calc(.5rem + 4px);
}`;
// Insert CSS styles
GM_addStyle(strCss + strCssEx + strCssFilm);
// Add background color to menus
var bgTheme = document.querySelector(".navbar").className.match(/(bg-shc-[a-z]+)|$/)[1] || "bg-shc-sonic";
[].forEach.call(document.querySelectorAll(".navbar .navbar-nav"), function(navnode){navnode.classList.add(bgTheme);});
// Trigger backdrop event when clicking empty menu area
[].forEach.call(document.querySelectorAll(".navbar .navbar-collapse"), function(navnode){
navnode.addEventListener("click", function(event){if(event.target===navnode){document.querySelector(".navbar-backdrop").click();}});
});
// Reset menu scroll position back to top
[].forEach.call(document.querySelectorAll(".navbar .nav-link.dropdown-toggle"), function(ddnode){
ddnode.addEventListener("click", function(){setTimeout(function(){ddnode.parentElement.querySelector(".dropdown-menu").scrollTop=0;},100);});
});
// Reset mobile-view menu scroll position back to top
[].forEach.call(document.querySelectorAll(".navbar-toggler"), function(hbnode){
hbnode.addEventListener("click", function(event){
var n = document.querySelector(event.currentTarget.dataset.target);
setTimeout(function(){n.scrollTop=0; if(!!n.firstElementChild){n.firstElementChild.scrollTop=0;}},80);
});
});
// Apply a filmstrip effect to GIF and youtube video thumbnails
var filmstrip = function(){
var filmExp = new RegExp("(\\.gif\\'\\)$|youtube.*\\.com/embed/)");
[].forEach.call(document.querySelectorAll(".shc-entry-gallery-choice .shc-gallery-item"), function(node){
if(filmExp.test(node.querySelector(".shc-gallery-thumbnail").getAttribute("onclick"))){
node.classList.toggle("filmstrip");
}
});
};
if(/\/entries\/(?:expo.+|contest.+)\/[0-9]+$/.test(location.pathname)){filmstrip();}
// Add toggle to expand stream schedule table and make the headers always visible
if(/^\/streams(\/)?$/.test(location.pathname)){
GM_addStyle(strCssSticky);
var tbl = document.getElementById("shc_schedule");
if(tbl){
var strExpandBtn = `<div data-toggle="button" class="btn btn-lg fa fas btn-shc-sonic fa-expand-arrows-alt p-2" style="min-width: 2.1rem; border: 1px solid #fff"></div>`;
var wrapper = window.document.createElement("div");
wrapper.setAttribute("id", "shc_schedule-wrapper");
tbl.parentNode.insertBefore(wrapper, tbl);
wrapper.appendChild(tbl);
document.querySelector("#shc_schedule thead th:first-of-type").innerHTML = strExpandBtn;
document.querySelector("#shc_schedule thead th:first-of-type .btn").addEventListener("click", function(event){
if((' '+this.className+' ').indexOf(' active ') > -1){
document.body.classList.remove('schedule-expanded');
this.classList.remove('fa-compress-arrows-alt');
this.classList.add('fa-expand-arrows-alt');
}else{
document.body.classList.add('schedule-expanded');
this.classList.remove('fa-expand-arrows-alt');
this.classList.add('fa-compress-arrows-alt');
}
}, false);
}
}
// Periodically update highlight in stream schedule to be on current timeblock
function dynamicSchedule(){
function getRow(table,index,rowStart){
if(rowStart==null){rowStart=1;}
return [].slice.call(table.rows[index].cells, rowStart);
}
function getColumn(table,index,colStart){
if(colStart==null){colStart=1;}
return [].slice.call(table.rows, colStart).map(function(a){return a.cells[index];});
}
function cellFromIndex(table,indexPair){
var rowIndex = indexPair[0];
var colIndex = indexPair[1];
return table.rows[rowIndex].cells[colIndex];
}
var dateReg = new RegExp("(\\w+)\\s(\\d+).*\\s(\\w+)");
var schedTable = document.querySelector("#shc_schedule");
if(!schedTable){return;}
var schedTopHdrs = getRow(schedTable,0,1);
var schedSideHdrs = getColumn(schedTable,0,1);
var dateNow = new Date();
var year = dateNow.getFullYear();
for(var i=0;i<schedTopHdrs.length;i++){
var res = schedTopHdrs[i].textContent.match(dateReg);
schedTopHdrs[i].dataset.date = Date.UTC(year, new Date(res[3]+" 1, 2020").getMonth(),res[2],(1*schedSideHdrs[0].dataset.hour)+7);
}
var dateNext = new Date();
dateNext.setUTCHours(dateNext.getUTCHours()+1,0,0,80); // next check at the top of the hour
var timeDiff = (dateNext.getTime() - dateNow.getTime());
var schedTimer = setTimeout(updateSelCell, timeDiff);
function updateSelCell(){
var dateHere = new Date();
var column = -1, row = -1, sel = null;
for(var i=0;i<schedTopHdrs.length;i++){
if(dateHere.getTime()>=1*schedTopHdrs[i].dataset.date && dateHere.getTime()<1*schedTopHdrs[i].dataset.date+86400000){
column = i+1;
for(var j=0;j<schedSideHdrs.length;j++){
var hour = ((dateHere.getUTCHours()-7) + 24) % 24;
if(hour==1*schedSideHdrs[j].dataset.hour){
row = j+1;
break;
}
}
break;
}
}
if(row>=0 && column>=0){
sel = schedTable.querySelector("td.now");
if(sel){sel.classList.remove("now");}
sel = cellFromIndex(schedTable, [row,column]);
sel.classList.add("now");
console.log("Schedule selection updated \n"+ dateHere.toISOString());
console.log("row: "+row+" column: "+column);
}else{
sel = schedTable.querySelector("td.now");
if(sel){sel.classList.remove("now");}
}
dateNext = new Date();
dateNext.setUTCHours(dateNext.getUTCHours()+1,0,0,0);
timeDiff = (dateNext.getTime() - dateHere.getTime());
schedTimer = setTimeout(updateSelCell, timeDiff);
}
}
if(/^\/streams(\/)?$/.test(location.pathname)){dynamicSchedule();}
// BONUS: Switching Color Themes
// Function for applying a theme
var cycleThemes = function(newTheme){
var themes = ["shc-sonic","shc-tails","shc-knuckles"];
var theme = document.querySelector(".navbar").className.match(/bg-(shc-[a-z]+)(?!\S)|$/)[1];
var themeIndex = themes.indexOf(theme);
var themeNext = newTheme || themes[(themeIndex+1)%themes.length];
if(!theme){theme = themes[0];}
var themeBtn = theme + ((/^shc-(?:tails|knuckles)$/.test(theme)) ? "0":"");
var themeBtnNext = themeNext + ((/^shc-(?:tails|knuckles)$/.test(themeNext)) ? "0":"");
if(theme===themeNext || !(/^shc-[a-z]+$/).test(themeNext)){return theme;}
var themeExp1 = new RegExp("(bg-|border-)("+theme+")","g");
var themeExp2 = new RegExp("(btn-)("+themeBtn+")","g");
[].forEach.call(document.querySelectorAll(".bg-"+theme+", .border-"+theme+", .btn-"+themeBtn), function(node){
node.className = node.className.replace(themeExp1, "$1"+themeNext).replace(themeExp2, "$1"+themeBtnNext);
if(node.classList.contains("btn-shc-sonic")){
node.classList.remove("btn-shc-sonic");
node.classList.add("btn-"+themeBtnNext);
}
});
[].forEach.call(document.querySelectorAll(".shc-entry-body .btn-shc-grey"), function(node){
node.classList.add("btn-"+themeNext);
});
if(!!window.hapi_c){window.hapi_c.MODAL_THEME = window.hapi_c.MODAL_THEME.replace(/bg-shc-[a-z]+/, "bg-"+themeNext);}
// Some elements (footer, schedule, shc-entry-tags) are using CSS Var for color rather than class name.
// Modify CSS Var "--shc-sonic" to match new theme:
var cloneCssVar = function(fromVar, toVar, newOnly){
if(!!getComputedStyle(document.documentElement).getPropertyValue("--"+fromVar)){
if(!newOnly || !getComputedStyle(document.documentElement).getPropertyValue("--"+toVar)){
document.documentElement.style.setProperty("--"+toVar, getComputedStyle(document.documentElement).getPropertyValue("--"+fromVar));
return true;
}
}
return false;
};
cloneCssVar("shc-sonic","shc-sonic-backup",true);
if(themeNext==="shc-sonic"){
cloneCssVar("shc-sonic-backup","shc-sonic");
}else{
cloneCssVar(themeNext,"shc-sonic");
}
// Set body background tint
document.body.className = document.body.className.replace(/(?:^|\s)bg-(shc-[a-z]+)-light(?!\S)/g, "").replace(/^\s/, "");
document.body.classList.add("bg-"+themeNext+"-light");
return themeNext;
};
window.cycleThemes = cycleThemes;
// Insert a button for selecting theme
var strHtml = `<div id="theme-selector" class="dropup" style="position:absolute;display:inline-block;right:1em;margin-top:-2px;">
<a id="theme-button" class="dropdown-toggle btn btn-shc-sonic" href="#" role="button" data-toggle="dropdown" style="display:block;padding:0 4px;font-size:1.1em;border:1px solid rgba(255,255,255,.4);">Theme</a>
<ul role="menu" class="dropdown-menu dropdown-menu-right dropdown-pills dropdown-dark bg-shc-sonic" style="min-width:auto;">
<li><a class="dropdown-item" role="menuitem" href="#" data-value="shc-sonic">SHC-Sonic</a></li>
<li><a class="dropdown-item" role="menuitem" href="#" data-value="shc-tails">SHC-Tails</a></li>
<li><a class="dropdown-item" role="menuitem" href="#" data-value="shc-knuckles">SHC-Knuckles</a></li>
<li><a class="dropdown-item" role="menuitem" href="#" data-value="shc-amy">SHC-Amy</a></li>
<li><a class="dropdown-item" role="menuitem" href="#" data-value="shc-blaze">SHC-Blaze</a></li>
<li><a class="dropdown-item" role="menuitem" href="#" data-value="shc-shadow">SHC-Shadow</a></li>
</ul>
</div>`;
var footer = document.getElementsByTagName("footer")[0];
footer.insertAdjacentHTML("afterbegin", strHtml);
[].forEach.call(footer.querySelectorAll("#theme-selector a.dropdown-item"), function(node){
node.addEventListener("click", function(event){
var res=cycleThemes(event.currentTarget.getAttribute("data-value")); event.preventDefault(); GM_setValue("GM_theme",res); return false;
}, false);
});
// Restore last theme
var savedTheme = GM_getValue("GM_theme");
if(!!savedTheme){cycleThemes(savedTheme);}
})();