521 lines
12 KiB
CSS
521 lines
12 KiB
CSS
/*/=={ 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;
|
|
} |