Brunobrno
00271e59e4
Introduced generated stateE15Enum and stateFdaEnum TypeScript types for both private and public API models. Updated HomeLayout to use a new CSS module for layout styling, and adjusted navbar centering logic. Commented out reset.css in index.html and made minor CSS cleanups.
194 lines
3.9 KiB
CSS
194 lines
3.9 KiB
CSS
:root{
|
|
--c-background: #031D44; /*background*/
|
|
--c-background-light: #04395E; /*background-highlight*/
|
|
--c-boxes: #24719f;; /*boxes*/
|
|
--c-lines: #87a9da; /*lines*/
|
|
--c-text: #CAF0F8; /*text*/
|
|
--c-other: #70A288; /*other*/
|
|
}
|
|
|
|
body{
|
|
overflow-x: hidden;
|
|
|
|
background: rgb(0,0,0);
|
|
background: -moz-linear-gradient(145deg, var(--c-background) 0%, var(--c-background-light) 100%);
|
|
background: -webkit-linear-gradient(145deg, var(--c-background) 0%, var(--c-background-light) 100%);
|
|
background: linear-gradient(145deg, var(--c-background) 0%, var(--c-background-light) 100%);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
body .between h1{
|
|
margin-top: 2em;
|
|
text-align: center;
|
|
color: var(--c-text);
|
|
text-decoration: underline;
|
|
font-size: 4em;
|
|
}
|
|
|
|
.hidden{
|
|
display: none !important;
|
|
}
|
|
|
|
.apps-group{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
.apps-group div{
|
|
border-radius: 1em;
|
|
}
|
|
.apps-container{
|
|
position: relative;
|
|
display: flex;
|
|
gap: 3em;
|
|
width: 100%;
|
|
margin: auto;
|
|
justify-content: center;
|
|
}
|
|
.apps-container .chat,
|
|
.apps-container .apps-group{
|
|
|
|
}
|
|
|
|
|
|
.nav-drone{
|
|
margin-top: 0em !important;
|
|
margin-bottom: -9em;
|
|
height: 20em;
|
|
position: relative;
|
|
}
|
|
.nav-drone .video-background{
|
|
height: 55vh;
|
|
clip-path: polygon(0 0%, 15% 0, 30% 0%, 42% 0%, 61% 0%, 82% 0%, 100% 0%, 100% 94%, 82% 100%, 65% 96%, 47% 99%, 30% 90%, 14% 98%, 0 94%) !important;
|
|
}
|
|
#nav-drone-background-css:has(nav) nav{ /*TOHLE PATŘÍ NAVIGACI VYŘEŠIT*/
|
|
margin-bottom: 8em;
|
|
}
|
|
|
|
.spark-cursor{
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
transform: translate(-20px, -20px);
|
|
}
|
|
.spark-cursor *{
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
|
|
|
|
}
|
|
|
|
.spark-cursor span{
|
|
position:absolute;
|
|
width: 2px;
|
|
height: 20px;
|
|
pointer-events: none;
|
|
transform-origin: bottom;
|
|
overflow: hidden;
|
|
|
|
filter: drop-shadow(0 0 0.5em #0f0) drop-shadow(0 0 1em #0f0);
|
|
}
|
|
.spark-cursor span.animate::before{
|
|
display: block;
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #0f0;
|
|
animation: animate-spark 1s ease-in-out forwards;
|
|
}
|
|
@keyframes animate-spark{
|
|
0%{
|
|
transform: translateY(100%);
|
|
}
|
|
100%{
|
|
transform: translateY(-100%);
|
|
}
|
|
}
|
|
|
|
.success-form-alert{
|
|
display: none;
|
|
background: #d4edda;
|
|
color: #155724;
|
|
padding: 10px;
|
|
border: 1px solid #c3e6cb;
|
|
border-radius: 5px;
|
|
margin-top: 10px;
|
|
position: relative;
|
|
}
|
|
.success-form-alert .close{
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 10px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
|
|
@media only screen and (max-width: 990px) {
|
|
.apps-container{
|
|
display: flex;
|
|
margin: auto;
|
|
flex-direction: column;
|
|
width: 90%;
|
|
gap: 1em;
|
|
}
|
|
.nav-drone{
|
|
display: none;
|
|
}
|
|
.apps-container .apps-group {
|
|
font-size: 0.9em;
|
|
gap: 1em;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
#reconnect{
|
|
border-radius: 1em;
|
|
color: white;
|
|
padding: 4em;
|
|
background-color: rgb(195 20 20);
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
border: #7b0000 dashed 0.5em;
|
|
}
|
|
#reconnect img{
|
|
width: 10em;
|
|
}
|
|
#reconnect button{
|
|
position: relative;
|
|
color: white;
|
|
margin: auto 1em;
|
|
padding: 1em;
|
|
font: initial;
|
|
font-size: 2em;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
|
|
|
|
&:hover{
|
|
animation: shake 0.4s ease-in-out infinite;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes shake {
|
|
0% { transform: translateX(0); }
|
|
25% { transform: translateX(-2px) rotate(-8deg); }
|
|
50% { transform: translateX(2px) rotate(4deg); }
|
|
75% { transform: translateX(-1px) rotate(-2deg); }
|
|
100% { transform: translateX(0); }
|
|
} |