/******************************************************************************* * * * Fonts * * * ******************************************************************************/ @font-face { font-family: 'Avenir Book'; src: url('../fonts/Avenir-Book.ttf'); } @font-face { font-family: 'Avenir Medium'; src: url('../fonts/Avenir-Medium.ttf'); } @font-face { font-family: 'Ringbearer'; src: url('../fonts/Ringbearer.ttf'); } /******************************************************************************* * * * Element Styles * * * ******************************************************************************/ /* Reset body, html, and div presets. */ body, html, div { margin: 0px; padding: 0px; } /* Reset p presets. */ p { -webkit-margin-before: 0em; -webkit-margin-after: 0em; } /*body { background: url('./../images/backgrounds/0.jpg') no-repeat center center fixed; background-size: cover; }*/ /******************************************************************************* * * * Frame Styles (frame.ejs) * * * ******************************************************************************/ /* Frame Bar */ #frameBar { position: relative; z-index: 100; display: flex; flex-direction: column; background: rgba(1, 2, 1, 0.5); -webkit-user-select: none; } /* Undraggable region on the top of the frame. */ #frameResizableTop { height: 2px; width: 100%; -webkit-app-region: no-drag; } /* Flexbox to wrap the main frame content. */ #frameMain { display: flex; height: 20px } /* Undraggable region on the left and right of the frame. */ .frameResizableVert { width: 2px; -webkit-app-region: no-drag; } /* Main frame content for windows. */ #frameContentWin { display: flex; justify-content: space-between; width: 100%; -webkit-app-region: drag; } /* Main frame content for darwin. */ #frameContentDarwin { display: flex; justify-content: flex-start; align-items: center; width: 100%; -webkit-app-region: drag; } /* Frame logo (windows only). */ #frameImageDock { width: 100px; display: flex; justify-content: center; align-items: center; position: relative; } #frameImage { height: 15px; filter: grayscale(100%); } /* Windows frame button dock. */ #frameButtonDockWin { -webkit-app-region: no-drag !important; position: relative; top: -2px; right: -2px; height: 22px; } #frameButtonDockWin > .frameButton:not(:first-child) { margin-left: -4px; } /* Darwin frame button dock: NaN; */ #frameButtonDockDarwin { -webkit-app-region: no-drag !important; position: relative; top: -1px; right: -1px; } /* Windows Frame Button Styles. */ .frameButton { background: none; border: none; height: 22px; width: 39px; cursor: pointer; } .frameButton:hover, .frameButton:focus { background: rgba(189, 189, 189, 0.43); } .frameButton:active { background: rgba(156, 156, 156, 0.43); } .frameButton:focus { outline: 0px; } /* Close button is red. */ #frameButton_close:hover, #frameButton_close:focus { background: rgba(255, 53, 53, 0.61) !important; } #frameButton_close:active { background: rgba(235, 0, 0, 0.61) !important; } /* Darwin Frame Button Styles. */ .frameButtonDarwin { height: 12px; width: 12px; border-radius: 50%; border: 0px; margin-left: 5px; -webkit-app-region: no-drag !important; cursor: pointer; } .frameButtonDarwin:focus { outline: 0px; } #frameButtonDarwin_close { background-color: #e74c32; } #frameButtonDarwin_close:hover, #frameButtonDarwin_close:focus { background-color: #FF9A8A; } #frameButtonDarwin_close:active { background-color: #ff8d7b; } #frameButtonDarwin_minimize { background-color: #fed045; } #frameButtonDarwin_minimize:hover, #frameButtonDarwin_minimize:focus { background-color: #FFE9A9; } #frameButtonDarwin_minimize:active { background-color: #ffde7b; } #frameButtonDarwin_restoredown { background-color: #96e734; } #frameButtonDarwin_restoredown:hover, #frameButtonDarwin_restoredown:focus { background-color: #D6FFA6; } #frameButtonDarwin_restoredown:active { background-color: #bfff76; } /******************************************************************************* * * * Welcome View (welcome.ejs) * * * ******************************************************************************/ #welcomeContainer { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; transition: 0.25s ease; } #welcomeContent { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50%; top: -10%; position: relative; } /* .cloudDiv { position: absolute; height: 100%; width: 100%; display: flex; flex-direction: column; } .cloudTop { height: 50%; width: 100%; background-image: url('../images/cloudTrans.png'); animation: clouds1 80s linear infinite; background-size: cover; } .cloudBottom { height: 50%; width: 100%; background-image: url('../images/cloudTrans2.png'); animation: clouds2 70s linear infinite; background-size: cover; } @keyframes clouds1 { to { background-position: 200%; } } @keyframes clouds2 { to { background-position: 230%; } } */ #welcomeImageSeal { border-radius: 50%; border: 2px solid #cad7e1; background: rgba(1, 2, 1, 0.5); height: 125px; width: 125px; box-shadow: 0px 0px 10px 0px rgb(0, 0, 0); margin-bottom: 5%; margin-top: 10%; } #welcomeHeader { font-family: 'Avenir Medium'; text-align: center; color: white; margin-bottom: 25px; letter-spacing: 1px; font-size: 20px; text-shadow: white 0px 0px 0px; } #welcomeDescription { font-family: 'Avenir Book'; text-align: justify; color: white; font-size: 13px; font-weight: 100; text-shadow: rgba(255, 255, 255, 0.75) 0px 0px 20px } #welcomeDescCTA { font-family: 'Avenir Book'; text-align: center; color: white; font-size: 14px; font-weight: 100; text-shadow: rgba(255, 255, 255, 0.75) 0px 0px 20px } /* Login button styles. */ #welcomeButton { background: none; color: #fff; font-weight: bold; font-family: 'Avenir Book'; letter-spacing: 2px; border: none; padding: 15px 5px; margin: 10px 0px; cursor: pointer; position: relative; right: -20px; transition: 0.5s ease; margin-top: 5%; margin-bottom: -5%; } #welcomeButton:disabled { color: rgba(255, 255, 255, 0.75); pointer-events: none; } #welcomeButton:hover, #welcomeButton:focus { text-shadow: 0px 0px 20px #fff; outline: none; } #welcomeButton:active { color: #c7c7c7; text-shadow: 0px 0px 20px #c7c7c7; } #welcomeSVG { -webkit-transform: translate3d(0, 0, 0); overflow: visible; transform: rotate(90deg); margin-left: 20px; transition: 0.25s ease; width: 20px; height: 20px; } #welcomeButton:hover #welcomeSVG, #welcomeButton:focus #welcomeSVG { -webkit-filter: drop-shadow(0px 0px 2px #fff); } #welcomeButton:active #welcomeSVG .arrowLine { stroke: #c7c7c7; } #welcomeButton:active #welcomeSVG { -webkit-filter: drop-shadow(0px 0px 2px #c7c7c7); } #welcomeButton:disabled #welcomeSVG .arrowLine { stroke: rgba(255, 255, 255, 0.75); } #welcomeButtonContent { display: flex; align-items: center; } /******************************************************************************* * * * Login View (login.ejs) * * * ******************************************************************************/ /* Login span styles. */ .loginSpan { font-family: 'Avenir Book'; font-size: 14px; color: #fff; font-weight: bold; } /* Styles for dimmer login span. */ .loginSpanDim { font-family: 'Avenir Book'; font-size: 12px; color: #848484; font-weight: bold; } /* Main login container. */ #loginContainer { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; transition: filter 0.25s ease; } /* Login content wrapper. */ #loginContent { display: flex; justify-content: center; align-items: center; height: 100%; padding: 0px 25px; } /* Login form. */ #loginForm { display: flex; flex-direction: column; justify-content: center; align-items: center; } /* Login form anchor styles. */ #loginForm a { font-family: 'Avenir Book'; font-size: 12px; color: #848484; font-weight: bold; text-decoration: none; transition: 0.25s ease; } #loginForm a:hover, #loginForm a:focus { color: #a2a2a2; outline: none; } #loginForm a:active { color: #8b8b8b; } /* Logo on login form. */ #loginImageSeal { border-radius: 50%; border: 2px solid #cad7e1; background: rgba(1, 2, 1, 0.5); height: 125px; width: 125px; box-shadow: 0px 0px 10px 0px rgb(0, 0, 0); margin-bottom: 20px; } /* Header on login view. */ #loginSubheader { font-family: 'Avenir Medium'; margin-bottom: 25px; font-size: 12px; letter-spacing: 1px; } /* Container to organize login field elements. */ .loginFieldContainer { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; } /* SVG icons on the login view. */ .loginSVG { fill: #fff; height: 20px; width: 20px; } /* Span which displays errors related to login field content. */ .loginErrorSpan { font-family: 'Avenir Medium'; font-weight: bold; font-size: 8px; color: #ff1b0c; width: 100%; text-align: right; position: absolute; top: 7px; opacity: 0; transition: 0.25s ease; } .shake { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } /* Login text input styles. */ .loginField { font-family: 'Avenir Book'; background: none; border-width: 1.5px 0px 0px 0px; border-style: solid; width: 250px; margin-bottom: 20px; border-color: #fff; color: rgba(255, 255, 255, 0.75); font-weight: bold; text-align: center; box-sizing: border-box; padding: 7.5px; font-size: 10px; letter-spacing: 1px; } .loginField:focus { outline: none; } .loginField:disabled { color: rgba(255, 255, 255, 0.50); } .loginField::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.75); font-size: 10px; letter-spacing: 1px; text-align: center; font-weight: bold; } .loginField:focus::-webkit-input-placeholder { color: transparent; } /* Add spacing between password field and options bar. */ #labelPassword { margin-bottom: 13px; } /* Container which contains the forgot and remember options. */ #loginOptions { display: flex; justify-content: space-between; width: 100%; } /* Remember option text. */ #loginRememberText { padding-right: 10px; transition: 0.25s ease; } /* Login button styles. */ #loginButton { background: none; color: #fff; font-weight: bold; font-family: 'Avenir Book'; letter-spacing: 2px; border: none; padding: 15px 5px; margin: 10px 0px; cursor: pointer; position: relative; right: -20px; transition: 0.5s ease; } #loginButton:disabled { color: rgba(255, 255, 255, 0.75); pointer-events: none; } #loginButton[loading] { color: #fff; } #loginButton:hover, #loginButton:focus { text-shadow: 0px 0px 20px #fff; outline: none; } #loginButton:active { color: #c7c7c7; text-shadow: 0px 0px 20px #c7c7c7; } #loginSVG { -webkit-transform: translate3d(0, 0, 0); overflow: visible; transform: rotate(90deg); margin-left: 20px; transition: 0.25s ease; width: 20px; height: 20px; } #loginButton:hover #loginSVG, #loginButton:focus #loginSVG { -webkit-filter: drop-shadow(0px 0px 2px #fff); } #loginButton:active #loginSVG .arrowLine { stroke: #c7c7c7; } #loginButton:active #loginSVG { -webkit-filter: drop-shadow(0px 0px 2px #c7c7c7); } #loginButton:disabled #loginSVG .arrowLine { stroke: rgba(255, 255, 255, 0.75); } #loginButtonContent { display: flex; align-items: center; } #loginButton .circle-loader, #loginButton[loading] #loginSVG { display: none; } #loginButton[loading] .circle-loader, #loginButton #loginSVG { display: initial; } .circle-loader { margin-left: 20px; border: 2px solid rgba(255, 255, 255, 0.5); border-left-color: #ffffff; animation-name: loader-spin; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; position: relative; display: inline-block; vertical-align: top; border-radius: 50%; width: 16px; height: 16px; } .load-complete { animation: none; border-color: #ffffff; transition: border 500ms ease-out; } .checkmark { display: none; } .checkmark.draw:after { animation-duration: 800ms; animation-timing-function: ease; animation-name: checkmark; transform: scaleX(-1) rotate(135deg); } .checkmark:after { opacity: 1; height: 8px; width: 4px; transform-origin: left top; border-right: 2px solid #ffffff; border-top: 2px solid #ffffff; content: ''; left: 2px; top: 8px; position: absolute; } @keyframes loader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes checkmark { 0% { height: 0; width: 0; opacity: 1; } 20% { height: 0; width: 4px; opacity: 1; } 40% { height: 8px; width: 4px; opacity: 1; } 100% { height: 8px; width: 4px; opacity: 1; } } /*.spinningCircle { margin-left: 20px; height: 16px; width: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0); border-top-color: #ffffff; border-right-color: #ffffff; border-left-color: rgba(255, 255, 255, 0.50); border-bottom-color: rgba(255, 255, 255, 0.50); animation: single2 4s infinite linear; } @keyframes single2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(720deg); } }*/ /* Disclaimer container. */ #loginDisclaimer { display: flex; flex-direction: column; justify-content: center; align-items: center; } /* Add spacing between register anchor and disclaimer. */ #loginRegisterSpan { margin-bottom: 5px; } /* Disclaimer text styles. */ .loginDisclaimerText { font-family: 'Avenir Book'; font-size: 7px; color: #848484; font-weight: bold; text-align: center; } /* * * * Login View | Custom Checkbox * * */ /* Checkbox container. */ #checkmarkContainer { display: flex; justify-content: flex-end; align-items: center; position: relative; cursor: pointer; font-size: 22px; -webkit-user-select: none; } /* Hide the default checkbox. */ #checkmarkContainer input { opacity: 0; cursor: pointer; position: absolute; } /* Create a custom checkbox. */ .loginCheckmark { position: relative; height: 10px; width: 10px; border: 1px solid #848484; border-radius: 1px; background: none; transition: 0.25s ease; } /* On hover and focus, add a grey border color. */ #checkmarkContainer:hover input ~ *, #checkmarkContainer input:focus ~ * { color: #a2a2a2; border-color: #a2a2a2; } /* On keydown, darken the checkbox a bit. */ #checkmarkContainer input:active ~ *:not(#loginRememberText) { color: #8d8d8d; border-color: #8d8d8d; } #checkmarkContainer[disabled] { pointer-events: none; } /* For checked -> #checkmarkContainer input:checked ~ * */ /* Create the checkmark/indicator (hidden when not checked). */ .loginCheckmark:after { content: ""; display: none; } /* Show the checkmark when checked. */ #checkmarkContainer input:checked ~ .loginCheckmark:after { display: block; } /* Style the checkmark/indicator. */ #checkmarkContainer .loginCheckmark:after { position: absolute; left: 3.5px; top: 0.5px; width: 2px; height: 6px; border: solid #a2a2a2; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* * * * Login View | Loader * * */ /* Will reuse this elsewhere down the line. #loginLoading { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.80); } #loginLoadingContent { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; } #loadSpinnerContainer { position: relative; display: flex; align-items: center; justify-content: center; } #loadCenterImage { position: absolute; width: 200px; height: auto; } #loadSpinnerImage { width: 280px; height: auto; } #loadDescText { color: #f1eada; font-family: 'Avenir Medium'; font-weight: bold; letter-spacing: 1px; font-size: 16px; } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotating { animation: rotating 10s linear infinite; }*/ /* #login_filter { height: calc(100% - 22px); width: 100%; z-index: 9000; position: absolute; filter: blur(8px) contrast(0.9) brightness(1.0); background: url('./../images/backgrounds/0.jpg') no-repeat center center fixed; transform: scale(1.2); background-size: cover; } */ /******************************************************************************* * * * Landing View (Structural Styles) * * * ******************************************************************************/ /* Main content container. */ #landingContainer { height: 100%; position: relative; } /* Upper content container. */ #landingContainer > #upper { position: relative; transition: top 2s ease; top: 0px; height: 77%; display: flex; } #landingContainer > #upper > #left { display: inline-flex; width: 15%; height: 100%; justify-content: flex-end; } #landingContainer > #upper > #content { display: inline-flex; width: 59%; height: 100%; } #landingContainer > #upper > #right { display: inline-flex; width: 26%; height: 100%; } /* Lower content container. */ #landingContainer > #lower { height: 23%; display: flex; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); } #landingContainer > #lower > #left { position: relative; transition: top 2s ease; top: 0px; height: 100%; width: 33%; display: inline-flex; justify-content: center; } #landingContainer > #lower > #left #content { position: relative; top: 25px; display: inline-flex; line-height: 24px; left: 50px; } #landingContainer > #lower > #center { position: relative; transition: top 2s ease; top: 0px; height: 100%; width: 34%; display: inline-flex; justify-content: center; } #landingContainer > #lower > #center #content { position: relative; transition: top 2s ease; top: 10px; } #landingContainer > #lower > #right { position: relative; transition: top 2s ease; top: 0px; height: 100%; width: 33%; display: inline-flex; } /******************************************************************************* * * * Landing View (Top Styles) * * * ******************************************************************************/ /* * * * Landing View (Top Styles) | Left Content * * */ /* Logo image. */ #image_seal { height: 70px; width: auto; position: relative; margin-top: 50px; border: 2px solid white; border-radius: 50%; box-shadow: 0px 0px 10px 0px rgb(0, 0, 0); } /* * * * Landing View (Bottom Styles) | Right Content * * */ /* Wrapper container for top, right content. */ #rightContainer { display: flex; flex-direction: column; position: relative; top: 50px; align-items: flex-end; height: calc(100% - 50px); } /* Right hand user content container. */ #user_content { display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 75px; } /* User profile avatar container. */ #avatarContainer { border-radius: 50%; border: 2px solid #cad7e1; background: rgba(1, 2, 1, 0.5); height: 70px; width: 70px; box-shadow: 0px 0px 10px 0px rgb(0, 0, 0); overflow: hidden; position: relative; } /* Avatar edit overlay. */ #avatarOverlay { opacity: 0; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; font-family: 'Avenir Book'; color: #fff; transition: 0.25s ease; font-weight: bold; letter-spacing: 2px; background: linear-gradient(65deg, rgba(0, 0, 0, 0.4), rgba(136, 77, 77, 0.4) 60%); -webkit-user-select: none; cursor: pointer; } #avatarOverlay:hover { opacity: 1; } /* User profile avater image. */ #avatarImage { height: 100%; width: auto; } /* User profile name text. */ #user_text { font-family: 'Avenir Book'; font-size: 12px; min-width: 112px; font-weight: 900; letter-spacing: 1px; color: white; text-shadow: 0px 0px 20px black; position: relative; right: 25px; text-align: right; } /* Social media icon content container. */ #mediaContent { position: relative; display: flex; flex-direction: column; right: 25px; align-items: flex-end; margin-top: 40px; height: 100%; align-items: center; } /* Social Media Icon division containers. */ #internalMedia, #externalMedia { display: flex; flex-direction: column; } /* Container object which wraps an icon to ensure fluid transitions. */ .mediaContainer { display: flex; justify-content: center; align-items: center; height: 27px; } /* Divider bar between the external and internal icons. */ .mediaDivider { height: 1px; width: 14px; background: rgb(255, 255, 255); margin: 10px 0px; } /* Social media icon shared styles. */ .mediaSVG { fill: #ffffff; height: 12px; transition: 0.25s ease; cursor: pointer; height: 12px; width: 25px; } .mediaSVG:hover, .mediaSVG:active { height: 20px; } /* News icon colors. */ #newsSVG { stroke: #ffffff; } /* Twitter icon colors. */ #twitterSVG:hover { fill: #1da1f2; } #twitterSVG:active { fill: #1b8dd4; } /* Instagram icon colors. */ #instagramSVG:hover { fill: url('#instaFill') /*fill: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); */ } #instagramSVG:active { fill: url('#instaFill') } /* Youtube icon colors. */ #youtubeSVG:hover { fill: #f00; } #youtubeSVG:active { fill: #ea0202; } /* Discord icon colors. */ #discordSVG:hover { fill: #7288d9; } #discordSVG:active { fill: #657ac4; } /******************************************************************************* * * * Landing View (Bottom Styles) * * * ******************************************************************************/ /* Style for a general label on the bottom of the landing view. */ .bot_label { color: white; font-family: 'Avenir Book'; font-size: 9px; letter-spacing: 1px; font-weight: bold; text-shadow: 0px 0px 0px #bebcbb; } /* Divider used on the bottom of the landing view. */ .bot_divider { height: 25px; width: 2px; background: rgba(107, 105, 105, 0.7); margin-left: 20px; margin-right: 20px; } /* * * * Landing View (Bottom Styles) | Left Content * * */ /* Span which displays the player count of the selected server. */ #player_count { color: #949494; font-family: 'Avenir Book'; font-size: 8px; font-weight: 900; text-shadow: 0px 0px 20px #949494; margin-left: 10px; } /* Icon which displays the status of the mojang services. */ #mojang_status_icon { font-size: 30px; color: #848484; margin-left: 15px; } /* * * * Landing View (Bottom Styles) | Center Content * * */ /* Button which opens the menu view. */ #menu_button { font-family: 'Avenir Book'; background: none; border: none; cursor: pointer; } /* Arrow image which floats above the menu button. */ #menu_img { height: 11px; margin-left: -2px; } /* Span which contains the menu button text. */ #menu_text { color: white; font-weight: 900; letter-spacing: 2px; text-shadow: 0px 0px 0px #bebcbb; font-size: 11px; line-height: 30px; display: flex; } /* * * * Landing View (Bottom Styles) | Right Content * * */ /* Main launch content container. */ #landingContainer > #lower > #right #launch_content { position: relative; top: 25px; display: inline-flex; } /* The launch button. */ #launch_button { font-family: 'Avenir Book'; background: none; border: none; cursor: pointer; color: #fff; font-weight: 900; letter-spacing: 2px; text-shadow: 0px 0px 0px #bebcbb; font-size: 20px; padding: 0px; } /* Launch details main container, hidden until launch processing begins. */ #launch_details { position: relative; top: 25px; display: none; } /* Left side of launch details container, displays percentage and a divider. */ #launch_details_left { display: flex; } /* Span which displays percentage complete. */ #launch_progress_label { color: white; font-family: 'Avenir Book'; font-weight: 900; letter-spacing: 1px; text-shadow: 0px 0px 0px #bebcbb; font-size: 20px; min-width: 53.21px; max-width: 53.21px; text-align: right; } /* Right side of launch details container, displays progress bar and details. */ #launch_details_right { display: flex; flex-direction: column; justify-content: center; } /* Button which opens the server selection view. */ #server_selection_button { background: none; border: none; outline: none; cursor: pointer; line-height: 24px; padding: 0px; transition: 0.25s ease; } #server_selection_button:hover, #server_selection_button:focus { text-shadow: 0px 0px 20px #fff, 0px 0px 20px #fff, 0px 0px 20px #fff; } #server_selection_button:active { color: #c7c7c7; text-shadow: 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7; } /* Progress bar styles. */ #launch_progress[value] { height: 3px; width: 265px; -webkit-appearance: none; } #launch_progress[value]::-webkit-progress-bar { background-color: transparent; } #launch_progress[value]::-webkit-progress-value { background-color: #fff; } /* Span which displays information about the status of the launch process. */ #launch_details_text { font-size: 11px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /******************************************************************************* * * * Overlay View (overlay.ejs) * * * ******************************************************************************/ /* * * * Overlay View (Main Content) * * */ /* Overlay container, placed over the main div. */ #overlayContainer { position: absolute; top: 22px; display: flex; align-items: center; justify-content: center; width: 100%; height: calc(100% - 22px); background: rgba(0, 0, 0, 0.50); } /* Main overlay content. */ #overlayContent { position: relative; display: flex; flex-direction: column; align-items: center; /*justify-content: space-between;*/ width: 300px; /*height: 35%;*/ box-sizing: border-box; padding: 15px 0px; /* background-color: #424242; */ text-align: center; } /* Main overlay content anchor styles. */ #overlayContent a, #overlayDismiss { color: rgba(202, 202, 202, 0.75); transition: 0.25s ease; } #overlayContent a:hover, #overlayDismiss { color: rgba(255, 255, 255, 0.75); } #overlayContent a:active, #overlayDismiss { color: rgba(165, 165, 165, 0.75); } /* Add spacing between overlay content elements. */ #overlayContent > *:first-child { margin-top: 0px !important; } #overlayContent > *:last-child { margin-bottom: 0px !important; } #overlayContent > * { margin: 8px 0px; } /* Overlay title styles. */ #overlayTitle { font-family: 'Avenir Medium'; font-size: 20px; color: #fff; font-weight: bold; letter-spacing: 1px; } /* Overlay description styles. */ #overlayDesc { font-family: 'Avenir Book'; font-size: 12px; color: #fff; font-weight: bold; } /* Div which contains action buttons. */ #overlayActionContainer { display: flex; flex-direction: column; justify-content: center; } /* Overlay acknowledge button styles. */ #overlayAcknowledge { background: none; border: 1px solid #ffffff; color: white; font-family: 'Avenir Medium'; font-weight: bold; border-radius: 2px; padding: 0px 8.1px; cursor: pointer; transition: 0.25s ease; } #overlayAcknowledge:hover, #overlayAcknowledge:focus { box-shadow: 0px 0px 10px 0px #fff; outline: none; } #overlayAcknowledge:active { border-color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75); } /* Overlay dismiss option styles. */ #overlayDismiss { font-family: 'Avenir Book'; font-weight: bold; font-size: 10px; text-decoration: none; padding-top: 2.5px; background: none; border: none; outline: none; cursor: pointer; } #overlayDismiss:hover { color: rgba(255, 255, 255, 0.75); } #overlayDismiss:active { color: rgba(165, 165, 165, 0.75); } /* * * * Overlay View (Server Selection Content) * * */ /* Server selection content container. */ #serverSelectContent { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 75%; } /* Server selection header. */ #serverSelectHeader { font-family: 'Avenir Medium'; font-size: 20px; font-weight: bold; color: #fff; margin-bottom: 25px; } /* Wrapper div for the list of available servers. */ #serverSelectList { display: flex; flex-direction: column; align-items: center; justify-content: center; max-height: 65%; min-height: 40%; } /* Scrollable div which lists the available servers. */ #serverSelectListScrollable { padding: 0px 5px; overflow-y: scroll; } #serverSelectListScrollable::-webkit-scrollbar { width: 2px; } #serverSelectListScrollable::-webkit-scrollbar-track { display: none; } #serverSelectListScrollable::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50); } /* Content container for a server listing. */ .serverListing { border: none; padding: 0px; width: 375px; min-height: 60px; display: flex; justify-content: flex-start; align-items: center; opacity: 0.6; transition: 0.25s ease; cursor: pointer; position: relative; background: rgba(131, 131, 131, 0.25); } .serverListing[selected] { cursor: default; opacity: 1.0; } .serverListing:hover, .serverListing:focus { outline: none; opacity: 1.0; } /* Add spacing between server listings. */ #serverSelectListScrollable > .serverListing:not(:first-child):not(:last-child) { margin: 5px 0px; } #serverSelectListScrollable > .serverListing:first-child { margin-bottom: 5px; } #serverSelectListScrollable > .serverListing:last-child { margin-top: 5px; } /* Server listing image. */ .serverListingImg { margin: 0px 10px 0px 5px; border: 1px solid #fff; height: 50px; width: auto; } /* Content container for the server listing's details. */ .serverListingDetails { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; height: 50px; } /* The name of the server listing. */ .serverListingName { font-family: 'Avenir Book'; font-size: 14px; font-weight: bold; color: #fff; } /* Description for the server listing. */ .serverListingDescription { font-family: 'Avenir Book'; font-size: 10px; line-height: 10px; font-weight: bold; color: #fff; } /* Content container for the server listing's information. */ .serverListingInfo { width: 100%; display: flex; justify-content: flex-start; } /* The minecraft version of the server listing. */ .serverListingVersion { font-size: 10px; color: #fff; font-family: 'Avenir Book'; text-align: center; display: flex; justify-content: center; align-items: center; line-height: 12px; height: 12px; border-radius: 2px; background: rgba(31, 140, 11, 0.8); padding: 0px 2px; } /* The revision version of the server's manifest. */ .serverListingRevision { font-family: 'Avenir Book'; color: #969696; font-size: 10px; line-height: 12px; padding: 0px 5px; } /* Star which indicates the default (main) server. */ .serverListingStarWrapper { display: flex; align-items: center; cursor: pointer; height: 12px; position: relative; } /* Tooltip which displays when hovering over the star. */ .serverListingStarTooltip { visibility: hidden; opacity: 0; width: 65px; background-color: rgba(0, 0, 0, 0.40); color: #fff; text-align: center; border-radius: 4px; position: absolute; z-index: 1; left: 130%; font-family: 'Avenir Book'; font-size: 10px; transition: visibility 0s linear 0.25s, opacity 0.25s ease; } .serverListingStarTooltip::after { content: " "; position: absolute; top: 50%; right: 100%; /* To the left of the tooltip */ margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent rgba(0, 0, 0, 0.40) transparent transparent; } #serverListingStarWrapper:hover .serverListingStarTooltip { visibility: visible; opacity: 1; transition-delay:0s; } /* Content container which contains the server select actions. */ #serverSelectActions { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 25px; } /* Server selection confirm button styles. */ #serverSelectConfirm { background: none; border: 1px solid #ffffff; color: white; font-family: 'Avenir Medium'; font-weight: bold; border-radius: 2px; padding: 0px 8.1px; cursor: pointer; transition: 0.25s ease; min-height: 20.67px; } #serverSelectConfirm:hover, #serverSelectConfirm:focus { box-shadow: 0px 0px 10px 0px #fff; outline: none; } #serverSelectConfirm:active { border-color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75); } /* Server selection cancel button styles. */ #serverSelectCancel { font-family: 'Avenir Book'; font-weight: bold; font-size: 10px; text-decoration: none; padding-top: 2.5px; color: rgba(202, 202, 202, 0.75); transition: 0.25s ease; background: none; border: none; outline: none; cursor: pointer; } #serverSelectCancel:hover { color: rgba(255, 255, 255, 0.75); } #serverSelectCancel:active { color: rgba(165, 165, 165, 0.75); }