base game
This commit is contained in:
Johannes
430
css/style.css
Normal file
430
css/style.css
Normal file
@@ -0,0 +1,430 @@
|
||||
:root {
|
||||
--pu-pink: #ff0055;
|
||||
--pu-pink-old: #f0a8c0;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: var(--dark);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--pu-pink);
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background: red; /*rgba(0,0,0,0);*/
|
||||
}
|
||||
/* Custom Scrollbar End */
|
||||
|
||||
.img-thumbnail {
|
||||
border: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.img-rounded {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.img-active {
|
||||
/*border: 2px solid var(--success);
|
||||
border-radius: 10px;
|
||||
filter: blur(1px);*/
|
||||
}
|
||||
.img-finished{
|
||||
filter: grayscale(0.8);
|
||||
}
|
||||
.img-container-overview:hover .img-finished, .img-container-overview:hover .img-active{
|
||||
filter: grayscale(0);
|
||||
-webkit-transition: all 1s linear;
|
||||
-moz-transition: all 1s linear;
|
||||
-o-transition: all 1s linear;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
.img-container-overview:hover .hide-on-hover{
|
||||
opacity: 0;
|
||||
-webkit-transition: all 1s linear;
|
||||
-moz-transition: all 1s linear;
|
||||
-o-transition: all 1s linear;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
.img-container-overview .img-rounded {
|
||||
width: 100%;
|
||||
}
|
||||
.img-center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.img-locked {
|
||||
opacity: 0.6;
|
||||
filter: blur(3px) grayscale(1);
|
||||
}
|
||||
.no-overflow {
|
||||
overflow: hidden;
|
||||
}
|
||||
.img-button-container-left-corner {
|
||||
z-index: 20;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
border-radius: 0px 15px 0px 0px;
|
||||
padding: 2px 2px 0px 0px;
|
||||
background-color: var(--dark);
|
||||
overflow: hidden;
|
||||
box-shadow: black 0px 0px 5px;
|
||||
}
|
||||
.min-card-container {
|
||||
min-width: 240px;
|
||||
}
|
||||
.img-button-inner-content-container {
|
||||
background-color: var(--dark);
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.img-button-inner-content-container .card {
|
||||
margin: 10px;
|
||||
box-shadow: black 0px 0px 10px;
|
||||
}
|
||||
.img-button-content-container {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
background-color: var(--dark);
|
||||
bottom: 0px;
|
||||
height: 0px;
|
||||
width: 100%;
|
||||
|
||||
-webkit-transition: all 1s linear;
|
||||
-moz-transition: all 1s linear;
|
||||
-o-transition: all 1s linear;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
.img-button-content-container.active {
|
||||
height: 100%;
|
||||
padding-bottom: 38px;
|
||||
|
||||
-webkit-transition: all 1s linear;
|
||||
-moz-transition: all 1s linear;
|
||||
-o-transition: all 1s linear;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
.img-backdrop-container-corner {
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
left: -5px;
|
||||
bottom: 0px;
|
||||
text-align: right;
|
||||
border-radius: 0px;
|
||||
padding: 8px 15px 8px 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.img-backdrop-progress-container-corner {
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
left: -2px;
|
||||
bottom: 0px;
|
||||
text-align: right;
|
||||
border-radius: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.img-backdrop-progress-container-corner div.progress {
|
||||
height: 38px;
|
||||
width: 100%;
|
||||
padding-left: 25%;
|
||||
}
|
||||
.img-backdrop-progress-container-corner div.progress .custom-progress-text {
|
||||
padding: 12px 12px 12px 0px;
|
||||
font-size: 0.9375rem !important;
|
||||
}
|
||||
.img-backdrop-container-dropshadow {
|
||||
box-shadow: black 0px 0px 5px;
|
||||
}
|
||||
.img-backdrop-card-body {
|
||||
box-shadow: black 2px 0px 5px;
|
||||
z-index: 10;
|
||||
}
|
||||
.img-button-seperator {
|
||||
display: inline;
|
||||
background-color: var(--light);
|
||||
padding: 0px 0px 5px 1px;
|
||||
}
|
||||
.img-container-overview {
|
||||
position: relative;
|
||||
}
|
||||
.img-locked-text {
|
||||
border-radius: 0px 0px 10px 10px;
|
||||
}
|
||||
.img-locked-overview-text{
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
/* border-top: 1px solid var(--dark);
|
||||
opacity: 0.8;
|
||||
*/
|
||||
}
|
||||
.sur-pink {
|
||||
color: var(--pu-pink)
|
||||
}
|
||||
|
||||
.card .card-header {
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
}
|
||||
.card {
|
||||
border-radius: 10px;
|
||||
box-shadow: black 0px 0px 30px;
|
||||
}
|
||||
.img-overview-icon {
|
||||
position: absolute;
|
||||
bottom: 37%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
font-size: 5rem;
|
||||
text-shadow: black 0px 0px 3px;
|
||||
}
|
||||
#toastContainer {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
right: 10px;
|
||||
z-index: 1072;
|
||||
max-width: 300px;
|
||||
}
|
||||
#backToTop {
|
||||
display:none;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 30px;
|
||||
z-index: 1070;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50px;
|
||||
font-size: 25px;
|
||||
box-shadow: black 0px 0px 5px;
|
||||
}
|
||||
#newUpdateAvailable {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 0px;
|
||||
z-index: 1071;
|
||||
height: 50px;
|
||||
padding-left: 20px;
|
||||
border-radius: 50px 0px 0px 50px;
|
||||
box-shadow: black 0px 0px 5px;
|
||||
}
|
||||
#errorContainer {
|
||||
background-color: var(--pu-pink);
|
||||
color: var(black);
|
||||
display: none;
|
||||
padding: 10px;
|
||||
}
|
||||
#errorContainer.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Auto Hide Function*/
|
||||
body.hidden nav, body.hidden main, body.hidden #toastContainer {
|
||||
opacity: 0;
|
||||
-webkit-transition: all 2s linear;
|
||||
-moz-transition: all 2s linear;
|
||||
-o-transition: all 2s linear;
|
||||
transition: all 2s linear;
|
||||
}
|
||||
#idleLogo {
|
||||
position: sticky;
|
||||
z-index: 1080;
|
||||
top: 100px;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
#idleLogo .idle-img {
|
||||
background-image: url("../img/logo.png");
|
||||
background-size: contain;
|
||||
width: 200px;
|
||||
height: 0px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
body.hidden #idleLogo .idle-img {
|
||||
display: block;
|
||||
}
|
||||
body.hidden #idleLogo .idle-img {
|
||||
height: 200px;
|
||||
|
||||
-webkit-transition: height 0s linear 3s;
|
||||
-moz-transition: height 0s linear 3s;
|
||||
-o-transition: height 0s linear 3s;
|
||||
transition: height 0s linear 3s;
|
||||
}
|
||||
body.hidden #idleLogo {
|
||||
opacity: 1;
|
||||
|
||||
-webkit-transition: opacity 1s linear 3s;
|
||||
-moz-transition: opacity 1s linear 3s;
|
||||
-o-transition: opacity 1s linear 3s;
|
||||
transition: opacity 1s linear 3s;
|
||||
}
|
||||
/* Auto Hide Function End*/
|
||||
a.anchor{display: block; position: relative; top: -59px; visibility: hidden;}
|
||||
|
||||
.upload-button-area input[type=file] {
|
||||
display:none;
|
||||
margin:10px;
|
||||
}
|
||||
.upload-button-area input[type=file] + label {
|
||||
display:inline-block;
|
||||
margin:20px;
|
||||
padding: 4px 32px;
|
||||
background-color: #FFFFFF;
|
||||
border:solid 1px #666F77;
|
||||
border-radius: 6px;
|
||||
color:#666F77;
|
||||
}
|
||||
.upload-button-area input[type=file]:active + label {
|
||||
background-image: none;
|
||||
background-color:#2D6C7A;
|
||||
color:#FFFFFF;
|
||||
}
|
||||
.top-carousel {
|
||||
padding-top: 14px;
|
||||
position: initial;
|
||||
}
|
||||
.nav-item, a.list-group-item-action.onClickLink, a.nav-link, a:not([href]) img, a.customLink:not([href]) {
|
||||
cursor: pointer;
|
||||
}
|
||||
a.onClickLink:not([href]):not(.list-group-item-action), a.header-add:not([href]), a.customLink:not([href]) {
|
||||
cursor: pointer;
|
||||
color: var(--green);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
a.onClickLink:hover:not([href]):not(.list-group-item-action), a.header-add:hover:not([href]), a.customLink:hover:not([href]) {
|
||||
color: var(--dark-green);
|
||||
text-decoration: underline;
|
||||
}
|
||||
#customCarousel, .carousel.autoSkipEnabled {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.carouselCardPadding {
|
||||
padding: 0px 28px;
|
||||
}
|
||||
.img-container-left img {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 770px) {
|
||||
.custom-side-card {
|
||||
height: 292px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.custom-side-card {
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.custom-side-card {
|
||||
height: 232px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-table.bootstrap4.fullscreen {
|
||||
background-color: #222;
|
||||
}
|
||||
.bootstrap-table.bootstrap4{
|
||||
min-width: 100%;
|
||||
}
|
||||
div.bootstrap-select div.dropdown-menu.show {
|
||||
max-width: 100%;
|
||||
}
|
||||
div.bootstrap-select div.dropdown-menu.show div.inner.show ul.dropdown-menu li a span.text {
|
||||
white-space: initial;
|
||||
}
|
||||
div.bootstrap-select.form-control {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.modal {
|
||||
z-index: 1071;
|
||||
}
|
||||
.modal-fullscreen.modal-dialog {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
.modal-fullscreen.modal-dialog .modal-content {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
td.actionsTableField{
|
||||
padding: 0px;
|
||||
width: 25px;
|
||||
vertical-align: top !important;
|
||||
}
|
||||
td.actionsTableField .btn-group {
|
||||
width: 100%;
|
||||
}
|
||||
td.actionsTableField button {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
#nav-logo {
|
||||
background-image: url("../img/logo.png");
|
||||
background-size: contain;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.table tfoot td {
|
||||
border-top: 2px solid var(--secondary);
|
||||
}
|
||||
|
||||
.qr-container .qr-code img {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
max-height: 400px !important;
|
||||
max-width: 400px !important;
|
||||
}
|
||||
.qr-container, .image-selection-container {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.qr-container .qr-link input, .image-selection-container .image-selection-upload-link input {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-selection-container .image-preview {
|
||||
height: 300px;
|
||||
width: 250px;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
.image-selection-container .image-selection-content-right{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
iframe#mappingToolFrame{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
display: block;
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
padding-top: 72px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
Reference in New Issue
Block a user