/*/=={ 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; } 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: 16px Arial,Helvetica,sans-serif; 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; -webkit-transition: top .125s ease-in-out, right .125s ease-in-out, left .125s ease-in-out; -moz-transition: top .125s ease-in-out, right .125s ease-in-out, left .125s ease-in-out; -ms-transition: top .125s ease-in-out, right .125s ease-in-out, left .125s ease-in-out; -o-transition: top .125s ease-in-out, right .125s ease-in-out, left .125s ease-in-out; transition: top .125s ease-in-out, right .125s ease-in-out, left .125s ease-in-out; } .Admin-Navigation .Header .usernamecontainer:active { top: 11px; right: 8px; } .APURO2 .Admin-Navigation .Header .usernamecontainer { left: 10px; right: auto; } .APURO2 .Admin-Navigation .Header .usernamecontainer:active { Left: 12px; } .usernamecontainer .stext { color: #3d3c3b; text-shadow: 2px 1px 1px #767A73; -webkit-transition: text-shadow .125s ease-in-out; -moz-transition: text-shadow .125s ease-in-out; -ms-transition: text-shadow .125s ease-in-out; -o-transition: text-shadow .125s ease-in-out; transition: text-shadow .125s ease-in-out; display: none; } .usernamecontainer .clickabletext { -webkit-transition: color .125s ease-in-out, box-shadow .125s ease-in-out, text-shadow .125s ease-in-out; -moz-transition: color .125s ease-in-out, box-shadow .125s ease-in-out, text-shadow .125s ease-in-out; -ms-transition: color .125s ease-in-out, box-shadow .125s ease-in-out, text-shadow .125s ease-in-out; -o-transition: color .125s ease-in-out, box-shadow .125s ease-in-out, text-shadow .125s ease-in-out; transition: color .125s ease-in-out, box-shadow .125s ease-in-out, text-shadow .125s ease-in-out; display: unset; } .APURO2 .usernamecontainer .stext { display: unset; } .usernamecontainer .clickabletext:hover { color: #efebec; box-shadow: 0 2px 0 0 #efebec; } .usernamecontainer .clickabletext:active, .usernamecontainer:active .stext { text-shadow: 0 0 0 #b7b9ba; box-shadow: 0 0 0 0 transparent; } .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/ABXAdmin-SubHeader.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; } .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; } [noselect] { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /*/=={ Status }==/*/ /*/=={ 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; }