* {
font-family: Arial;
}
a, a > * {
transition: color 0.2s;
}
#adminLinkMobile {
margin-left: 0.5em;
}
.fa-reddit {
color: #FF4500;
font-size: 24px;
}
.fa-youtube {
color: #FF0000
}
#announcementText > p {
font-weight: bold;
margin: 0;
display: inline-block;
}
#menuSearchButton {
}
.allOption {
display: inline-flex;
gap: 0.25em;
align-items: center;
}
#adminLink {
font-size: 1.3em;
/* align-self: center; */
padding-top: 3px;
}
.footerMenu .supporters {
display: flex;
justify-content: center;
gap: 1em;
}
.serverOrderCon {
/* padding: 0em 1em 1em; */
/* padding: 0.5em 1em; */
/* margin: 0 0 1em 0; */
/* padding: 0 1em; */
}
#menuCapatcha {
display: flex;
justify-content: flex-end;
margin: 0.5em 0 0 0;
}
.offScreen {
position: absolute;
left: -99999px;
}
#hasrootSearch, #clipSearch {
padding: 4px;
background-color: #374c5e;
/* border-bottom-left-radius: 6px; */
/* border-bottom-right-radius: 6px; */
/* display: none; */
margin: 0.5em;
display: flex;
gap: 1em;
border-radius: 2px;
padding: 0.5em;
align-items: center;
gap: 0.5em;
}
#searchWrapper, #clipSearchWrapper {
display: flex;
justify-content: center;
}
#hasrootSearch > .descriptor,
#clipSearch > .descriptor {
display: flex;
align-items: center;
color: #ffc112;
font-weight: bold;
gap: 0.5em;
cursor: pointer;
}
#hasrootSearch > #hasrootSearchFilter {
/* font-size: 1.25em; */
padding: 0.25em;
}
#serverOrderOptions {
width: 800px;
max-width:100%;
user-select: none;
}
#serverOrderOptions * {
user-select: none;
}
.serverOrderCon .container {
/* display: flex; */
/* flex-wrap: wrap; */
padding: 0.5em 1em 1em 1em;
/* column-count: 4; */
display: flex;
min-height: 1em;
flex-wrap: wrap;
max-width: 800px;
min-height: 2.75em;
}
#serverOrderOptions .optionsBox {
/* width: 100%; */
flex-grow: 1;
}
/* #serverOrderContainers > *:not(:first-child) .container { */
/* padding-top:1em; */
/* } */
/* #serverOrderContainers > *:not(:last-child) .container { */
/* padding-bottom: 1em; */
/* } */
.serverOrderCon .server {
padding: 0.25em;
padding: 0.5em;
font-weight: bold;
background: #4c6b85;
margin: 0.25em;
user-select: none;
}
.serverOrderCon .server:hover {
color: #ffc112;
}
.footerMenu .supporters > div {
/* display: flex; */
/* gap: 0.25em; */
/* align-items: center; */
}
.footerMenu .supporterName {
/* font-size: 1.1em; */
}
.reddit-share svg {
margin: 0px;
}
.bgStackIcon {
}
.bgStack {
}
.options input:not(.blocked), .options input:not(.disabled) {
color: #ffc112;
}
#hamburgerIco {
display:none;
}
.twitchStack {
height: 100%;
width: 100%;
}
.twitchStack .fa-square {
color: white;
}
#latestBlog {
display: flex;
justify-content: center;
/* padding: 0.5em 0; */
font-weight: bold;
font-size: 1em;
color: white;
/* max-width: 800px; */
margin-top: 0.5em;
margin: 0.5em 1em;
max-width: 100%;
}
#latestBlog > div {
max-width: 800px;
flex-basis: 800px;
padding: 0.5em;
border-radius: 2px;
justify-content: space-between;
display: flex;
align-items: center;
}
a:hover > .discord,
a:hover > .ytICO{
filter: brightness(75%);
}
.ytICO {
max-height: 1em;
}
a:hover > .fa-twitter{
color:#0090e8;
}
.fa-instagram {
}
.discordIcon {
width: 27px;
height: 22px;
}
.discordIcon .fa-discord {
width: 28px;
}
.discordIcon .fa-square {
font-size: 25px;
color: white;
}
.youtubeIcon {
width: 27px;
height:24px;
}
.youtubeIcon .fa-square {
font-size: 10px;
color: white;
}
.youtubeIcon .fa-youtube {
height: unset;
width: unset;
}
.noServerSelected {
color: white !important;
}
.reddit-share {
width: 24px;
height: 24px;
}
.currentServer {
display: none !important;
}
/* .reddit-share svg { */
/* margin: 0px; */
/* } */
.vhWrapper {
height: 100vh;
position: fixed;
z-index: 50;
width: 100%;
}
.smallMenu {
display:none;
}
#hamburgerIco {
/* background: linear-gradient(0deg, rgb(67 94 118) 0%, rgba(44,62,77,1) 6%, rgba(67,95,119,1) 100%); */
padding: 0.5em;
min-height: 1em;
}
#serverPicker {
display: flex;
justify-content: space-between;
margin: auto;
max-width: 700px;
flex-wrap: wrap;
}
#serverPicker > .serverChoice {
display: inline-block;
background-color: red;
padding: 10px;
}
.reddit-share > .fa-circle {
color: white;
}
h1, h2 ,h3, h4, h5, h6 {
color: white;
}
body {
background: #212d38;
}
.markdown li > ul {
padding-left: 2em;
}
.ui-dialog ol, .ui-dialog ul, .ui-dialog li {
list-style-position: inside;
list-style-type: none;
padding: 0px;
margin: 0px;
}
.noList ol, .noList ul, .noLists li, .noList {
list-style-position: inside;
list-style-type: none;
padding: 0px;
margin: 0px;
}
.admin {
display: none;
}
.hrBg {
background-color: #374c5e;;
border-radius: 2px;
background: linear-gradient(0deg, rgb(47 69 88) 0%, rgba(67,95,119,1) 100%);
}
.longHrBg {
background: linear-gradient(0deg, rgb(47 69 88) 0%, rgba(67,95,119,1) 100%);
}
.blue .hrBg {
background: linear-gradient(0deg, rgb(47 69 88) 0%, rgb(57 100 136) 100%);
}
body {
min-height: 100vh;
background: -webkit-gradient(linear, left bottom, left top, from(rgb(55 76 94)), color-stop(0%, rgb(24 33 41)), to(rgba(55,76,94,1)));
background: -o-linear-gradient(bottom, rgb(55 76 94) 0%, rgb(24 33 41) 0%, rgba(55,76,94,1) 100%);
background: linear-gradient(0deg, rgb(24 33 41) 0%,rgb(24 33 41) 100%);
background: linear-gradient(0deg, rgb(24 33 41) 0%,rgb(32 44 55) 100%);
}
.container {
color: white;
}
.left {
float: left !important;
}
.right {
float: right !important;
}
#notifications {
position: fixed;
margin: 0;
padding: 0;
z-index: 9999999;
-webkit-transform: translateZ(0) scale(1, 1);
transform: translateZ(0) scale(1, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
filter: blur(0);
-webkit-filter: blur(0);
max-width: 90%;
WIDTH: 325PX;
right: 1em;
float: right;
}
footer::before {
clear: both;
}
footer {
width: 100%;
/* margin: auto; */
text-align: center;
/* margin-top: 1em; */
color: white;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: flex-end;
/* padding-bottom: 5px; */
flex-grow: 2;
align-items: center;
align-self: center;
}
a {
color: #FFC112;
font-weight: bold;
text-decoration: none;
}
a:hover , .stream a:hover{
color: orange;
}
.important {
color: #FFC112;
font-weight: bold;
}
#sideCtrls {
vertical-align: middle;
display: flex;
align-items: center;
height: 100%;
}
#sideCtrls .discord {
height: 1.8em;
margin-top: 6px;
}
#sideCtrls a:focus {
outline: 0;
}
#sideCtrls > *:not(:last-child){
margin-right: 11px;
}
#feedback ul li {
display: flex;
justify-content: space-between;
}
label[for=clipUrl] {
}
#clipUrl {
flex: 1 1 auto;
/* background-color: transparent; */
margin: 0 4px;
/* color: white; */
border: none;
}
.highlighted {
font-style: italic;
background-color: rgba(155,199,219,0.5) !important ;
}
.clear {
clear: both;
}
#searchLink {
background: transparent url('/images/search7.png') no-repeat;
}
#refreshLink {
background: transparent url('/images/refresh2.png') no-repeat;
}
#optionsLink {
background: transparent url('/images/gear.png') no-repeat;
}
#options nav {
background-color: unset;
}
#options label, #options input { display:inline-block;
}
#options select, #options input[type=button]{ display:inline; }
#options .optionsPane:not(#streamListOptions) {
display: none;
}
#serverOptionsContainer {
display: none;
}
#serverOptionsSelecter {
margin-bottom: 10px;
}
.dialog label {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
#optionsError:after {
content: " "
}
#options li ul {
/* margin-left: 20px; */
/* width: calc(100% - 20px); */
width:100%;
}
#options nav {
margin-bottom: 5px;
}
#options nav li {
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
}
#options nav li a {
padding: 3px;
}
#options .subMenu a {
background-color: rgb(55, 76, 93);
}
#options a:hover {
color:orange;
}
#resetDefaults {
position: relative;
bottom: 0px;
height: 2em;
margin-top: 15px;
}
.subMenu {
/* margin-top: 15px; */
}
.optionsPane {
display: block;
}
#serverSorterTemplate {
display: none;
}
.nav {
display: block;
}
#smallLogo {
height: 30px;
margin-left: 5px;
margin-top: 3px;
margin-right: 5px;
}
#options input[type=text]{
width: 5em;
max-height: 1em;
}
.optionsPane ul li, .optionsPane li ul{
/* width: 100%; */
}
.optionsPane li ul li:last-of-type {
/* margin-bottom: 0px; */
}
#streamListOptions .subMenu {
/* text-align: center; */
}
.menu .selectedMenu {
border-bottom: unset;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.menu li a {
padding-bottom: 0px !important;
/* margin-bottom: 4px; */
}
.selectedMenu {
border: 1px solid;
}
.optionsPane ul li {
margin-bottom: 2px;
padding: 0px 0px 0px 10px;
}
#options nav ul, #options .subMenu ul li, .optionsPane ul li {
display: flex;
justify-content: space-between;
}
#options #optionsContainer {
padding: 0.5em;
}
#options ul {
padding-left:0px;
}
#options nav ul, #options .subMenu ul li, .optionsPane ul li, .optionsPane h1, .optionsPane h2, .optionsPane h3 {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
.serverElement .expandLink {
display: none;
padding-top:3px;
}
.serverCustomisations li, .serverCustomisationsOptions li {
/* margin-bottom: 0px !important; */
/* padding-bottom: 2px !important; */
/* padding-top: 2px !important; */
}
.serverCustomisationsOptions {
display: none;
}
.ui-dialog {
max-width: 100vw;
max-height: 100vh;
overflow: auto;
}
.serverCustomisations {
/* margin: 0 auto; */
display: block;
clear: both;
/* display: none; */
}
.serverCustomisations ul {
margin-left: 0px;
}
.serverNotifications ul {
display: flex;
justify-content: space-around;
}
.serverNotifications ul li {
display: inline-block;
}
#options .menu {
border-bottom: 1px solid;
border-bottom-color: rgb(255, 193, 16);
/* padding-right: 15px; */
background-color: rgb(55, 76, 93);
padding-left: 10px;
padding-right: 10px;
height: 1.5em;
padding-top: 5px;
}
.subMenu a{
font-decoration: underline;
}
.subMenu ul {
justify-content: space-around !important;
}
#options {
padding: 0px;
min-height: 90vh;
}
.serverOverrideSetting {
vertical-align: middle;
margin: 0px 5px 1px 5px
}
#options ul li:hover {
/* background-color:red; */
}
#options li ul:hover {
background-color:unset;
}
#options li:hover , #options li ul li:hover {
background-color: rgba(79, 116, 145,0.25);
}
#options .serverSorter > li {
background-color: #374c5d;
/* padding: 5px 0px 5px 5px; */
border-radius: 2px;
padding: 5px 0px 5px 5px;
display: block;
}
.serverSorter {
min-height: 1em;
}
.serverSorter .override {
/* float: right; */
margin-right: 9px;
}
.serverPlaceholder {
background-color: unset !important;
border: 1px dashed #FFC112;
margin: 10px 0px 10px 0px !important;
/* max-height: 1em; */
}
#options ul > li > label {
width: 100%;
height: 100%;
padding: 4px;
}
#customServerOptions ul li ul li label {
width: calc(100% - 34px);
}
.subMenu ul li {
padding:0px;
}
.serverNotifications {
margin-right: 1px;
}
.serverNotifications > ul > li {
width: 100%;
}
.serverNotifications > ul {
columns: 3;
}
#options .serverName {
display: inline-block;
}
#includedServers .serverName {
}
.override {
display: inline-block;
text-align: right;
}
.serverHelper {
max-height: 1em !important;
opacity: 0.75;
margin: 0px;
}
.serverMain {
display: flex;
justify-content: space-between;
}
.serverMain input {
margin: 0px !important;
}
.ui-sortable-helper .serverCustomisations {
display: none !important;
}
#options #excludedServers .override, #excludedServers .serverCustomisations, #excludedServers .expandLink {
display: none !important;
height: 0px !important;
}
#unsavedChanges {
display: none;
font-weight: bold;
font-size: 1.1em;
margin-top: 10px;
color: #ffc112;
}
.serverElement {
padding-bottom:5px;
border: 1px solid transparent;
}
.serverElement:hover {
border: 1px solid #ffc112;
}
#options .serverElement {
margin-bottom: 6px;
}
#options input {
display: inline-block;
}
#options input[type=checkbox] {
margin: 8px 8px 8px 0px;
}
#feedback input[type=text] { min-width: 200px;
width: 50%; }
.error {
color: red;
font-weight: bold;
}
.required {
color: red;
font-weight: bold;
}
#notificationOptions {
}
#notificationSoundOptions {
}
body {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
display: flex;
flex-direction: column;
}
.container {
padding: 0px 0px 0px 0px;
margin: 10px 25px 0px 25px;
}
}
.markdown:after, .markdown > section:after {
content: "";
display: table;
clear: both;
}
h1, h2, h3, h4, h5, h6, h7 {
margin: 0.25em 0px 0.25em 0px;
}
.markdown section {
margin: 0px 0px 0.5em 0px;
}
.markdown p {
margin:0px 0px 1em 0px;
line-height: 1.4rem;
}
.markdown > section {
margin-left: 10px;
margin-top:10px;
}
.markdown img {
margin: 3px 8px 3px 0px;
display: inline;
max-width: 95%;
max-height: 95%;
}
.markdown img.small {
width: 245px;
/* height: 245px; */
}
.markdown img.medium {
width: 500px;
/* height: 500px; */
}
.markdown img.fullWidth {
width: unset;
max-width:100%;
/* height: 500px; */
}
.markdown h1 {
font-size: 1.5em;
}
.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5 , .markdown h6 , .markdown h7, .markdown h8 {
display: block;
font-weight: bold;
margin-top: 10px;
margin-bottom: 10px;
color: white;
}
header nav {
vertical-align: middle;
width: 100%;
background-color: #374c5e;
height: 35px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
display: flex;
align-items: center;
justify-content: space-between;
}
header * {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
.fa-clock {
color: #FFC112;
margin-right: 3px;
}
form, fieldset {
border: 0;
}
.ui-widget.ui-widget-content {
border: 0px;
}
.ui-dialog {
z-index: 99999999999999 !important;
display: none;
max-height: 95vh;
max-width: 95vw;
}
/* .ui-corner-all { */
/* border-radius: 0px; */
/* } */
/* button.ui-corner-all { */
/* border-radius: 5px; */
/* } */
.ui-dialog {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
background-color: #212d38;
/* color: */
border: 0;
}
.optionsPane .selfAlign {
display: block;
}
.ui-dialog-titlebar {
color: white;
background-color: #374c5e;
font-weight: bold;
border: 0;
}
button, svg, nav a {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
.ui-dialog-title {
}
.ui-dialog-titlebar-close {}
.ui-dialog-content { color: white;}
.ui-dialog-content a { color: #FFC112;}
.ui-dialog-buttonpane {
background-color: #374c5e;
border: 0;
}
.ui-dialog-buttonset {
border: 0;
}
#feedbackContent {
/* width: 100%; */
/* height: 100%; */
}
nav {
}
nav ul {
margin: 0;
padding:0;
list-style: none;
}
.nav a {
margin: 0;
display:block;
color:#fff;
font-size: 16px;
border: none;
cursor: pointer;
color: #FFC112;
background-color: #466178;
font-weight: bold;
text-decoration: none;
padding: .6em 1.35em;
font-size: 80%;
text-shadow: 0 -1px 0 #000;
position: relative;
}
.nav{
vertical-align: top;
display: inline-block;
/* box-shadow: 1px -1px -1px 1px #000, -1px 1px -1px 1px #fff, 0 0 6px 3px #fff; */
border-radius:6px;
}
.nav li{position: relative;}
.nav > li {
float:left;
height: 100%;
border-bottom: 4px #75a1c7 solid;
margin-right: 1px;
}
.nav > li > a {
/* margin-bottom:1px; */
}
.nav > li:not(.disabled):hover , .nav > li:hover >a{
border-bottom-color:orange;
}
.nav li:not(.disabled):hover > a {
color:orange;
} .nav .disabled a {
/* color:grey; */
}
.nav > li:first-child { border-radius: 4px 0 0 4px;}
.nav > li:first-child>a{border-radius: 4px 0 0 0;}
.nav > li:last-child {
border-radius: 0 0 4px 0;
margin-right: 0;
}
.nav > li:last-child >a{border-radius: 0 4px 0 0; }
.nav li li a { margin-top:0px}
.nav li a:first-child:nth-last-child(2):before {
content:"";
position: absolute;
height:0;
width: 0;
border: 5px solid transparent;
top: 50% ;
right:5px;
}
.twitchLogin:hover {
background-color: rgb(166, 107, 255);
}
.twitchLogin {
background-color: #6441A4;
color: white;
font-weight: bold;
display: flex;
align-items: center;
border: none;
border-radius: 4px;
}
.twitchLogin span {
margin: 0.25em;
}
.twitchLogin .fa-twitch {
color: white;
padding-right: 0.25em;
}
.fa-twitch {
color: #6441A4;
}
a:hover > .fa-twitch{
color: #a17de4;
}
.fa-twitter {
color: #1DA1F2;
}
.fa-discord {
color: #7289DA;
/* font-size: 1.8em; */
/* font-size: 1.4em; */
}
a > .fa-discord:hover {
color: #90a9ff;
}
#sideCtrls svg {
}
/* submenu positioning*/
.nav ul {
position: absolute;
white-space: nowrap;
border-bottom: 5px solid orange;
z-index: 9999;
left: -99999em;
}
.nav > li:not(.disabled):hover > ul {
left: auto;
min-width: 100%;
padding-top: 5px
}
.nav > li li ul { border-left:1px solid #466178;}
.nav > li.disabled {
border-color: grey;
}
.nav > li li:not(.disabled):hover > ul {
/* margin-left: 1px */
left: 100%;
top: -1px;
}
/* arrow hover styling */
.nav > li > a:first-child:nth-last-child(2):before {
border-top-color: #FFC112;
}
.nav > li.disabled > a:first-child:nth-last-child(2):before {
border-top-color: grey;
}
.nav > li:not(.disabled):hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-bottom-color: orange;
margin-top:-5px
}
.nav li li > a:first-child:nth-last-child(2):before {
border-left-color: #FFC112;
margin-top: -5px
}
.nav li li:not(.disabled):hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-right-color: orange;
right: 10px;
}
*,*:focus,*:hover{
outline:none;
}
.profileLink {
}
.clicked {
animation-name: spin;
animation-duration:1s;
animation-iteration-count: 1;
}
.saysNo {
animation-name: shake;
animation-duration:2s;
animation-iteration-count: 1;
}
.saysYes {
animation-name: grow;
animation-duration:1s;
animation-iteration-count: 1;
}
@keyframes shake {
10% {
transform: translate(-2px,0px);
color:red;
}
15% {
transform: translate(2px,0px);
color:red;
}
30% {
transform: translate(-2px,0px);
}
35% {
transform: translate(0px,0px);
}
}
@keyframes grow {
25% {
transform: scale(1.25);
}
/* 10% { */
/* transform: translate(0px,2px,); */
/* } */
/* 15% { */
/* transform: translate(0px,2px); */
/* } */
/* 30% { */
/* transform: translate(0px,-2px); */
/* } */
/* 35% { */
/* transform: translate(0px,0px); */
/* } */
/* 50% { */
/* } */
}
#help h1 {
text-align:center;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#overlay {
display: none;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 999999999;
overflow: hidden;
vertical-align: middle;
overflow: auto;
}
#overlay .overlayImg {
margin-left: auto;
margin-right: auto;
display: block;
}
.notifications {
float: right;
}
.adminLink {
font-size: 1.5em;
margin-top: 6px;
}
#sideMenu {
left: 0;
min-width: 200px;
max-width: 300px;
/* width: 33%; */
height: 100%; background-color: #374c5e;
position: fixed;
z-index: 99999;
color:white;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,7.2);
font-weight:bold;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
min-height: 100vh;
overflow-y: scroll;
overscroll-behavior: none;
}
.noScroll {
overflow: hidden;
}
#smallMenuPane{
background-color: rgba(0, 0, 0, 0.5);
width: 100vw;
min-height: 100vh;
z-index: 999999999;
position: fixed;
display: none;
overflow-y: scroll;
overscroll-behavior: none;
}
#sideMenu > .titlebar > img{
margin-right: 5px;
}
#sideMenu > .titlebar {
font-size: 1.2em;
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
}
#sideMenu > ul ul{
list-style: none;
margin-left: 5px;
padding: 0px;
margin-bottom: 7px;
}
#sideMenu > ul {
list-style: none;
margin: 0;
padding: 0;
margin: 0 1em;
margin: 0 0.5em;
}
#sideMenu > ul > li {
font-size: 1.2em;
}
#sideMenu > ul li {
margin: 7px 4px;
}
#sideMenu > .openLink {
float: right;
margin-right: 5px;
}
#sideMenu {
overflow-y: auto;
min-height: 100vh;
}
#serverChoices .topBar #gameOptions a.disabled {
border: 1px grey solid;
color: grey;
pointer-events:none;
}
#serverChoices .topBar > .invBu:hover {
color: #ffc112;
color: orange;
}
#serverChoices .topBar > .invBu {
align-self: flex-start;
color: #374c5e;
}
#serverChoices .topBar .fa-times {
font-size: 2.5em;
font-size: 3.25em;
}
#serverChoices .topBar {
display: flex;
flex-wrap: wrap;
align-items: center;
/* align-items: flex-start; */
justify-content: space-between;
flex-grow: 2;
display: grid;
grid-template-columns: max-content auto max-content;
justify-content: stretch;
margin: 0 0.25em 0 0.25em;
grid-template-areas: "selectorSearch selectorGames selectorClose";
}
#clipServerSelectorSearch svg {
color: grey;
}
#clipServerSelectorSearch input {
width: 10em;
border-radius: 3px;
background: #30475a;
border: 1px solid #30475a85;
color: white;
font-weight: bold;
width: 100%;
}
#clipServerSelectorSearch input::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 0.75em;
width: 0.75em;
/* margin-top:0.1em; */
/* margin-left: .4em; */
/* margin-right:0em; */
/* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2377a0c4'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>"); */
background-image: url("/images/x.svg");
background-size: 100px 100px;
cursor: pointer;
/* background-position: top; */
/* background-repeat: no-repeat; */
background-size: cover;
color: red;
}
#clipServerSelectorSearch .searchWithClose .fa-times {
height:20px;
width:20px;
height: 18px;
width: 18px;
opacity:0;
color: #ffc112;
transition: opacity 0.3s;
}
#clipServerSelectorSearch .searchWithClose .invBu {
pointer-events: none;
margin-right: 0.2em;
}
#clipServerSelectorSearch .searchWithClose {
display: flex;
background-color: #30475a;
align-items:center;
}
#clipServerSelectorSearch .searchWithClose:not([data-applied-search='']) .invBu {
pointer-events: all;
}
#clipServerSelectorSearch .searchWithClose:not([data-applied-search='']) .invBu .fa-times {
opacity: 100;
}
#clipServerSelectorSearch .searchWithClose:not([data-applied-search='']) .invBu:hover .fa-times {
color: orange;
}
#clipServerSelectorSearch {
background-color: #30475a30;
border: 1px solid #30475a85;
padding:0.5em;
margin-left: 0.5em;
gap: 0.25em;
display: flex;
gap: 0.5em;
align-items: center;
}
#serverChoices {
min-height: 0;
display: flex;
max-width: 1200px;
flex-wrap: wrap;
padding:5px;
align-items: center;
justify-content: space-between;
background-color: #212d38;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,7.2);
background-color: #30475a30;
background-color: #222f3b;
max-width: 700px;
border: 1px solid #30475a85;
}
#gameOptions {
margin: 0 1em;
display: flex;
align-items: center;
justify-content: space-between;
gap:0.5em;
column-gap: 1em;
row-gap: 0.5em;
}
#gameServers {
overflow-y: auto;
max-height: 20em;
margin: 0.5em 1em;
width: 100%;
margin: 0.5em 3em 0.5em 0.75em;
}
/* Works on Chrome/Edge/Safari */
#gameServers {
scrollbar-color: #374c5e #1c2730;
scrollbar-width: thin;
}
#gameServers::-webkit-scrollbar {
width: 5px;
}
#gameServers::-webkit-scrollbar-track {
background-color: #374c5e;
background: linear-gradient(0deg, rgb(24 33 41) 0%,rgb(32 44 55) 100%);
}
#gameServers::-webkit-scrollbar-thumb {
background-color: #374c5e;
}
#gameServers > div {
/* display:grid; */
/* grid-template-columns: repeat(auto-fit, 150px); */
display: flex;
flex-wrap: wrap;
align-items: flex-end;
margin: 0 2em;
gap: 0.25em;
margin: 0 0.75em;
gap: 0.5em;
row-gap: 0.5em;
row-gap: 0.6em;
column-gap: 0.6em;
margin: 0.5em;
}
.serverPickerBox.selected, .gamePickerBox.selected{
border: 1px solid white;
}
.gamePickerBox.selected {
border-radius: 50px;
}
.serverPickerBox.selected {
/* font-size:1.2em; */
border-radius: 50px;
}
.serverPickerBox {
flex-grow:2;
}
.serverPickerBox.tempShown, .gamePickerBox.tempShown {
display: inline-flex !important;
}
.serverPickerBox.tempHidden, .gamePickerBox.tempHidden {
display: none !important;
}
.serverPickerBox.currentSuggested {
border: 1px solid #ffc112;
}
.gamePickerBox {
flex-grow: 2;
}
.serverPickerBox, .gamePickerBox {
padding: 1em;
/* margin: 0.25em; */
display: inline-block;
text-align: center;
border: white;
border: 1px solid #FFC112;
background-color: #3f5b73;
z-index: 9999999999;
overflow: hidden;
background-color: #30475a30;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0.5em 0.5em;
border: 1px solid #30475a85;
color: white;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 0.25em;
}
.serverPickerBox {
flex-basis: 150px;
}
.serverPickerBox > .serverName {
overflow:hidden;
text-overflow:ellipsis;
}
.serverPickerBox .gameName {
display: none;
}
.serverPickerBox.tempShown .gameName {
}
#serverChoices[data-game-filter='false'] .serverPickerBox.tempShown .gameName {
display: inline-block;
}
.selectorWrapper {
display: flex;
/* vertical-align: middle; */
/* align-items: center; */
justify-content: center;
/* flex-direction: column; */
/* min-height: 100%; */
margin-top:20vh;
max-width: 90vw;
margin-top: 15vh;
margin: auto;
margin: 10vh auto 0 auto;
}
.closeSelector svg{
text-shadow: 0 0 10px blue;
}
.closeSelector {
margin-right: 5px;
align-self: flex-end;
}
.overlayDialog {
display: flex;
flex-direction: column;
margin: 10px auto;
}
#feedbackStuff ul, #feedbackStuff li {
margin: 0px;
padding: 0px;
list-style: none;
}
#overlay .content .buttonBar {
display: flex;
justify-content:space-around;
align-items: center;
margin: 5px;
margin-top: auto;
}
#feedbackStuff .content {
display: flex;
flex-direction:column;
height: 100%;
min-height: 90vh;
}
#feedbackStuff .discord {
margin: 0 auto;
max-height:2.5em;
}
#feedbackStuff {
max-width: 1200px;
max-height: 1000px;
min-width: 95vw;
min-height: 95vh;
/* height: 90%; */
/* width: 95%; */
/* margin: 10px; */
}
#feedbackStuff input[type='text'] {
max-width: 50em;
max-height: 1.1em;
}
#feedbackStuff .content > div {
margin-bottom: 3px;
}
.spacedInput {
display: flex;
align-items: center;
justify-content: space-between;
}
.spacedInput > label {
padding: 0px 2em 0px 0px;
}
.spacedInput > input {
flex-grow: 1;
min-width: 5em;
}
#overlay .content .buttonBar > button:disabled , .rooBu:disabled {
background-color: grey;
border-color: lightgrey;
}
#overlay .content .buttonBar > button:hover:enabled, .rooBu:hover:enabled {
/* box-shadow: 1px 2px 5px 2px rgba(254,192,17,7.2); */
box-shadow: 1px 1px 10px 2px rgba(254, 192, 17, 1);
}
#overlay .content .buttonBar > button {
padding: 10px;
}
.invBu {
background-color: unset;
border: unset;
color: #FFC112;
padding: 0;
font-weight:bold;
}
.darkHrBg {
background: linear-gradient(0deg, rgb(36 49 62 / 0%) 0%, rgba(44,62,77,1) 32%, rgba(67,95,119,1) 100%);
/* background: linear-gradient(0deg, rgb(36 49 62 / 0%) 0%, rgba(44,62,77,1) 32%, rgb(47 67 83) 100%); */
}
.blue .darkHrBg {
background: linear-gradient(0deg, rgb(36 49 62 / 0%) 0%, rgb(51 83 110) 32%, rgb(57 99 134) 100%);
}
.darkHrBgRev {
background: linear-gradient(180deg, rgb(36 49 62 / 0%) 0%, rgba(44,62,77,1) 32%, rgba(67,95,119,1) 100%);
background: linear-gradient(180deg, rgba(36,49,62,1) 0%, rgba(44,62,77,1) 32%, rgba(67,95,119,1) 100%);
}
.blue .darkHrBgRev {
background: linear-gradient(180deg, rgba(36,49,62,1) 0%, rgb(51 83 110) 32%, rgb(57 99 134) 100%);
}
.invBu:hover {
background-color: unset;
border: unset;
color: orange;
}
#overlay .content .buttonBar > button, .rooBu {
background-color: #212d38;
border-color: #fec011;
color: white;
border-width: 2px;
border-radius: 5px;
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently*/
}
.broadcasterComplete {
margin-right: 5px;
}
#feedbackContentWrapper > textArea {
width: 100%;
height: 95%;
flex-grow: 1;
}
#feedbackContentWrapper {
flex-grow: 1;
flex-shrink: 0;
min-height:2em;
display: flex;
flex-direction:column;
}
#helpStuff {
max-width: 800px;
text-align: center;
}
#options {
max-width: 500px;
}
#debug {
position: fixed;
right: 1em;
top: 1em;
font-size: 1em;
font-color: white;
color: white;
z-index: 99999999999999;
display: none;
}
#overlay .content {
background-color: #212d38;
padding: 15px;
margin-bottom: 10px;
color: white;
display: flex;
flex-direction: column;
}
#closeSelectorWrapper {
/* max-width: 600px; */
display:flex;
justify-content: flex-end;
flex-direction: column;
min-height: 0;
width: 100%;
max-width: 1200px;
max-width: 700px;
}
.shadow {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,7.2) !important;
}
#options > .content {
padding: 0px;
flex-grow: 1;
margin-bottom: 2em;
}
.noResults {
font-weight: bold;
color: red;
display: none;
}
.ui-autocomplete-loading { background:white url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/images/ui-anim_basic_16x16.gif) no-repeat right center }
.ui-autocomplete-list {
}
.center {
text-align:center;
}
.ui-autocomplete {
z-index: 999999;
overflow-y: auto;
overflow-x: none;
max-height:400px;
}
.ui-state-active {
margin: 0px !important;
border: 0px !important;
}
#findStreamer .broadcasterComplete{
flex-grow: 2;
}
#centerHelper {
display: flex;
flex-direction: column;
justify-content: space-around;
}
#findStreamer {
max-width: 450px;
}
#findStreamer > .content > div:not(:last-of-type) {
margin-bottom:5px;
}
#findStreamer #searchHolder {
display:flex;
flex-direction: row;
}
.ui-autocomplete.overlay{
z-index: 99999999999999999;
}
/* newMenu */
#menuHeader #hasrootText, #menuHeader .subServer{
}
#menuSubText::before {
content:" - ";
white-space: pre;
}
#bigMenu a:hover, .subMenu a:hover {
color: #ffc112;
}
#bigMenu a, .subMenu a {
color: white;
}
#bigMenu .rightCtrls a {
color: #ffc112;
}
#bigMenu .rightCtrls a:hover {
color: orange;
}
.footerMenu {
padding: 1em;
border-radius: 2px;
width: 600px;
margin-top: 2em;
}
#bigMenu {
width: 100%;
display: flex;
justify-content: center;
background-color: #374c5e;
padding: 0.5em 0 0 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
background: linear-gradient(0deg, rgba(36,49,62,1) 0%, rgba(44,62,77,1) 32%, rgba(67,95,119,1) 100%);
flex-direction: column;
/* border-bottom: 1px solid #46617814; */
padding: 0.5em 0 0.5em 0;
}
.blue #bigMenu {
background: linear-gradient(0deg, rgb(47 69 88) 0%, rgb(57 100 136) 100%);
background: linear-gradient(0deg, rgba(36,49,62,1) 0%, rgb(36 57 75) 32%, rgb(38 90 133) 100%);
}
.blue2 #bigMenu {
background: linear-gradient(0deg, rgba(36,49,62,1) 0%, rgba(44,62,77,1) 32%, rgb(41 91 133) 100%);
}
.blue3 #bigMenu {
background: linear-gradient(0deg, rgba(36,49,62,1) 0%, rgba(44,62,77,1) 32%, rgb(67 110 147) 100%);
}
.blue3 .hrBg {
background: linear-gradient(0deg, rgba(36,49,62,1) 0%, rgba(44,62,77,1) 32%, rgb(67 110 147) 100%);
background: linear-gradient(0deg, rgba(36,49,62,1) 0%, rgba(44,62,77,1) 32%, rgb(60 94 122) 100%);
}
.blue3 .longHrBg {
background: linear-gradient(0deg, rgba(36,49,62,1) 0%, rgba(44,62,77,1) 32%, rgb(53 84 109) 100%);
}
.blue3 .longHrBgRev {
background: linear-gradient(180deg, rgba(36,49,62,1) 0%, rgba(44,62,77,1) 32%, rgb(53 84 109) 100%);
}
.blue3 .darkHrBgRev {
background: linear-gradient(180deg, rgba(36,49,62,1) 0%, rgba(44,62,77,1) 32%, rgb(67 110 147) 100%);
/* background: linear-gradient(0deg, rgba(36,49,62,1) 0%, rgba(44,62,77,1) 32%, rgb(67 110 147) 100%); */
}
.softHrBg {
background: linear-gradient(0deg, rgb(47 69 88) 0%, rgba(67,95,119,1) 100%);
background: linear-gradient(0deg, rgb(51 72 90) 0%, rgb(61 85 107) 100%);
}
.softHrbg2 {
background: linear-gradient(0deg, rgb(47 69 88) 0%, rgba(67,95,119,1) 100%);
}
.blue3 #streamCtrls .optionsMenu .optionsBox {
background: linear-gradient(0deg, rgba(24,33,41,0.0) 0%, rgba(44,62,77,1) 6%, rgb(63 103 137) 100%);
}
.blue3 .darkHrBg{
background: linear-gradient(0deg, rgb(36 49 62 / 0%) 0%, rgba(44,62,77,1) 32%, rgb(64 104 139) 100%);
background: linear-gradient(0deg, rgb(36 49 62 / 0%) 0%, rgba(44,62,77,1) 32%, rgb(59 93 121) 100%);
}
#bigMenu .subServerOption
{
/* margin-bottom:0.25em; */
/* margin-bottom: 0.5em; */
}
.blue3 #communities .community {
background: linear-gradient(0deg, rgb(41 58 75) 0%, rgba(44,62,77,1) 32%, rgb(67 110 147) 100%) !important;
}
#bigMenu .subServerOption .wrapper {
/* padding: 0.25em 0; */
display: flex;
align-items: baseline;
/* gap: 0.7em; */
/* padding: 0.5em; */
flex-wrap:wrap;
justify-content: center;
/* padding-top:0.25em; */
/* padding-top:0.1em; */
overflow:hidden;
}
#bigMenu .subServerOption {
font-size: 1.25em;
display: flex;
/* gap: .85em; */
align-items: baseline;
justify-self: center;
flex-wrap: wrap;
justify-content: center;
/* margin-top: 0.25em; */
margin: 0;
/* margin-top: 0.25em; */
/* line-height: 1.35em; */
/* line-height: 1.45em; */
/* line-height: 1.40em;*/
/* line-height: 1.5em; */
align-self: flex-end;
overflow:hidden;
}
#collapseMenu > button {
/* font-size: 1.45em !Important; */
/* line-height: 1.45em !important; */
}
/* #menuHeader #gameMenuPicker a[data-game-id='1'] { */
/* display: block; */
/* background-image: url("/images/gtav.png"); */
/* } */
#bigMenu .subServerOption > *:not(:last-child) {
/* margin-right: 0.425em; */
margin-right: 0.35em;
}
#bigMenu .subServerOption > *:not(:first-child) {
/* margin-right: 0.425em; */
margin-left: 0.35em;
}
#bigMenu .subServerOption .selected, #bigMenu .subServerOption .childSelected {
font-size: 1.25em;
/* text-decoration: underline; */
}
#bigMenu .menuDropdown {
list-style:none;
}
#bigMenu .menuDropdown .fa-caret-down {
font-size: 1.5em;
}
#bigMenu .menuDropdown .dropdownHeader .invBu {
min-width: 12.5px;
}
#bigMenu .menuDropdown .dropdownHeader {
display: flex;
margin: 0 0.35em;
gap: 0.25em;
}
#bigMenu .menuDropdown .dropdownHeader > a {
margin:0;
}
#bigMenu .menuDropdown .dropdownContent li {
list-style:none;
/* padding: 0.5em; */
}
#bigMenu .menuDropdown .dropdownContent li a {
margin: 0;
}
#bigMenu .menuDropdown .dropdownContentWrapper {
overflow:hidden;
position: absolute;
z-index: 99999999999;
margin-top: 0.1em;
}
#bigMenu .menuDropdown .dropdownContent {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
background: red;
margin: 0;
padding: 0;
padding: 0.25em;
/* margin-left: -0.5em; */
gap: 0.25em;
padding: 0.5em;
background-color: #1f2a36;
background-color: #203241;
border: 1px solid #30475a85;
padding: 0.75em;
gap: 0.5em;
overflow:hideen;
background-color: #223545;
background-color: #223748;
background-color: #22394;
border: 1px solid #37597473;
border-radius:2px;
}
#menuHeader .rightCtrls .discord{
max-height: 1.5em;
margin-bottom:-.4em;
}
#menuHeader .rightCtrls svg {
}
#menuHeader .rightCtrls {
max-height: 2em;
display: flex;
/* align-content: center; */
justify-content: flex-end;
/* gap: 0.5em; */
/* margin-right: 1em; */
/* align-items: flex-start; */
font-size: 1.5em;
/* margin: auto; */
grid-area: rightCtrls;
/* align-self: center; */
/* align-items: center; */
line-height: 1.6em;
margin-top: 0.05em;
}
.rightCtrls > *:not(:first-child) {
margin-left: 0.25em;
}
.menu .rightCtrls > *:not(:last-child) {
margin-right: 0.25em;
}
#menuHeader .rightCtrls {
margin-right: 0.5em;
}
.serverPicker .rightCtrls {
margin-left: 0.35em;
align-items: flex-start;
}
#menuHeader .serverPicker .rightCtrls {
}
#menuHeader .leftCtrls {
display: flex;
margin-left: 0.5em;
gap: 0.5em;
flex-direction: column;
grid-area: leftCtrls;
/* align-items: center; */
justify-content: center;
max-height: 100%;
justify-content: flex-start;
marin-right:0.5em;
}
#bigMenu .subMenu {
max-width: 1200px;
}
.linkBucket > * {
padding: 0.5em;
font-weight:bold;
display: flex;
align-items: center;
}
.moreLinks .reddit-share {
margin-right: 0.25em;
}
.linkBucket .inlineDiscordLink {
display: flex;
gap:0.25em;
align-items: center;
}
.linkBucket .discord {
max-height:1.5em;
}
.linkBucket {
display: grid;
grid-template-columns: repeat(3,1fr);
}
#bigMenu .moreLinks .subMenu {
display: flex;
flex-direction: column;
gap: 0.25em;
padding: 0.5em 1em 1em;
font-size: 1.2em; display: flex;
flex-direction: column;
gap: 0.25em;
padding: 0.5em 1em 1em;
font-size: 1.2em;
}
#menuSubPanes .activePane.offset {
gap: 0.75em;
margin-right: -1em;
}
#bigMenu .moreLinks, #bigMenu #menuFeedback {
text-align: center;
color: white;
display: flex;
justify-content: center;
/* padding:1em; */
/* margin-top: 0.5em; */
/* margin: 1em auto; */
}
#bigMenu #menuSubPanes > * > .rightCtrls
{
/* margin: 0 -1em 0 0.75em; */
}
#bigMenu .moreLinks h1,
#bigMenu .moreLinks h2,
#bigMenu .moreLinks h3,
#bigMenu .moreLinks h4 {
color: white;
font-size: 1.25em;
}
#bigMenu #serverList {
/* columns: 3; */
/* columns: 3; */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.255em;
font-size: 1.3em;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 1.25em;
}
#bigMenu .subMenu {
background: linear-gradient(0deg, rgba(24,33,41,0.0) 0%, rgba(44,62,77,1) 6%, rgba(67,95,119,1) 100%);
/* margin-top: 1em; */
padding: 1em;
border-radius: 2px;
}
#bigMenu #serverList > a {
}
#menuSubPanes {
display: flex;
justify-content: center;
/* max-width: 95%; */
/* margin: 0 auto; */
max-width: 100%;
}
#bigMenu #serverList > * {
padding: 0.25em;
font-weight: bold;
/* margin: 0.25em 0; */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: white;
}
#menuHeader .leftCtrls img {
max-height: 4.5em;
max-height: 4.35em;
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
}
#sideMenu .titlebar > div {
/* line-height: 1.3em; */
font-size: 1.1em;
}
.charTagIcon {
color: #4f718e;
}
.tagContainer .fa-skull {
color: white;
margin-right: 0.1em;
}
/* .tagContainer .icon-plus.charTagIcon {
font-size: 1em;
margin-right:5em;
margin-right: 0.1em;
}*/
/* .tagContainer .icon-plus.charTagIcon { */
/* font-size: 1em; */
/* } */
#sideMenu .titlebar svg {
width: auto;
height: 1.4em;
}
.invBu:hover {
cursor: pointer;
}
#sideMenu .titlebar {
display: flex;
gap: 0.25em;
align-items: flex-end;
font-size: 1.40em;
/* align-items: center; */
justify-content: flex-start;
justify-content: center;
}
#latestBlogContent {
display: flex;
}
#bigMenu .fa-times{
color: #ffc112;
}
#bigMenu .serverPicker, #menuFeedback {
display: flex;
}
#menuFeedback .discord {
margin: 1em;
max-height:5em;
}
#menuFeedback {
flex-basis: 800px;
}
#menuFeedback > .subMenu > div {
margin: 0.5em 0.25em;
}
#menuFeedback > .subMenu {
display: flex;
flex-direction:column;
width: 100%;
}
#menuMessage {
display: flex;
}
#menuMessage .content {
font-weight: bold;
color: white;
}
.buttonBar.disabled .rooBu {
pointer-events: none;
/* color: grey; */
background-color: grey;
border-color: lightgrey;
}
#menuFeedback .formOptions {
flex-grow: 1;
gap: 0.5em;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#menuFeedback .formOptions textarea {
flex-grow: 1;
min-height: 5em;
}
#menuFeedback .buttonBar {
align-self: flex-end;
margin-top: 0.5em;
}
.activePane {
margin: 1em;
max-width: 100%;
}
.activePane.offset {
max-width: 90%;
}
.formOptions {
list-style:none;
margin: 0;
padding: 0;
}
.formOptions label {
font-weight: bold;
color: white;
}
.formOptions > li{
display: flex;
justify-content: space-between;
gap: 1em;
align-items: flex-start;
}
#bigMenu .serverPicker > .header {
display: flex;
justify-content: space-between;
}
#bigMenu .serverPicker h3 {
color: white;
}
#menuHeader #headerText {
font-size: 2em;
font-weight: bold;
color: white;
display: flex;
/* align-content: center; */
/* align-self: center; */
text-shadow: 2px 2px #000000;
text-shadow: 2px 2px 5px #000000;
grid-area: headerText;
justify-self: center;
white-space: nowrap;
/* line-height: 1.2em; */
/* max-height: 1.2em; */
/* align-self: flex-end; */
/* align-self: self-end; */
/* margin-top: 0.1em; */
/* line-height: 1.2em; */
/* margin-top: 0.05em;*/
line-height: 1.15em;
line-height: 1.2em;
margin-top: 0.05em;
/* margin-top: 0.10em; */
}
#collapseMenu > button {
font-size: 1.25em;
display: flex;
/* align-items: revert; */
/* justify-content: flex-start; */
}
#collapseMenu {
align-self: flex-end;
margin-right: 1em;
padding: 0;
grid-area: collapseMenu;
justify-self: flex-end;
display: flex;
align-items: flex-end;
height:1em;
margin-bottom: -0.250em;
}
#menuHeader #headerText> *:not(:first-child) {
}
#menuHeader #headerText > *:not(:last-child) {
}
#menuHeader #hasrootText {
display:flex;
/* align-items: center; */
}
#menuHeader #hasrootText svg {
max-height: 1.2em;
margin-top: -1px;
/*bigger*/
max-height: 1.3em;
margin-top: -2.25px;
max-height: 1.25em;
margin-top: -1.5px;
margin-right: 0.15em;
width: 35px;
height: auto;
}
#bigMenu .subServer {
/* font-size: 2em; */
text-shadow: 1px 1px #000000;
font-weight: bold;
color: white;
display: flex;
align-content: center;
font-size: 1.5em;
}
.flatFail #streamCtrls .flatFail .optionsBox {
background: unset;
background-color: #30475a;
}
.flatFail #sideList .server {
border-bottom: 1px solid #496c89b3;
}
.flatFail .longHrBgRev {
background: unset;
background-color: #30475a;
}
.flatFail .hrBg {
background: unset;
background-color: #30475a;
}
.flatFail .darkHrBg {
background: unset;
background-color: #30475a;
}
.flatFail .longHrBg {
background: unset;
background-color: #30475a;
}
.flatFail #streamCtrls .optionsMenu .optionsBox {
background: unset;
background-color: #30475a;
}
.flatFail #sideList .server > .header, .flatFail .streamlist .header {
background: unset;
background-color: #30475a;
}
.flatFail #bigMenu {
background: unset;
background-color: #30475a !important;
box-shadow: unset;
}
.flatFail #bigMenu .subMenu {
box-shadow: unset;
background: unset;
background-color: #30475a !important;
background-color: rgb(51 78 100 / 50%) !important;
}
.flatFail #bigMenu .softHrBg {
box-shadow: unset;
background: unset;
background-color: #30475a;
}
.flatFail #streamCtrls .optionsMenu {
padding: 0;
margin: 0em 0em 1em 0em;
}
.flatFail .softHrBg {
background: unset;
background-color: #375268;
}
/* .flatFail .stream { */
/* } */
.flatFail #sideList .streamers > .streamer:not(:first-child) {
border-top: 1px solid #496c89b3;
}
.flatFail #menuHeader #headerText {
text-shadow: unset;
}
.flatFail #optionsWrapper {
margin-top: 0;
}
.flatFail #streamCtrls .topBar {
margin-bottom: 1em;
}
.flatFail .stream .game {
background-color: rgba(0,0,0,0.25);
}
html.clipsAlt #clipsSearchLink {
display: block;
}
html.clipsAlt #clipsActivityLink {
display: none;
}
html:not(.clipsAlt) #clipsActivityLink {
display: block;
}
html:not(.clipsAlt) #clipsSearchLink {
display: none;
}
#gameOptions {
grid-area: selectorGames;
}
#clipServerSelectorSearch {
grid-area: selectorSearch;
}
#serverChoices .topBar .invBu {
grid-area: selectorClose;
}
.blah .container .selected {
background-color: #3f8ac830;
}
.newHrBgOutline{
padding: 0.5em;
background-color: #30475a30;
outline: 1px solid #30475a85;
}
.newHrBg, .newHrBu {
padding: 0.5em;
background-color: #30475a30;
border: 1px solid #30475a85;
}
.newHrBu {
color: white;
font-weight: bold;
cursor: pointer;
padding: 0.75em 1em;
transition: border-color 0.4s ease, color 0.4s ease, background-color 0.4s ease, opacity 0.4s linear;
}
.newHrBu[disabled='disabled'] {
color: grey;
pointer-events: none;
pointer: unset;
}
.newHrBu:not([disabled]):hover {
color: orange;
border: 1px solid #30475a;
}
@media (max-width: 800px) {
#gameOptions {
flex-wrap: wrap;
flex-grow:2;
justify-content: center;
/* width: 100%; */
margin: 0 auto;
}
#serverChoices .topBar .invBu {
justify-self: flex-end;
}
#gameOptions, #clipServerSelectorSearch {
margin-left: 0.75em;
margin-right: 0.75em;
}
#serverChoices .topBar {
grid-template-columns: auto min-content;
grid-template-areas: "selectorSearch selectorClose"
"selectorGames selectorGames";
grid-template-areas: "selectorGames selectorClose"
"selectorSearch selectorSearch";
row-gap:0.5em;
column-gap: 1em;
}
#gameServers {
margin: 0.5em 1em;
}
}
@media (max-width: 700px) {
#bigMenu {
display:none;
}
#hamburgerIco {
display: block !important;
}
.gamePickerBox, .serverPickerBox {
/* flex-basis: 120px; */
}
}
@media (max-width: 350px) {
#serverChoices {
justify-content: space-around;
}
#serverChoices .topBar {
grid-template-columns: 1fr min-content;
grid-template-areas: "selectorGames selectorClose"
"selectorGames selectorGames"
"selectorSearch selectorSearch";
}
#gameOptions {
width: unset;
}
}
@media (max-width: 600px) {
.container, footer {
/* font-size: 0.75em; */
}
}
@media (max-width: 850px) {
body {
/* /* display: block; */ */
}
.container {
margin: 2px 2px 0px 2px;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
#serverList > * {
padding: 0.255em;
}
}
.footerMenu {
/* padding: 1em; */
border-radius: 2px;
width: 100%;
/* margin-top: 2em; */
/* margin-bottom: 2em; */
gap: 0.25em;
display: flex;
justify-content: center;
flex-direction: column;
padding: 1em 0 1em;
padding: 1em 0 0.5em;
/* padding: 1em 0 1em; */
box-shadow: 0px -8px 16px 0px rgba(0,0,0,0.2);
box-shadow: 0px -8px 25px 10px rgba(0,0,0,0.1);
}
#menuHeader {
display: grid;
/* grid-template-columns: 1fr 4fr 1fr; */
grid-template-areas:
"leftCtrls headerText rightCtrls"
"leftCtrls headerText rightCtrls"
"leftCtrls subServerOption collapseMenu";
/* align-items: center; */
/* grid-template-columns: 2fr 10fr 2fr; */
/* grid-template-columns: 1fr 1fr 1fr; */
/* grid-template-columns: 190px 1fr 140px; */
grid-auto-columns: fit-content;
/* grid-auto-columns: 1fr; */
/* grid-auto-columns: max-content; */
grid-template-columns: max-content auto max-content;
grid-template-columns: minmax(175px, 1fr) 4fr minmax(175px, 1fr);
grid-template-columns: 1fr 4fr 1fr;
grid-template-columns: minmax(169px, 1fr) 4fr minmax(169px, 1fr);
grid-template-columns: minmax(172px, 1fr) 4fr minmax(172px, 1fr);
}
#collapseMenuButton {
/* color: #3b5e7c; */
}
#collapseMenuButton:hover{
/* color: #ffc112; */
}
#bigMenu {
padding:0.5em 0 0.5em 0;
/* height: 2.75em; */
}
.initialShrink #bigMenu .subServerOption {
height:0;
overflow: hidden;
/* display:none; */
}
#bigMenu {
/* transition: height 400ms; */
}
.initialShrink #bigMenu .leftCtrls img {
max-height: 2.75em;
}
/* .shrinkMenu #bigMenu #collapseMenu .show, */
.initialShrink #bigMenu #collapseMenu .hide {
display:none;
}
#collapseMenu {
overflow: hidden;
}
.initialShrink #bigMenu #collapseMenu {
height: 0;
}
html:not(.initialShrink) #bigMenu #collapseMenu .show {
display:none;
}
#gameMenuPicker > a{
display: flex;
}
#gameMenuPicker {
display: flex;
align-items: center;
gap: 0.25em;
/* min-width: 175px; */
}
.subServerOption a {
margin: 0 0.25em;
margin: 0 0.35em;
/* margin: 0 0.25em; */
}
.subServerOption .wrapper > *:first-child {
margin-left: 0;
}
.subServerOption .wrapper > *:last-child {
margin-right: 0;
}
#gameMenuPicker > a {
max-width: 100%;
max-height: 100%;
}
#gameMenuPicker > a > img {
max-width: 100%;
max-height: 100%;
/* display: block; /* remove extra space below image */ */
}
.editSlider {
/* width: 100%; */
display: flex;
align-items: center;
justify-content: space-around;
margin: 0.25em 0em 0.25em 1em;
}
.editSlider .hrSlider {
max-width: unset !important;
flex-grow: 2;
margin: 0 0.5em;
}
@media (max-width: 1000px) {
.subServerOption a {
font-size: 0.9em;
margin: 0 0.25em;
margin: 0 0.2em;
}
#bigMenu .subServerOption .selected , .subServerOption .childSelected {
font-size: 1.15em;
}
}
.hwHeader #bigMenu {
/* background: linear-gradient(0deg, rgba(36,49,62,1) 0%, rgba(44,62,77,1) 32%, rgba(67,95,119,1) 100%); */
/* box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%); */
/* box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 35%); */
background-image: url(/images/hwBanner.svg);
/* background-repeat: no-repeat, repeat; */
background-position: top;
background-repeat: no-repeat;
background-size: 100% 100%;
background-size: 1920px 627px;
background-size: 100% auto;
background-size: 98vw auto;
/* background-size: 98vw 627px; */
}
.hwHeader #menuHeader #hasrootText svg {
margin-top: -5.9px;
}
.yoloHeader #menuHeader {
font-size: 0.95em;
}
.yoloHeader .subServerOption .selected, .yoloHeader .subServerOption .childSelected {
border-bottom: 2px solid #2b597d;
font-size: 1.1em;
border-bottom: 2px solid #2b597d70;
}
.yoloHeader #bigMenu .subServerOption {
/* margin-top: -0.1em; */
/* margin-bottom: -0.2em; */
line-height: 1.3em;
}
.yoloHeader #bigMenu #headerText {
/* margin-top: 0.1em; */
margin-top: 0;
margin-top: 0.06em;
}
.yoloHeader #menuHeader .rightCtrls .discord {
max-height: 1.5em;
margin-bottom: -.499em;
}
.yoloHeader #bigMenu .subServerOption .selected , .yoloHeader #bigMenu .subServerOption .childSelected {
font-size: 1.15em;
}
.newHrSiteLook #bigMenu .subMenu {
background-color: #30475a30 !important;
border: 1px solid #30475a85 !important;
}
.newHrSiteLook #bigMenu {
background-color: #30475a30 !important;
border-bottom: 1px solid #30475a85 !important;
background-color: #30475a87 !important;
background-color: #233543 !important;
}
.newHrSiteLook .footerMenu {
background-color: #30475a30 !important;
border-top: 1px solid #30475a85 !important;
}
.newHrSiteLook #hamburgerIco {
background-color: #233543 !important;
border-bottom: 1px solid #30475a85;
}
.newHrSiteLook #sideList .server > .header, .newHrSiteLook .streamlist .header {
background-color: #233542;
}
.newHrSiteLook #sideMenu {
background-color: rgb(46 69 88);
}
.newHrSiteLook #sideList .softHrBg , .newHrSiteLook .streamlist .streams {
background-color: #30475a30;
background-color: rgb(46 69 88);
}
.newHrSiteLookNotGreen #sideList .softHrBg ,
.newHrSiteLookNotGreen .streamlist .streams {
background-color: rgb(50 61 86 / 72%);
}
.newHrSiteLookNotGreen #sideList .softHrBg ,
.newHrSiteLookNotGreen .streamlist .streams
{
border-bottom: 1px solid #30475a85;
}
.newHrSiteLookNotGreen #bigMenu {
background-color: #30475a30 !important;
border: 1px solid #30475a85 !important;
background-color: #233043 !important;
}
.newHrSiteLookNotGreen #sideList .server > .header, .newHrSiteLookNotGreen .streamlist .header {
background-color: #233542;
background-color: #233043;
}
.serverOption.searchOption a {
display: inline-flex;
align-items: center;
gap:0.25em;
}
.serverOption.searchOption svg {
color: #ffc112;
font-size: 1em;
}
.serverOption.searchOption a:hover svg {
color:orange;
}
#serverNameChange {
color: #4b5e6e;
max-width: 400px;
margin:1em auto 0;
text-align: center;
}