/*/=={ Written by TersisWilvin (TersisWilvin#0087 | 9T2K#0016) for the New Admin Panel Pages }==/*/ /*/=={ Includes => Default theme > Light theme > Dark theme }==/*/ .EnableNewPanel ::selection { background: rgba(0, 0, 0, 0.25); color: #fff; } :focus-visible { outline: 0; } .EnableNewPanel .AdminPanel { display: none; } a, a:hover, a:focus, a:link, a:visited { color: inherit; font-weight: 300; text-decoration: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.2em; } h1 { font-size: 32px; font-weight: 900; } h2 { font-size: 28px; font-weight: 900; } h3 { font-size: 24px; font-weight: 600; } h4 { font-size: 20px; font-weight: 600; } h5 { font-size: 16px; font-weight: 300; } h6 { font-size: 12px; font-weight: 300; } body.EnableNewPanel { background: #c3c5c9; color: #3d3c3b; font-family: Arial,Helvetica,sans-serif; font-size: 16px; font-weight: 300; height: 100%; width: 100%; margin: 0; } .NewAdminPanel { height: 100%; width: 100%; position: absolute; } .Admin-Navigation { width: 100%; height: 100px; position: fixed; left: 0; right: 0; top: 0; } .AdminContainer { height: auto; width: 100%; } .AdminContainer { margin: 130px auto 0 auto; top: 0; position: absolute; } body.Segoe-Font { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 16px; font-weight: 400; } .Admin-Navigation .Header { background: #a0a0a0; color: #fff; width: 100%; height: 75px; position: relative; z-index: 10000; } .Admin-Navigation .Header .PanelLogo { display: block; margin: auto; padding: 6px; width: 200px; height: 35px; opacity: .8; background-image: url(/img/MORBLOXlogo.png); background-size: 190px 33px; background-repeat: no-repeat; background-position: center; image-rendering: auto; -webkit-transition: opacity .125s ease-in-out, background-size .125s ease-in-out; -moz-transition: opacity .125s ease-in-out, background-size .125s ease-in-out; -ms-transition: opacity .125s ease-in-out, background-size .125s ease-in-out; -o-transition: opacity .125s ease-in-out, background-size .125s ease-in-out; transition: opacity .125s ease-in-out, background-size .125s ease-in-out; } .Admin-Navigation .Header .PanelLogo:hover { background-size: 200px 35px; opacity: 1; } .Admin-Navigation .Header .PanelLogo:active { background-size: 185px 32px; opacity: .7; } .Admin-Navigation .Header .SubSlogan { text-shadow: 2px 2px 2px #5b5457; color: #3d3c3b; letter-spacing: .2rem; padding: 5px 0; margin: auto; display: block; width: 100%; text-align: center; width: fit-content; } .Admin-Navigation .Header .usernamecontainer { top: 10px; right: 10px; display: inline-block; position: absolute; } .Y23R .Admin-Navigation .Header .usernamecontainer { left: 10px; right: auto; } .usernamecontainer .usernamelink { color: #3d3c3b; -webkit-transition: color .125s ease-in-out, box-shadow .125s ease-in-out; -moz-transition: color .125s ease-in-out, box-shadow .125s ease-in-out; -ms-transition: color .125s ease-in-out, box-shadow .125s ease-in-out; -o-transition: color .125s ease-in-out, box-shadow .125s ease-in-out; transition: color .125s ease-in-out, box-shadow .125s ease-in-out; } .usernamecontainer .usernamelink:hover { color: #efebec; box-shadow: 0 2px 0 0 #efebec; } .Admin-Navigation .SubHeader { background: #a0a0a0; width: 100%; height: 25px; position: absolute; list-style-type: none; margin: 0; padding: 0; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; box-shadow: 0px 0px 10px 5px #606060; box-shadow: 0px 0px 10px 5px rgba(0 0 0 / 50%); z-index: 9999; } .Admin-Navigation .SubHeader::after { content: ''; background-image: url(/img/ABX-Header.png); opacity: .5; width: 100%; height: 25px; display: block; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } .Admin-Navigation .sub-menu { display: block; position: relative; width: 33.33%; height: 100%; text-align: center; float: left; z-index: 1; } .Admin-Navigation .menu { font-size: 14px; line-height: 1.7rem; -webkit-transition: color .125s ease-in-out, box-shadow .125s ease-in-out, padding .125s ease-in-out; -moz-transition: color .125s ease-in-out, box-shadow .125s ease-in-out, padding .125s ease-in-out; -ms-transition: color .125s ease-in-out, box-shadow .125s ease-in-out, padding .125s ease-in-out; -o-transition: color .125s ease-in-out, box-shadow .125s ease-in-out, padding .125s ease-in-out; transition: color .125s ease-in-out, box-shadow .125s ease-in-out, padding .125s ease-in-out; } .Admin-Navigation .menu[active] { padding: 0 0 2px 0; box-shadow: 0 2px 0 0 #0f7eda; } .Admin-Navigation .menu:hover { color: #efebec; padding: 0 0 2px 0; box-shadow: 0 2px 0 0 #efebec; } .Btn-Demo { width: 32.7%; width: max-content; margin: auto; } .Btn-Demo button { margin-right: 5px; } .AdminContainer .Btn-Demo .H-24sB { margin: 0 0 5px; } .AdminContainer .H-12sB, .AdminContainer .H-16sB, .AdminContainer .H-20sB, .AdminContainer .H-24sB, .AdminContainer .H-28sB, .AdminContainer .H-32sB { display: block; width: 100%; text-align: center; } body.Y23R .AdminContainer .SH-8B07, body:not(.Y23R) .S-Ia06 .SSH-kR0q, body:not(.Y23R) .AdminContainer .UH-vXb0, .no-Header .Admin-Navigation .Header, .no-Nav .Admin-Navigation { display: none; } body:not(.Y23R) .AdminContainer .SH-8B07, body.Y23R .AdminContainer .UH-vXb0 { margin: 15px 0; } .no-Nav .AdminContainer { margin: 0 auto; } .no-Header .AdminContainer { margin: 55px auto 0 auto; } .no-Header .Admin-Navigation { height: 25px; } .hidden { display: none !important; visibility: hidden !important; } /*/=={ Status }==/*/ .AdminContainer .S-Ia06 { width: 720px; height: 100%; background: #929497; background: rgba(0, 0, 0, 0.25); border: 1px dashed #e4780d; margin: auto; padding: 15px; } .AdminContainer .SSH-kR0q { padding-bottom: 15px; } .S-5mjl { width: 100%; height: 100%; display: inline-block; } .S-aS25 { width: 25%; height: auto; text-align: center; float: left; } .S-aS50 { width: 50%; height: auto; text-align: center; float: left; } .S-5mjl:nth-child(3)::before { content: ''; background: #3d3c3b; background: linear-gradient(90deg, #3d3c3b00 0, #3d3c3b 50%, #3d3c3b00 100%); display: block; margin: 10px auto; width: 75%; height: 2px; } .S-H1sm { color: #4f4e4d; font-weight: 600; margin-bottom: 5px; } @media (max-width: 752px) { .AdminContainer .S-Ia06 { width: unset; } } /*/=={ Buttons }==/*/ /*/ Blue /*/ .sm-btn-blue { background: #0f7eda; border: 1px solid #0f7eda; border-radius: 4px; font-size: 16px; padding: 4px; color: #fff; } .sm-btn-blue:hover, .sm-btn-blue:focus { background: #118ff7; border-color: #118ff7; color: #fff; cursor: pointer; } .sm-btn-blue:active { background: #118ff7; color: #fff; } .md-btn-blue { background: #0f7eda; border: 1px solid #0f7eda; border-radius: 4px; font-size: 16px; padding: 7px; color: #fff; } .md-btn-blue:hover, .md-btn-blue:focus { background: #118ff7; border-color: #118ff7; color: #fff; cursor: pointer; } .md-btn-blue:active { background: #118ff7; color: #fff; } .lg-btn-blue { background: #0f7eda; border: 1px solid #0f7eda; border-radius: 6px; font-size: 22px; padding: 14px; color: #fff; } .lg-btn-blue:hover, .lg-btn-blue:focus { background: #118ff7; border-color: #118ff7; color: #fff; cursor: pointer; } .lg-btn-blue:active { background: #118ff7; color: #fff; } .sm-btn-blue[disabled], .sm-btn-blue[disabled]:hover, .sm-btn-blue[disabled]:focus, .sm-btn-blue[disabled]:active { background: #0a5898; border-color: #0a5898; box-shadow: none; color: #fff; opacity: .5; cursor: not-allowed; } .md-btn-blue[disabled], .md-btn-blue[disabled]:hover, .md-btn-blue[disabled]:focus, .md-btn-blue[disabled]:active { background: #0a5898; border-color: #0a5898; box-shadow: none; color: #fff; opacity: .5; cursor: not-allowed; } .lg-btn-blue[disabled], .lg-btn-blue[disabled]:hover, .lg-btn-blue[disabled]:focus, .lg-btn-blue[disabled]:active { background: #0a5898; border-color: #0a5898; box-shadow: none; color: #fff; opacity: .5; cursor: not-allowed; } /*/ Green /*/ .sm-btn-green { background: #0caf63; border: 1px solid #0caf63; border-radius: 4px; font-size: 16px; padding: 4px; color: #fff; } .sm-btn-green:hover, .sm-btn-green:focus { background: #0fda7b; border-color: #0fda7b; color: #fff; cursor: pointer; } .sm-btn-green:active { background: #0fda7b; color: #fff; } .md-btn-green { background: #0caf63; border: 1px solid #0caf63; border-radius: 4px; font-size: 16px; padding: 7px; color: #fff; } .md-btn-green:hover, .md-btn-green:focus { background: #0fda7b; border-color: #0fda7b; color: #fff; cursor: pointer; } .md-btn-green:active { background: #0fda7b; color: #fff; } .lg-btn-green { background: #0caf63; border: 1px solid #0caf63; border-radius: 6px; font-size: 22px; padding: 14px; color: #fff; } .lg-btn-green:hover, .lg-btn-green:focus { background: #0fda7b; border-color: #0fda7b; color: #fff; cursor: pointer; } .lg-btn-green:active { background: #0fda7b; color: #fff; } .sm-btn-green[disabled], .sm-btn-green[disabled]:hover, .sm-btn-green[disabled]:focus, .sm-btn-green[disabled]:active { background: #0a9840; border-color: #0a9840; box-shadow: none; color: #fff; opacity: .5; cursor: not-allowed; } .md-btn-green[disabled], .md-btn-green[disabled]:hover, .md-btn-green[disabled]:focus, .md-btn-green[disabled]:active { background: #0a9840; border-color: #0a9840; box-shadow: none; color: #fff; opacity: .5; cursor: not-allowed; } .lg-btn-green[disabled], .lg-btn-green[disabled]:hover, .lg-btn-green[disabled]:focus, .lg-btn-green[disabled]:active { background: #0a9840; border-color: #0a9840; box-shadow: none; color: #fff; opacity: .5; cursor: not-allowed; } /*/ Red /*/ .sm-btn-red { background: #af320c; border: 1px solid #af320c; border-radius: 4px; font-size: 16px; padding: 4px; color: #fff; } .sm-btn-red:hover, .sm-btn-red:focus { background: #da380f; border-color: #da380f; color: #fff; cursor: pointer; } .sm-btn-red:active { background: #da380f; color: #fff; } .md-btn-red { background: #af320c; border: 1px solid #af320c; border-radius: 4px; font-size: 16px; padding: 7px; color: #fff; } .md-btn-red:hover, .md-btn-red:focus { background: #da380f; border-color: #da380f; color: #fff; cursor: pointer; } .md-btn-red:active { background: #da380f; color: #fff; } .lg-btn-red { background: #af320c; border: 1px solid #af320c; border-radius: 6px; font-size: 22px; padding: 14px; color: #fff; } .lg-btn-red:hover, .lg-btn-red:focus { background: #da380f; border-color: #da380f; color: #fff; cursor: pointer; } .lg-btn-red:active { background: #da380f; color: #fff; } .sm-btn-red[disabled], .sm-btn-red[disabled]:hover, .sm-btn-red[disabled]:focus, .sm-btn-red[disabled]:active { background: #98320a; border-color: #98320a; box-shadow: none; color: #fff; opacity: .5; cursor: not-allowed; } .md-btn-red[disabled], .md-btn-red[disabled]:hover, .md-btn-red[disabled]:focus, .md-btn-red[disabled]:active { background: #98320a; border-color: #98320a; box-shadow: none; color: #fff; opacity: .5; cursor: not-allowed; } .lg-btn-red[disabled], .lg-btn-red[disabled]:hover, .lg-btn-red[disabled]:focus, .lg-btn-red[disabled]:active { background: #98320a; border-color: #98320a; box-shadow: none; color: #fff; opacity: .5; cursor: not-allowed; }