/* #region HEAD -- */
*, html, body
{
scrollbar-width: none;
}
html
{
scrollbar-width: none !important;
overflow-y: scroll;
overflow: -moz-scrollbars-none;
}
/* Define the font and the background. */
body
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
font-family: 'Segoe UI', sans-serif;
color: rgba(255, 255, 255, 1);
background-color: rgba(0, 0, 0, 0);
background-image: url("/Resources/Images/wallpaper.webp");
background-size: cover;
scrollbar-width: none !important;
-ms-overflow-style: none;
}
body::-webkit-scrollbar
{
display: none !important;
}
/* Acrylic blur */
.nav-panel
{
position: fixed;
top: 0;
left: 0;
width: 320px;
height: 100%;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(20px);
background-image: radial-gradient(rgba(0, 0, 0, 0.1) 3px, transparent 3px);
background-size: 0.2px 0.2px;
z-index: 0;
}
/* Big black bit that the actual page goes on */
.content-panel
{
position: relative;
margin-left: 320px;
width: calc(100% - 320px);
min-height: 100vh;
background: rgba(0, 0, 0, 1);
z-index: 1;
overflow-x: hidden;
user-select: none;
}
/* If you're using a browser that doesn't support display:grid, you get told to screw off because i haven't made the raw HTML version yet. */
@supports (display:grid)
{
.no-support
{
display: none !important;
}
}
.window-title
{
position: sticky;
display: flex;
align-items: center;
gap: 6px;
margin-left: 10px;
margin-top: 5px;
margin-bottom: 15px;
}
.nav-hamburger
{
display: none;
}
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* #endregion */
/* #region CONTENT -- */
/* Little style stuff for the no-support text, because Internet Explorer still supports a lot of CSS. */
.no-support
{
top: 35px;
left: 20px;
display: block;
position: relative;
z-index: 2;
}
/* Page content. */
.content
{
max-width: calc(100% - 360px);
top: 35px;
left: 20px;
display: block;
position: relative;
z-index: 2;
}
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* #endregion */
/* #region SIDEBAR CONTENT -- */
.sidebar-content
{
top: 35px;
right: 20px;
width: 250px;
display: block;
position: fixed;
z-index: 2;
}
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* #endregion */
/* #region ELEMENTS -- */
img
{
user-select: none;
pointer-events: none;
}
h1
{
font-family: "Segoe UI", sans-serif;
font-weight: 300;
font-size: 22pt;
user-select: none;
}
h2
{
font-family: "Segoe UI", sans-serif;
font-weight: 630;
font-size: 22pt;
user-select: none;
}
h3
{
font-family: "Segoe UI", sans-serif;
font-weight: 400;
font-size: 13pt;
user-select: none;
}
p
{
font-family: "Segoe UI", sans-serif;
font-weight: 300;
font-size: 11pt;
user-select: none;
}
a
{
font-family: "Segoe UI", sans-serif;
font-weight: 300;
font-size: 11pt;
user-select: none;
color: rgba(0, 120, 215, 1);
text-decoration: none;
-webkit-user-drag: none;
}
a:hover
{
color: rgba(153, 153, 153, 1);
}
.grey-p
{
margin: 0;
color: rgba(153, 153, 153, 1);
}
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* #endregion */
/* #region BUTTONS AND BUTTON ANIMATIONS -- */
.button
{
position: relative;
display: inline-block;
padding: 12px 24px;
width: 100%;
height: 20px;
background: rgba(0, 0, 0, 0);
color: rgba(255, 255, 255, 1);
border: none;
box-shadow: none;
text-align: left center;
cursor: default !important;
overflow: hidden;
user-select: none;
--light-x: 50%;
--light-y: 50%;
--light-opacity: 0;
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), --light-opacity 0.2s ease;
}
.button:hover
{
color: rgba(255, 255, 255, 1);
background: rgba(255, 255, 255, 0.05);
box-shadow: inset 0 2px 0 0 rgba(255, 255, 255, 0.05), inset 0 -2px 0 0 rgba(255, 255, 255, 0.05);
}
.button::after
{
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle 80px at var(--light-x) var(--light-y), rgba(255, 255, 255, var(--light-opacity)), transparent 90%);
transition: background 0.05s;
}
@keyframes clickPress
{
0% {transform: scale(1);}
0.00001% {transform: scale(0.92);}
100% {transform: scale(1);}
}
.click-animate
{
animation: clickPress 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.button.selectedpage
{
position: relative;
}
.button.selectedpage::before
{
content: '';
position: absolute;
top: 0px;
bottom: 0px;
left: 0;
width: 3px;
background-color: rgba(0, 120, 215, 1);
transition: width 0.25s linear;
}
.button.selectedpage.animate::before
{
width: 5px;
}
.button.button2
{
background-color: rgba(35, 35, 35, 1);
width: 100px;
height: 100px;
text-align: center;
align-items: center;
padding: 0;
font-size: large;
}
.button.button2:hover
{
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
}
.button.button2:active
{
box-shadow: none !important;
}
.nav-panel .button
{
margin: 0;
display: block;
}
.button3
{
background: rgba(225, 225, 225, 1);
box-shadow: inset 0 0 0 2px rgba(0, 120, 215, 1);
color: rgba(0, 0, 0, 1);
border: none;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 15px;
padding-right: 15px;
font-family: "Segoe UI", sans-serif;
font-weight: 300;
transition: 0.4s ease;
}
.button3:hover
{
background: rgba(229, 241, 251, 1);
box-shadow: inset 0 0 0 1.1px rgba(6, 123, 216, 1);
transition: 0.4s ease;
}
.button3:active
{
background: rgba(204, 228, 247, 1);
box-shadow: inset 0 0 0 1.1px rgba(0, 84, 153, 1);
transition: 0.2s linear;
}
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* #endregion */
/* #region THIN VERSION FOR SMALL SCREENS -------------------------------------- */
@media (max-width: 1130px)
{
.content
{
max-width: calc(100% - 40px);
}
.sidebar-content
{
position: relative;
width: 100%;
right: auto;
top: auto;
height: auto;
margin-left: 20px;
margin-top: 50px;
}
.nav-panel
{
visibility: hidden;
width: 100%;
z-index: 3;
opacity: 1;
transition: opacity 0.4s ease;
}
.nav-panel.open
{
visibility: visible;
opacity: 1;
}
.nav-panel.closing
{
opacity: 0;
}
.nav-panel .button
{
transform: translateY(-20px);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-panel.open .button
{
transform: translateY(0);
opacity: 1;
}
.content-panel
{
margin: 0;
width: 100% !important;
}
.window-title
{
display: none;
}
.nav-hamburger
{
display: block;
}
body
{
background-image: none;
}
/* #region NAVBAR BUTTON SLIDE-IN */
.nav-panel.open .button:nth-child(1) {transition-delay: 0.05s;}
.nav-panel.open .button:nth-child(2) {transition-delay: 0.10s;}
.nav-panel.open .button:nth-child(3) {transition-delay: 0.15s;}
.nav-panel.open .button:nth-child(4) {transition-delay: 0.20s;}
.nav-panel.open .button:nth-child(5) {transition-delay: 0.25s;}
.nav-panel.open .button:nth-child(6) {transition-delay: 0.30s;}
.nav-panel.open .button:nth-child(8) {transition-delay: 0.35s;}
.nav-panel.open .button:nth-child(9) {transition-delay: 0.40s;}
.nav-panel.open .button:nth-child(10) {transition-delay: 0.45s;}
.nav-panel.open .button:nth-child(11) {transition-delay: 0.50s;}
.nav-panel.open .button:nth-child(12) {transition-delay: 0.55s;}
.nav-panel.open .button:nth-child(13) {transition-delay: 0.60s;}
.nav-panel.open .button:nth-child(14) {transition-delay: 0.65s;}
/* #endregion */
.popup-window
{
top: 0 !important;
left: 0 !important;
width: 100vw !important;
border: none !important;
background: rgba(0, 0, 0, 1) !important;
color: rgba(255, 255, 255, 1) !important;
box-shadow: none !important;
transform: perspective(1000px) rotateY(180deg) scale(0.2) !important;
}
.popup-window.open
{
transform: perspective(1000px) rotateY(0deg) scale(1) !important;
}
.title-bar
{
position: sticky !important;
background: rgba(0, 0, 0, 1) !important;
color: rgba(255, 255, 255, 1) !important;
}
.popup-content
{
height: 100vh !important;
background: rgba(0, 0, 0, 1) !important;
border-top: none !important;
}
.close-button
{
background: rgba(0, 0, 0, 1) !important;
color: rgba(255, 255, 255, 1) !important;
}
.close-button:hover
{
background: rgba(232, 17, 35, 1) !important;
color: rgba(255, 255, 255, 1) !important;
}
.close-button:active
{
background: rgba(241, 112, 122, 1) !important;
color: rgba(0, 0, 0, 1) !important;
transition: none !important;
}
}
/* #endregion */
/* #region FONTS -- */
@font-face
{
font-family: "BIG-Icons";
src: url("/Resources/Fonts/BIG-Icons.woff2") format("woff2"), url("/Resources/Fonts/BIG-Icons.ttf") format("truetype");
}
.custom-icons
{
font-family: "Segoe MDL2 Assets", "BIG-Icons", sans-serif;
}
/* ---------------------------------------------------------------------------------------------------------------------------------------------- */
/* #endregion */
/* #region POPUP WINDOW --------------------------------------------------------- */
.popup-window
{
position: fixed;
top: 100px;
left: 100px;
width: 900px;
border: 1px solid #6d6d6d;
background: rgba(240, 240, 240, 1);
z-index: 9999;
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
color: rgba(0, 0, 0, 1);
opacity: 0;
pointer-events: none;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.popup-window.open
{
opacity: 1;
pointer-events: auto;
}
.popup-window a
{
color: rgba(0, 102, 204, 1);
text-decoration: underline;
}
.popup-window a:hover
{
color: rgba(104, 29, 168, 1);
}
.title-bar
{
height: 32px;
background: rgba(255, 255, 255, 1);
padding: 0 0 0 12px;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
box-sizing: border-box;
overflow: hidden;
}
.title-text
{
font-size: 13px;
line-height: 1;
margin: 0;
}
.close-button
{
width: 50px;
height: 100%;
background: rgba(255, 255, 255, 1);
border: none;
color: rgba(0, 0, 0, 1);
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Segoe MDL2 Assets", sans-serif;
transition: background-color 0.2s ease, color 0.12s ease;
}
.close-button:hover
{
background: rgba(232, 17, 35, 1);
color: rgba(255, 255, 255, 1);
}
.close-button:active
{
background: rgba(241, 112, 122, 1);
color: rgba(255, 255, 255, 1);
transition: none;
}
.popup-content
{
display: inline-block;
padding: 10px;
height: 500px;
overflow-y: auto;
background: rgba(240, 240, 240, 1);
border-top: 1px solid rgba(255, 255, 255, 1);
}
@media (min-width: 1131px)
{
.popup-window
{
transform: scale(0.96);
color: rgba(0, 0, 0, 1) !important;
}
.popup-window.open
{
transform: perspective(1200px) rotateX(0deg) translateY(0) scale(1);
}
.popup-content
{
color: rgba(0, 0, 0, 1) !important;
}
}
/* #endregion */