1
1
mirror of https://github.com/pterodactyl/panel.git synced 2024-11-26 02:52:30 +01:00
Pterodactyl-Panel/public/themes/pterodactyl/css/pterodactyl.css
Charles Morgan 46285fefd7
CSS Changes
More CSS Changes....

Server overview page now looks more..... fluid
Boxes have their correct color top colors back, When admin side was changed to dark theme all by the yellow was changed to a single color, this is reverted.
Node overview page uses blue over gray box for total servers.
Lightened the text color on the side bar
Removed delete button for allocations that are assigned.
Changes Node configuration box to not hurt eyes
2020-05-10 18:09:01 -04:00

836 lines
16 KiB
CSS

/**
* Pterodactyl - Panel
* Copyright (c) 2015 - 2017 Dane Everitt <dane@daneeveritt.com>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
@import 'checkbox.css';
.login-page {
background: #10529f;
}
#login-position-elements {
margin: 25% auto;
}
.login-logo {
color: #fff;
font-weight: 400;
}
.login-copyright {
color: rgba(255, 255, 255, 0.3);
}
.login-copyright > a {
color: rgba(255, 255, 255, 0.6);
}
.particles-js-canvas-el {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: -1;
}
.pterodactyl-login-box {
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
padding: 20px;
}
.pterodactyl-login-input > input {
background: rgba(0, 0, 0, 0.4);
border: 1px solid #000;
border-radius: 2px;
color: #fff;
}
.pterodactyl-login-input > .form-control-feedback {
color: #fff;
}
.pterodactyl-login-button--main {
background: rgba(0, 0, 0, 0.4);
border: 1px solid #000;
border-radius: 2px;
color: #fff;
}
.pterodactyl-login-button--main:hover {
background: rgba(0, 0, 0, 0.7);
border: 1px solid #000;
border-radius: 2px;
color: #fff;
}
.pterodactyl-login-button--left {
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 2px;
color: #fff;
}
.pterodactyl-login-button--left:hover {
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 2px;
color: #fff;
}
.weight-100 {
font-weight: 100;
}
.weight-300 {
font-weight: 300;
}
.btn-clear {
background: transparent;
}
.user-panel > .info {
position: relative;
left: 0;
}
code {
background-color: #eef1f6;
color: #596981;
border-radius: 2px;
padding-left: 4px;
padding-right: 4px;
line-height: 1.4;
font-size: 85%;
border: 1px solid rgba(0, 0, 0, .1);
display: inline-block;
}
p {
line-height: 1.6 !important;
}
p.small {
margin-top: 3px !important;
}
.control-sidebar-dark .control-sidebar-menu > li > a.active {
background: #1e282c;
}
.callout-nomargin {
margin: 0;
}
.table {
font-size: 14px !important;
}
.table .min-size {
width:1px;
white-space: nowrap;
}
@media (max-width:767px) {
.box-header > .box-tools {
position: relative !important;
padding: 0px 10px 10px;
}
}
.middle, .align-middle {
vertical-align: middle !important;
}
#fileOptionMenu.dropdown-menu > li > a {
padding:3px 6px;
}
.hasFileHover {
border: 2px dashed #0087F7;
border-top: 0 !important;
border-radius: 5px;
margin: 0;
opacity: 0.5;
}
.hasFileHover * {
pointer-events: none !important;
}
td.has-progress {
padding: 0px !important;
border-top: 0px !important;
}
.progress.progress-table-bottom {
margin: 0 !important;
height:5px !important;
padding:0;
border:0;
}
.muted {
filter: alpha(opacity=20);
opacity: 0.2;
}
.muted-hover:hover {
filter: alpha(opacity=100);
opacity: 1;
}
.use-pointer {
cursor: pointer !important;
}
.input-loader {
display: none;
position:relative;
top: -25px;
float: right;
right: 5px;
color: #cccccc;
height: 0;
}
.box-header > .form-group {
margin-bottom: 0;
}
.box-header > .form-group > div > p.small {
margin: 0;
}
.no-margin {
margin: 0 !important;
}
li.select2-results__option--highlighted[aria-selected="false"] > .user-block > .username > a {
color: #fff;
}
li.select2-results__option--highlighted[aria-selected="false"] > .user-block > .description {
color: #eee;
}
.select2-selection.select2-selection--multiple {
min-height: 36px !important;
}
.select2-search--inline .select2-search__field:focus {
outline: none;
border: 0 !important;
}
.img-bordered-xs {
border: 1px solid #d2d6de;
padding: 1px;
}
span[aria-labelledby="select2-pUserId-container"] {
padding-left: 2px !important;
}
.box {
box-shadow: 0 0 0 1px rgba(89, 105, 128, .1), 0 1px 3px 0 rgba(89, 105, 128, .1), 0 1px 2px 0 rgba(0, 0, 0, .05) !important;
}
.alert-danger {
color: #ffffff !important;
background: #d64242 !important;
border: 1px solid #841d1d;
}
.alert-info {
color: #ffffff !important;
background: #408fec !important;
border: 1px solid #1055a5;
}
.alert-success {
color: #ffffff !important;
background: #51b060 !important;
border: 1px solid #2b5f33;
}
.alert-warning {
color: #ffffff !important;
background: #fa9636 !important;
border: 1px solid #b45b05;
}
.callout-slim a {
color: #555 !important;
}
.bg-purple {
background-color: #79589f !important;
}
.label-default {
background-color: #eef1f6 !important;
}
.callout.callout-info.callout-slim {
border: 1px solid #1055a5 !important;
border-left: 5px solid #1055a5 !important;
border-right: 5px solid #1055a5 !important;
color: #777 !important;
background: transparent !important;
}
.callout.callout-danger.callout-slim {
border: 1px solid #c23321 !important;
border-left: 5px solid #c23321 !important;
border-right: 5px solid #c23321 !important;
color: #777 !important;
background: transparent !important;
}
.callout.callout-warning.callout-slim {
border: 1px solid #c87f0a !important;
border-left: 5px solid #c87f0a !important;
border-right: 5px solid #c87f0a !important;
color: #777 !important;
background: transparent !important;
}
.callout.callout-success.callout-slim {
border: 1px solid #00733e !important;
border-left: 5px solid #00733e !important;
border-right: 5px solid #00733e !important;
color: #777 !important;
background: transparent !important;
}
.callout.callout-default.callout-slim {
border: 1px solid #eee !important;
border-left: 5px solid #eee !important;
border-right: 5px solid #eee !important;
color: #777 !important;
background: transparent !important;
}
.callout code {
background-color: #515f6cbb;
color: #c3c3c3;
border: 1px solid rgba(0, 0, 0, .25);
}
.tab-pane .box-footer {
margin: 0 -10px -10px;
}
.select2-container{ width: 100% !important; }
.nav-tabs-custom > .nav-tabs > li:hover {
border-top-color:#3c8dbc;
}
.nav-tabs-custom > .nav-tabs > li.active.tab-danger, .nav-tabs-custom > .nav-tabs > li.tab-danger:hover {
border-top-color: #c23321;
}
.nav-tabs-custom > .nav-tabs > li.active.tab-success, .nav-tabs-custom > .nav-tabs > li.tab-success:hover {
border-top-color: #00733e;
}
.nav-tabs-custom > .nav-tabs > li.active.tab-info, .nav-tabs-custom > .nav-tabs > li.tab-info:hover {
border-top-color: #0097bc;
}
.nav-tabs-custom > .nav-tabs > li.active.tab-warning, .nav-tabs-custom > .nav-tabs > li.tab-warning:hover {
border-top-color: #c87f0a;
}
.nav-tabs-custom.nav-tabs-floating > .nav-tabs {
border-bottom: 0px !important;
}
.nav-tabs-custom.nav-tabs-floating > .nav-tabs > li {
margin-bottom: 0px !important;
}
.nav-tabs-custom.nav-tabs-floating > .nav-tabs > li:first-child.active,
.nav-tabs-custom.nav-tabs-floating > .nav-tabs > li:first-child:hover {
border-radius: 3px 0 0 0;
}
.nav-tabs-custom.nav-tabs-floating > .nav-tabs > li:first-child.active > a {
border-radius: 0 0 0 3px;
}
.position-relative {
position: relative;
}
.no-pad-bottom {
padding-bottom: 0 !important;
}
.no-margin-bottom {
margin-bottom: 0 !important;
}
.btn-icon > i.fa {
line-height: 1.5;
}
.btn.active, .btn.active.focus {
background-color: #408fec;
}
.strong {
font-weight: bold !important;
}
.server-description > td {
padding-top: 0 !important;
border-top: 0 !important;
}
tr:hover + tr.server-description {
background-color: #f5f5f5 !important;
}
.login-corner-info {
position: absolute;
bottom: 5px;
right: 10px;
color: white;
}
input.form-autocomplete-stop[readonly] {
background: inherit;
cursor: text;
}
/* fix Google Recaptcha badge */
.grecaptcha-badge {
bottom: 54px !important;
background: white;
box-shadow: none !important;
}
.dropdown-massactions {
min-width: 80px;
}
.select-all-files {
position: relative;
bottom: 1px;
margin-right: 7px !important;
}
.select-file {
position: relative;
bottom: 1px;
margin-right: 2px !important;
}
.select-folder {
position: relative;
bottom: 1px;
margin-right: 5px !important;
}
label.control-label > span {
font-size: 80%;
font-weight: 400;
font-style: italic;
color: #dd4b39;
}
label.control-label > span.field-required:before {
content: "required";
color: #dd4b39;
}
label.control-label > span.field-optional:before {
content: "optional";
color: #bbbbbb;
}
.pagination > li > a, .pagination > li > span {
padding: 3px 10px !important;
}
.logo-mini > img {
height: 42px;
width: auto;
}
.search01 {
width: 30%;
}
.number-info-box-content {
padding: 15px 10px 0;
}
/* *******
> Version v1.0
******* */
body {
color: #cad1d8;
}
.fixed .main-header {
box-shadow: 0 4px 8px 0 rgba(0,0,0,.12), 0 2px 4px 0 rgba(0,0,0,.08);
}
.skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side {
background-color: #181f27;
box-shadow: 0 4px 8px 0 rgba(0,0,0,.12), 0 2px 4px 0 rgba(0,0,0,.08);
}
.skin-blue .main-header .logo {
background-color: #1f2933;
color: #9aa5b1;
}
.skin-blue .main-header .navbar .sidebar-toggle {
color: #9aa5b1;
}
.skin-blue .main-header .navbar .nav>li>a {
color: #9aa5b1;
}
.skin-blue .sidebar-menu>li.header {
color: #797979;
background: #0e111582;
}
.skin-blue .main-header .navbar {
background-color: #1f2933;
}
.skin-blue .main-header .navbar .sidebar-toggle:hover {
background-color: #1c252e;
}
.skin-blue .main-header .logo:hover {
background-color: #1c252e;
}
.main-footer {
background: #1f2933;
color: #9aa5b1;
border-top: 1px solid #1f2933;
}
.skin-blue .sidebar-menu>li.active>a {
border-left-color: #099aa5;
}
.text-gray {
color: #9aa5b1 !important;
}
.text-green {
color: #00a65a !important;
}
.text-muted {
color: #9aa5b1 !important;
}
.text-danger {
color: #ff1c00;
}
.content-wrapper {
background-color: #33404d;
}
.btn-success {
background-color: #189a1c;
border-color: #0f8513;
}
.btn.btn-green:hover {
background-color: #0f8513;
border-color: #0e7717;
}
.btn-primary {
background-color: #0967d3;
border-color: #0550b3;
}
.btn.btn-primary:hover {
background-color: #0550b3;
border-color: #0345a0;
}
.box {
box-shadow: 0 4px 8px 0 rgba(0,0,0,.12), 0 2px 4px 0 rgba(0,0,0,.08) !important;
background: #3f4d5a;
border-top: 3px solid #1f2933;
}
.box-header {
color: #cad1d8;
background: #1f2933;
}
.box-header.with-border {
border-bottom: 1px solid #1f2933;
}
.box.box-default {
border-top-color: #1f2933;
}
.box-footer {
border-top: 1px solid #4d5b69;
background-color: #3f4d5a;
}
.content-header>.breadcrumb>li>a {
color: #cad1d8;
}
.breadcrumb>.active {
color: #cad1d8;
}
.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
color: #cad1d8;
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
border-top: 1px solid #4d5b69;
}
.table>thead>tr>th {
border-bottom: 2px solid #4d5b69;
}
.table-hover>tbody>tr:hover {
background-color: #33404d;
}
a {
color: #007eff;
}
.nav-tabs-custom {
background: #1f2933;
}
.nav-tabs-custom>.nav-tabs>li.active {
border-top-color: #099aa5;
}
.nav-tabs-custom>.nav-tabs>li.active>a {
border-top-color: transparent;
border-left-color: #15161c;
border-right-color: #15161c;
background: #13181e;
}
.nav-tabs-custom>.nav-tabs>li>a {
color: #9aa5b1;
}
.nav-tabs-custom>.nav-tabs>li.active>a, .nav-tabs-custom>.nav-tabs>li.active:hover>a {
color: #9aa5b1;
}
input.form-control {
padding: .75rem;
background-color: #515f6cbb;
border-width: 1px;
border-color: #606d7b;
border-radius: .25rem;
color: #cad1d8;
box-shadow: none;
-webkit-transition: border .15s linear,box-shaodw .15s ease-in;
transition: border .15s linear,box-shaodw .15s ease-in;
}
textarea.form-control {
padding: .75rem;
background-color: #515f6cbb;
border-width: 1px;
border-color: #606d7b;
border-radius: .25rem;
color: #cad1d8;
box-shadow: none;
-webkit-transition: border .15s linear,box-shaodw .15s ease-in;
transition: border .15s linear,box-shaodw .15s ease-in;
}
.input-group .input-group-addon {
border-color: #606d7b;
background-color: #515f6cbb;
color: #cad1d8;
}
.select2-container--default .select2-selection--single, .select2-selection .select2-selection--single {
border: 1px solid #606d7b;
}
.select2-container--default .select2-selection--single {
background-color: #515f6cbb;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #cad1d8;
}
.select2-container--default .select2-selection--multiple {
background-color: #515f6cbb;
}
.select2-container--default .select2-selection--multiple {
border: 1px solid #606d7b;
border-radius: 0;
}
code {
background-color: #515f6cbb;
color: #c3c3c3;
border: 1px solid rgba(0, 0, 0, .25);
}
.btn-default {
background-color: #33404d;
color: #cad1d8;
border-color: #606d7b;
}
.select2-results__option {
background-color: #b5bcc1;
color: #444;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #3c8dbc;
}
.modal-body {
background: #3f4d5a;
}
.modal-header {
background: #3f4d5a;
border-bottom-color: #4d5b69;
}
.modal-footer {
background: #3f4d5a;
border-top-color: #4d5b69;
}
@media (max-width: 991px) {
.content-header>.breadcrumb {
background: #1f2933 !important;
}
}
.nav-tabs-custom>.nav-tabs>li.active>a, .nav-tabs-custom>.nav-tabs>li.active:hover>a {
background-color: #101216;
}
.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
color: #fff;
}
.select2-dropdown {
background-color: #515f6cbb;
border: 1px solid #606d7b;
}
.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-search--dropdown .select2-search__field {
border-color: #d2d6de !important;
background-color: #515f6cbb;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #099aa5;
}
a {
color: #288afb;
}
a:hover {
color: #206ec7;
}
.form-control {
border-color: #606d7b;
background-color: #515f6cbb;
color: #cad1d8;
}
.form-control[disabled], .form-control[readonly],
fieldset[disabled] .form-control {
background-color: #1f2933;
color: #cad1d8;
cursor: not-allowed;
}
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #515f6cbb;
border: 1px solid #606d7b;
}
.well-lg {
padding: 24px;
}
.well-sm {
padding: 9px;
}
.small-box h3, .small-box p {
color: #c3c3c3;
}
.small-box-footer {
color: #288afb;
}
.small-box .icon {
color: #cad1d8;
}
.bg-gray {
background-color: #33404d !important;
}
pre {
color: #cad1d8;
background-color: #515f6cbb;
border-color: #1f2933;
}