@font-face {
font-family: SourceSansPro;
src: url("./fonts/SourceSansPro-Regular.otf") format("opentype");
}
html, body {
background-color: #353b48;
margin: 0;
height: 100%;
user-select: none;
}
#topbar {
-ms-overflow-style: hidden;
-webkit-app-region: drag;
background-color: green;
z-index: 99;
box-shadow: 0px 0px 2px 1px rgb(0, 0, 0);
}
#topbar > span {
font-family: SourceSansPro;
line-height: 14pt;
padding-top: 1pt;
padding-left: 3pt;
color: rgba(0, 0, 0, 0.75);
}
.topbar-btn-container {
-webkit-app-region:no-drag;
color:white;
position: absolute;
right: 0;
height: 16pt;
z-index: 128;
top: 0;
}
.topbar-btn-container > button {
background-color: rgba(0,0,0,0);
border:none;
height: 16pt;
line-height: 16pt;
}
.topbar-btn-container > button:hover {
background-color: rgba(0,0,0,0.27);
}
.topbar-btn-container > button:focus {
background-color: rgba(0,0,0,0.27);
outline: none;
}
/* TODO min and max with/height for sidebar and footer */
.outer_wrapper {
display: grid;
background-color: lightgreen;
height: 100%;
grid-template-rows: 16pt 1fr 42pt;
}
.inner_wrapper {
display: grid;
background-color: pink;
grid-template-columns: 1fr 120pt;
}
.content {
background-color: #f5f6fa;
position: relative;
}
.sidebar {
background-color: #353b48;
border-left: 1pt #353b48 solid;
box-shadow: 0px 0px 4px 0px black;
z-index: 10;
}
.footer {
background-color: #c8d5d8;
box-shadow: 0px 0px 2px 1px rgb(0, 0, 0);
overflow: hidden;
z-index: 20;
position: relative;
}
#play {
border: 0.5pt darkred solid;
height: 34pt;
margin: 4pt 4pt;
width: 190pt;
font-size: x-large;
font-family: SourceSansPro;
}
#play:focus {
border-color: white;
outline: none;
}
#play:hover {
}
#play:active {
}
.sidebarItem {
border-top: 0.5pt hsla(215, 15%, 32%, 1) solid;
user-select: none;
cursor: pointer;
}
.sidebarItem > .title {
/*outline: 1pt red dotted; */
box-sizing: content-box;
position: relative;
height: 36pt;
overflow: hidden;
background: #2f3640;
border-bottom: 0.5pt hsla(215, 15%, 18%, 1) solid;
}
.sidebarItem > .title > div {
font-family: SourceSansPro;
position: absolute;
left: 14pt;
padding-left: 10pt;
height: 35.5pt;
line-height: 35.5pt;
z-index: 20;
/* outline: 1pt yellow dotted; */
color: white;
font-size: 13pt;
width: 100%;
background: linear-gradient(to right,rgba(0,0,0,0),#2f3640 25pt);
}
.sidebarItem > .title > div:hover {
background: linear-gradient(to right,rgba(0,0,0,0),hsla(215, 15%, 24%, 1) 25pt);
}
.sidebarItem.selected > .title {
background: hsla(215, 15%, 26%, 1);
}
.sidebarItem.selected > .title > div {
background: linear-gradient(to right,rgba(0,0,0,0),hsla(215, 15%, 28%, 1) 25pt);
}
.sidebarItem.selected > .title {
cursor: default;
}
.sidebarItem > .title > img {
height: 34pt;
width: 34pt;
position: absolute;
z-index: 5;
/*outline: 1pt red dotted;*/
margin: 1pt 0;
pointer-events: none;
}
.sidebarItem > .colapse {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease-out;
}
.sidebarItem.selected > .colapse {
max-height: 500px;
transition: max-height 0.25s ease-in;
}
.sidebarItem > .colapse > div {
font-family: SourceSansPro;
padding:4pt;
color:#949494;
border-bottom: 0.5pt hsla(215, 15%, 20%, 1) solid;
}
.sidebarItem > .colapse > div:hover {
background-color: rgba(255, 255, 255, 0.02);
}
.sidebarItem > .colapse > div.selected {
cursor: default;
background-color: rgba(255, 255, 255, 0.04);
color: #c1c1c1;
}
.sidebarItem > .colapse > div > svg {
margin-right: 4pt;
}
#contentBackground {
position: fixed;
left: -5%;
top: -5%;
min-width: 110%;
min-height: 110%;
z-index: 0;
opacity: 1;
background-color: #2C2F33;
transition: opacity 1s ease-out;
}
#contentBackground.hidden {
opacity: 0;
}
#contentBackground > img {
min-width: 100%;
min-height: 100%;
pointer-events: none;
}
#serverPage{
position: absolute;
z-index: 4;
overflow-y: scroll;
width: 100%;
height: 100%;
color: white;
font-family: SourceSansPro;
}
.infoServerPage {
padding: 12pt;
}
.infoServerPage > .title {
/*outline: 1pt red dotted; */
background: rgba(0, 0, 0, 0.6);
margin-bottom: 5pt;
width: fit-content;
padding: 5pt 5pt;
border-radius: 2pt;
font-size: x-large;
line-height: 100%;
}
.infoServerPage > .shortDescription {
/*outline: 1pt red dotted;*/
background: rgba(0, 0, 0, 0.6);
width: fit-content;
}
.unknownServerPage {
background: rgba(0, 0, 0, 0.6);
color:white;
padding: 4pt;
margin: auto 10pt;
}
#serverPage::-webkit-scrollbar {
width: 6px;
margin-left: 3px;
}
#serverPage::-webkit-scrollbar-track {
background-color: rgba(0,0,0,0);
}
#serverPage::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,0.3);
border-radius:2pt;
}
#serverPage::-webkit-scrollbar-thumb:hover {
background-color: rgba(255,255,255,0.5);
}
.socialContainer {
height:20pt;
margin-bottom: 4pt;
}
.socialContainer > button {
height:16pt;
margin-left: 3pt;
}
#activity {
position: absolute;
height: 100%;
padding:3pt;
right: 4pt;
color:darkgrey;
font-family: SourceSansPro;
}
#activity.error {
color:red;
}
#screenshots {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#screenshots > .nothingHere {
padding:3pt;
margin:6pt;
background: rgba(0, 0, 0, 0.6);
border-radius: 2pt;
}
.screenshot {
padding:5pt;
margin:6pt;
border-radius: 5pt;
background: rgba(0, 0, 0, 0.6);
width: fit-content;
box-shadow: 0 0 0 2pt #916d38,
0 0 0 3pt #e8c067,
0 0 0 4pt #ac7d36;
}
.screenshot > img {
max-width: 150pt;
border-radius: 2pt;
}