Files
TSN-Ranksystem/styles/TSN_CosmicBlueModern/WI.css
Newcomer1989 f7d7aedc5a release 1.3.22
2023-02-01 20:44:58 +01:00

687 lines
18 KiB
CSS

/* Copyright 2023 by TerraBot.de */
/* HTML-Tags */
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@font-face {
font-family: 'TerraBot';
src: url('files/fonts/UniversRegular.ttf');
}
html {
background-image: linear-gradient(135deg, #000 0%, #01384b 30%, #000 85%);
min-height: 100%;
min-width: 100%;
}
body {
font-family: 'TerraBot', sans-serif;
font-size: 15px;
color: #ccc;
height: calc(100%-50px);
min-width: 100%;
background: none;
}
body:before {
content: "Copyright 2023 by TerraBot.de V1.0 Ranksystem-Webinterface 1.3.22";
position: absolute;
top: -200px;
visibility: hidden;
}
.fade.in {
backdrop-filter: blur(3px);
}
/*.navbar-brand:before {
content: url("files/gfx/cosmicblue-branding.png");
color: #006e94;
margin-right: 5px;
}*/
.alert a {
color: #01384b;
transition: all 0.6s;
}
.alert a:hover {
color: #10B0E9;
text-decoration: none;
}
thead a {
color: #ccc !important;
transition: all 0.6s;
}
thead a:hover {
color: #fff !important;
text-decoration: none;
}
a {
color: #ccc;
transition: all 0.6s;
}
a:hover {
color: #fff;
text-decoration: none;
}
img[src="../tsicons/placeholder.png"] {
/*display: none;*/
}
a .labelcid, a .labelcid2 {
transition: all 1s;
}
a:hover .labelcid, a:hover .labelcid2 {
color: #10B0E9;
}
h1, h2, h3 {
color: #fff;
}
text {
fill: #fff !important;
color: #fff !important;
}
path {
cursor: pointer;
}
table {
border: none !important;
background-color: rgba(0,0,0,0.4);
}
svg:not(.fa-users):not(.fa-clock):not(.fa-info-circle):not(.svg-inline--fa) {
opacity: 0.6;
transition: all 1s;
}
svg:hover {
opacity: 1 !important;
}
text {
fill: #fff !important;
color: #fff !important;
}
pre {
background: rgba(0,0,0,0.7);
color: #ccc;
}
/* Special Character */
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.filter-option-inner>.filter-option-inner-inner .labelcid {
display: inline-block;
}
.filter-option-inner>.filter-option-inner-inner .labelcid2 {
display: inline-block;
}
.filter-option-inner-inner {
padding-left: 0;
}
.filter-option-inner-inner>svg {
position: inherit;
margin-right: 15px;
}
.filter-option-inner-inner>img[src='../tsicons/placeholder.png'] {
display: none;
}
#default_header_origin_value {
margin-top: 1em;
}
#default_header_frame_value {
margin-top: 1em;
}
/* Class-Contents "Selectors" */
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.divider + li > div {
padding: 5px 3px 5px 3px;
}
.alert-info {
color: #01384b;
background-image: linear-gradient(135deg, #247491 0%, #10B0E9 30%, #247491 85%);
border-color: #01384b;
}
.alert-success {
color: #01384b;
background-image: linear-gradient(135deg, #247491 0%, #10B0E9 30%, #247491 85%);
border-color: #01384b;
}
.alertbot {
text-shadow: none;
text-align: center;
}
.alertbot > span {
display: block;
text-align: center;
margin-left: 0;
font-size: 10px;
}
/* Main-Navigation */
.navbar-inverse {
background: rgba(0,0,0,0.9);
}
.side-nav {
background: rgba(0,0,0,0.9);
}
@media (min-width: 768px){
#wrapper {
padding-left: 75px;
}
.side-nav {
overflow: unset;
}
.side-nav {
width: 75px;
}
.side-nav>li {
position: relative;
}
.side-nav>li>a {
border: 1px solid transparent;
position: relative;
display: block;
width: 75px;
height: 75px;
padding: 0;
text-align: center;
}
.side-nav>li>a>svg {
font-size: 32px;
margin: 10px auto 0 auto;
}
.side-nav>li>a>.item-margin {
position: absolute;
left: 0;
top: 45px;
transition: all 0.6s;
width: 100%;
display: inline-block;
text-align: center;
margin:0;
font-size: 10px;
padding: 0 0 0 0;
}
a[data-target='#rank']:after, a[data-target='#stats']:after, a[data-target='#admin']:after, a[data-target='#addons']:after {
content: "";
display: block;
width: 10px;
height: 10px;
border: 1px solid;
border-right-color: #fff;
border-top-color: #fff;
border-left-color: transparent;
border-bottom-color: transparent;
position: absolute;
right: 5px;
top: 5px;
transform: rotate(45deg);
transition: all 0.6s;
opacity: 0.6;
}
a[data-target='#rank'][aria-expanded='true']:after, a[data-target='#stats'][aria-expanded='true']:after, a[data-target='#admin'][aria-expanded='true']:after, a[data-target='#addons'][aria-expanded='true']:after {
border-right-color: #10b0e9;
border-top-color: #10b0e9;
border-left-color: transparent;
border-bottom-color: transparent;
transform: rotate(135deg);
right: 5px;
top: 0;
opacity: 1;
color: #10b0e9;
}
a[data-target='#rank'][aria-expanded='true'] svg, a[data-target='#stats'][aria-expanded='true'] svg, a[data-target='#admin'][aria-expanded='true'] svg, a[data-target='#addons'][aria-expanded='true'] svg
/*a[data-target='#rank'][aria-expanded='true'] .item-margin, a[data-target='#stats'][aria-expanded='true'] .item-margin, a[data-target='#admin'][aria-expanded='true'] .item-margin, a[data-target='#addons'][aria-expanded='true'] .item-margin*/ {
color: #10b0e9;
}
.activates > svg {
color: #10b0e9;
}
/*.side-nav>li>a>.item-margin::before {
content: "";
position: absolute;
display: block;
border: 5px solid #10b0e9;
border-left-color: transparent;
border-bottom-color: transparent;
top: 15px;
left: 0;
transform: rotate(45deg);
}*/
.side-nav>li>a>.item-margin + .item-margin {
display: none;
}
.side-nav>li:not(.active)>a:hover>.item-margin {
z-index: 20;
opacity: 1;
}
.side-nav>li>a:focus, .side-nav>li:not(.active)>a:hover {
border: 1px solid #10B0E9 !important;
box-shadow: #10b0e9 5px 5px 2rem inset;
border-radius: 0 !important;
opacity: 1;
background: none !important;
}
.side-nav>li>a:focus>svg, .side-nav>li>a:hover>svg {
opacity: 1 !important;
}
.side-nav>li>ul#rank, .side-nav>li>ul#rank, .side-nav>li>ul#stats, .side-nav>li>ul#admin, .side-nav>li>ul#addons {
position: absolute;
min-width: 225px;
z-index: 10;
left: 75px;
top: 0;
list-style: none;
background-color: rgba(0,0,0,0.9);
box-shadow: #000 3px 3px 5px;
}
#rank>li>a, #stats>li>a, #admin>li>a, #addons>li>a {
border: 1px solid transparent;
}
#rank>li>a:hover, #stats>li>a:hover, #admin>li>a:hover, #addons>li>a:hover {
border: 1px solid #10B0E9 !important;
box-shadow: #10b0e9 5px 5px 2rem inset;
border-radius: 0 !important;
background: none !important;
}
#rank>li>a:active, #stats>li>a:active, #admin>li>a:active, #addons>li>a:active,
#rank>li>a:focus, #stats>li>a:focus, #admin>li>a:focus, #addons>li>a:focus {
color: #10b0e9;
}
.navbar-nav>li {
float: none;
}
.divider {
display: none !important;
}
}
.progress {
background-color: rgba(0,0,0,0.7);
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
background: rgba(0,0,0,0.7);
}
.navbar-inverse .navbar-nav>.active>a>svg, .navbar-inverse .navbar-nav>.active>a:focus>svg, .navbar-inverse .navbar-nav>.active>a:hover>svg {
color: #10B0E9;
}
/* Drop-Down-Menu */
.tsspacer.text-right .text {
width: 100%;
}
.text .arrowtree {
position: unset;
float: left;
left: 13px;
}
.dropdown-toggle {
min-height: 35.25px;
}
.dropdown-menu {
background: rgba(0,0,0,0.7);
}
.tsspacerimg {
margin-top: -3px;
}
.filter-option-inner-inner>.tsspacerimg {
margin-top: -8px;
}
.dropdown-menu>.disabled>a, .dropdown-menu>.disabled>a:focus, .dropdown-menu>.disabled>a:hover {
color: #fff;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
background-color: rgba(0,0,0,0.7);
}
.top-nav>.open>.dropdown-menu {
float: left;
position: absolute;
margin-top: 0;
border: 1px solid rgba(0,0,0,.15);
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: rgba(0,0,0,0.9);
-webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
}
.dropdown-menu>li>a {
color: #fff;
opacity: 0.7;
border: 1px solid transparent;
padding: 3px 5px;
}
.dropdown-menu>li>a.margincid {
width: 82%;
}
.dropdown-menu>li:not(.disabled)>a:focus, .dropdown-menu>li:not(.disabled)>a:hover {
color: #fff;
border: 1px solid #10B0E9 !important;
box-shadow: #10b0e9 5px 5px 2rem inset;
border-radius: 0 !important;
opacity: 1;
background: none !important;
}
.top-nav>.open>.dropdown-menu {
min-width: 300px !important;
}
.glyphicon-ok::before {
filter: brightness(0) invert(1);
}
.dropdown-menu>li>a>.glyphicon::before {
color: #fff;
}
input.dropdown-toggle {
background: rgba(0,0,0,0.7);
}
input[type=text]{
border-color: rgba(255,255,255,0.2);
}
.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
color: #ccc;
background-color: rgba(0,0,0,0.7);
border-color: #10b0e9;
}
.btn-default {
color: #ccc;
background-color: rgba(0,0,0,0.7);
border-color: rgba(255,255,255,0.2);
transition: all 0.6s;
}
.btn-default.focus, .btn-default:focus, .btn-default:hover {
color: #e7e7e7;
background-color: rgba(0,0,0,0.6);
border-color: #10b0e9;
}
.form-control {
background-color: rgba(0,0,0,0.7);
color: #ccc;
}
.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {
color: #333;
background-color: rgba(0,0,0,0.7);
background-image: none;
border-color: #10b0e9;
}
.input-group-addon {
background-color: #01384b;
color: #ccc;
border-color: rgba(255,255,255,0.2);
}
select>option {
background-color: #000;
color: #666;
}
select>option:active {
color: #10b0e9;
}
select>option:checked{
color: #10b0e9 !important;
}
/* Button */
button[name='logout'], button[name='adminlist'] {
padding: 2px 5px !important;
font-size: 14px !important;
}
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover {
color: #fff;
background-color: #10b0e9;
border-color: #10b0e9;
}
@media (min-width: 768px){
.form-horizontal[name='start'] {
margin-left: 30%;
}
.form-horizontal[name='start'], .form-horizontal[name='stop'], .form-horizontal[name='restart'] {
display: inline-block;
margin-right: 5%;
}
}
.btn-success {
color: #fff;
background-color: #01384b;
border-color: #10b0e9;
transition: all 0.6s;
}
.btn-success:hover {
color: #fff;
background-color: #10b0e9;
border-color: #10b0e9;
}
.btn-success.active, .btn-success:active, .open>.dropdown-toggle.btn-success {
color: #fff;
background-color: #10b0e9;
border-color: #10b0e9;
}
.btn-success.focus, .btn-success:focus {
color: #fff;
background-color: #10b0e9;
border-color: #10b0e9;
}
.bootstrap-switch {
border-color: rgba(255,255,255,0.2);
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
color: #fff;
background: #10b0e9;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
color: #ccc;
background: rgba(0,0,0,0.7);
}
.bootstrap-switch .bootstrap-switch-label {
color: #ccc;
background: rgba(0,0,0,0.7);
}
.bootstrap-switch-on .bootstrap-switch-label {
color: #fff;
}
/* Table */
.table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
border: none;
}
.table-hover tbody tr {
transition: all 1s;
}
.table-hover tbody tr:hover {
background-color: rgba(0,0,0,0.7);
color: #fff;
}
.table-hover tbody tr:hover .text-success {
color: #10B0E9;
}
.table>thead>tr>th {
background-color: rgba(0,0,0,0.7);
}
.table>thead>tr>th {
border-bottom: none;
}
.affix {
background-color: rgba(0,0,0,0.7)!important;
z-index: 10;
width: calc(100% - 125px);
position: sticky;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
line-height: 3;
border-top: none;
white-space: nowrap;
}
.table-striped>tbody>tr:nth-of-type(odd) {
background: rgba(0,0,0,0.4);
}
td.text-success {
text-align: center;
}
#list-rankup > tbody tr>td:not(:first-child){
/*text-align: left;*/
}
#list-rankup > tbody tr>td:first-child + td{
text-align: center;
}
#list-rankup > tbody tr>td>.flag-icon {
display: block;
margin-right: auto;
margin-left: auto;
text-align: center;
line-height: 39px;
}
#list-rankup > tbody tr>td>svg {
display: block;
margin-right: auto;
margin-left: auto;
text-align: center;
margin-top: 14px;
}
#page-wrapper {
background: none;
}
.text-success {
color: #10B0E9;
}
.pagination>li>a, .pagination>li>span {
color: #ccc;
transition: all 1s;
text-decoration: none;
background-color: rgba(0,0,0,0.7);
border: none;
line-height: 2;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
z-index: 3;
color: #fff;
cursor: default;
background-color: rgba(0,0,0,0.9);
box-shadow: #10b0e9 5px 5px 2rem inset;
border-color: none;
}
.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
background-color: rgba(0,0,0,0.9);
color: #10B0E9;
}
.panel {
background-color: rgba(0,0,0,0.7);
border: none;
}
.panel-heading {
background: none !important;
opacity: 0.7;
}
.panel-footer {
background: none;
}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus:not(#dropdownMenu1), .open>.dropdown-toggle.btn-primary:not(#dropdownMenu1):focus, .open>.dropdown-toggle.btn-primary:not(#dropdownMenu1):hover {
background: rgba(0,0,0,0.7);
border: 1px solid #10B0E9;
color: #10B0E9;
}
.open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
background-color: rgba(0,0,0,0.9);
color: #10B0E9;
}
.btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary:not(#dropdownMenu1) {
background: #10B0E9;
border: 1px solid #01384b;
color: #01384b;
}
.open>.dropdown-toggle.btn-primary#dropdownMenu1 {
background-color: rgba(0,0,0,0.9);
color: #10B0E9;
}
.btn-primary {
background: rgba(0,0,0,0.7);
border-radius: 5px;
padding: 5px 15px;
font-size: 18px;
transition: all 1s;
color: #ccc;
border: 1px solid #ccc;
}
.btn-primary:hover {
background: rgba(0,0,0,0.7);
box-shadow: #10b0e9 5px 5px 2rem inset;
border: 1px solid #10B0E9;
color: #fff;
}
.btn-primary.focus, .btn-primary:focus {
background: rgba(0,0,0,0.7);
box-shadow: #10b0e9 5px 5px 2rem inset;
border: 1px solid #10B0E9;
color: #fff;
}
.label-warning {
background-color: #10B0E9;
display: block;
line-height: 29px;
}
/* InfoModal */
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.modal-content {
background-color: rgba(0,0,0,0.7);
}
.modal-content button.close {
color: #fff;
opacity: 0.8;
transition: all 0.6s;
}
.modal-content button.close:hover {
color: #fff;
opacity: 1;
}
.modal-header {
color: #fff;
}
.modal-body {
color: #ccc;
}
.modal-footer {
color: #fff;
}