wordpress-plugin
Version:
Boilerplate WordPress Plugin structure to support development of JavaScript frameworks: React, Vue, Vanilla, TypeScript, supporting Vite, NextJS, Nuxt, Gatsby, and JSX/TSX Components (like MUI), CSS (like Tailwind + Unity), data APIs (like REST and GraphQ
360 lines (337 loc) • 6.8 kB
CSS
/**
* All of the CSS for your admin-specific functionality should be
* included in this file.
*/
/* ThreeDGarden - Custom Admin Styles */
/** THREED GARDEN */
.planting_plan_bed_plant_schedule { background-color: #999999; }
.planting_plan_bed { background-color: #330000; }
.planting_plan_plant { background-color: #003300; }
/** WEBGL */
#webgl { width: 100%; height: 100%; }
/** DAT.GUI */
#gui { position: absolute; right: 5px; }
#gui dd, #gui li { margin-bottom: 0; }
/** ANNOTATIONS */
.annotation {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
margin-left: 15px;
margin-top: 15px;
padding: 1em;
width: 200px;
color: #fff;
background: rgba(0, 0, 0, 0.7);
border-radius: .5em;
font-size: 12px;
line-height: 1.2;
transition: opacity .5s;
/* &::before {
content: '1';
position: absolute;
top: -30px;
left: -30px;
width: 30px;
height: 30px;
border: 2px solid #fff;
border-radius: 50%;
font-size: 16px;
line-height: 30px;
text-align: center;
background: rgba(0, 0, 0, 0.8);
} */
}
/** "x" */
.dismiss {
cursor: pointer;
margin-left: 5px;
}
/**
* loader spinner
*/
.lds-grid {
display: inline-block;
position: fixed;
width: 80px;
height: 80px;
z-index: -1;
}
.lds-grid div {
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
animation: lds-grid 1.2s linear infinite;
}
.lds-grid div:nth-child(1) {
top: 8px;
left: 8px;
animation-delay: 0s;
}
.lds-grid div:nth-child(2) {
top: 8px;
left: 32px;
animation-delay: -0.4s;
}
.lds-grid div:nth-child(3) {
top: 8px;
left: 56px;
animation-delay: -0.8s;
}
.lds-grid div:nth-child(4) {
top: 32px;
left: 8px;
animation-delay: -0.4s;
}
.lds-grid div:nth-child(5) {
top: 32px;
left: 32px;
animation-delay: -0.8s;
}
.lds-grid div:nth-child(6) {
top: 32px;
left: 56px;
animation-delay: -1.2s;
}
.lds-grid div:nth-child(7) {
top: 56px;
left: 8px;
animation-delay: -0.8s;
}
.lds-grid div:nth-child(8) {
top: 56px;
left: 32px;
animation-delay: -1.2s;
}
.lds-grid div:nth-child(9) {
top: 56px;
left: 56px;
animation-delay: -1.6s;
}
@keyframes lds-grid {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.lds-default {
display: inline-block;
position: fixed;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: 60px;
width: 80px;
height: 80px;
z-index: -1;
}
.lds-default div {
position: absolute;
width: 14px;
height: 14px;
background: #009900;
border-radius: 50%;
animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
animation-delay: 0s;
top: 37px;
left: 66px;
}
.lds-default div:nth-child(2) {
animation-delay: -0.1s;
top: 22px;
left: 62px;
}
.lds-default div:nth-child(3) {
animation-delay: -0.2s;
top: 11px;
left: 52px;
}
.lds-default div:nth-child(4) {
animation-delay: -0.3s;
top: 7px;
left: 37px;
}
.lds-default div:nth-child(5) {
animation-delay: -0.4s;
top: 11px;
left: 22px;
}
.lds-default div:nth-child(6) {
animation-delay: -0.5s;
top: 22px;
left: 11px;
}
.lds-default div:nth-child(7) {
animation-delay: -0.6s;
top: 37px;
left: 7px;
}
.lds-default div:nth-child(8) {
animation-delay: -0.7s;
top: 52px;
left: 11px;
}
.lds-default div:nth-child(9) {
animation-delay: -0.8s;
top: 62px;
left: 22px;
}
.lds-default div:nth-child(10) {
animation-delay: -0.9s;
top: 66px;
left: 37px;
}
.lds-default div:nth-child(11) {
animation-delay: -1s;
top: 62px;
left: 52px;
}
.lds-default div:nth-child(12) {
animation-delay: -1.1s;
top: 52px;
left: 62px;
}
@keyframes lds-default {
0%, 20%, 80%, 100% {
transform: scale(1.0);
}
50% {
transform: scale(1.8);
}
0%, 100% {
opacity: 0.7;
}
50% {
opacity: 0.2;
}
}
#message{
position:absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
font-family: 'Kavivanar', san-serif;
font-size: 40px;
width:80%;
max-width:280px;
padding: 15px 15px 50px 15px;
text-align: center;
display:none;
align-content: center;
justify-content: center;
background-color: aliceblue;
border: medium solid #3D455C;
border-radius: 20px;
color: #3D455C;
z-index: 99;
}
#message_ok{
position: absolute;
bottom: 10px;
padding: 10px 20px 10px 20px;
font-family: sans-serif;
font-size: 20px;
background-color: #3D455C;
color: #fff;
border-radius: 8px;
border: medium solid #696882;
}
#sfx-btn{
position: absolute;
right: 15px;
top: 15px;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background:#3B53A2;
font-size: 25px;
color: #fff;
}
#camera-btn{
position: absolute;
right: 15px;
bottom: 15px;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background:#3B53A2;
font-size: 25px;
color: #fff;
}
#action-btn{
position: absolute;
left: 50%;
bottom: 5px;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background:#3B53A2;
font-size: 25px;
color: #fff;
transform: translateX(-50%);
z-index: 9;
}
#overlay{
position:absolute;
width: 100%;
height: 100%;
background: #000000;
z-index: 10;
opacity: 1;
}
.fade-in {
animation-name: fade-in;
animation-duration: 2s;
}
@keyframes fade-in {
from {opacity: 1;}
to {opacity: 0;}
}
#briefcase-btn{
position: absolute;
left: 15px;
bottom: 15px;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background:#3B53A2;
font-size: 25px;
color: #fff;
}
#briefcase{
position: absolute;
left: 20px;
bottom: 60px;
width: auto;
opacity: 0;
padding: 8px;
border-radius: 8px;
background:#3B53A2;
transition: opacity 0.5s;
}
#briefcase ul{
list-style: none;
padding: 0;
margin: 0;
}
#briefcase li{
float: left;
}
#briefcase li a{
padding: 0 3px 0 3px;
}
#briefcase img{
width: 100px;
height: 75px;
}