matrix-engine-wgpu/public/css/style.css

+HOTFIX raycast, webGPU powered pwa application. Crazy fast rendering with AmmoJS physics support. Simple raycaster hit object added.

@font-face {
  font-family: stormfaze;
  src: url(../../public/res/fonts/stormfaze.ttf);
}

@font-face {
  font-family: wargames;
  src: url(../../public/res/fonts/wargames.ttf);
}

body {
  color: white;
  background-color: #95003d;
  font-family: "stormfaze";
  font-size: 14px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;

  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */

  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.575);
}

.meBody {
  font-family: stormfaze;
}

.noselection {
  -webkit-touch-callout: none;
  /* Safari */
  user-select: none;
  /* standard syntax */
  -webkit-user-select: none;
  /* webkit (safari, chrome) browsers */
  -moz-user-select: none;
  /* mozilla browsers */
  -khtml-user-select: none;
  /* webkit (konqueror) browsers */
  -ms-user-select: none;
  /* IE10+ */
}

*::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
}

/* Old shadow dom for play button */
*::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
}

/* This one works! */
*::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgb(102, 102, 102);
  border-radius: 8px;
}

body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 9px;
}

body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.6);
}


textarea:focus,
input:focus {
  outline: none;
}

a {
  font-family: stormfaze;
  color: #0080ff;
}

button {
  font-family: stormfaze;
}

iframe {
  border: none;
}

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#matrix-editor {
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
}

.debugBox {
  position: absolute;
  left: 5px;
  bottom: 0;
  font-size: 12px;
  width: 200px;
  height: 15px;
  background-color: black;
  color: lime;
}

.textEditor {
  font-size: 10px;
  width: 100%;
  max-width: 850px !important;
  min-width: 550px !important;
}

div {
  cursor: default;
}

.header {
  text-shadow: 0px 0px 14px #ffd52e;
  background-color: black;
  color: rgb(255, 255, 255);
}

textarea {
  -webkit-box-shadow: inset 0px 0px 22px 2px rgba(0, 255, 30, 1);
  -moz-box-shadow: inset 0px 0px 22px 2px rgba(0, 255, 30, 1);
  box-shadow: inset 0px 0px 22px 1px rgba(0, 255, 30, 1);
  background-color: black;
  color: lime;
}

.textureCanvas2d {
  display: none;
  position: absolute;
  left: -3000px;
  top: 0px;
  width: 512px;
  height: 512px;
}

/** Style for UI system hud controls */

.matrixTagHolder {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  background-color: black;
  color: #0080ff;
  font-family: stormfaze;
}

span {
  cursor: inherit;
  width: 100px;
}

.mLightInput {
  width: 150px;
  font-size: 26px;
}

.mLightCom {
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
  border: solid #0c2540 3px;
}

#matrix-net {
  position: absolute;
  display: none;
  right: 0;
  height: 100%;
  width: 40vh;
  font-family: stormfaze;
  background-color: crimson;
}

.timeLine {
  display: flex;
  position: absolute;
  left: 5%;
  top: 85%;
  width: 90%;
  flex-direction: column;
}


.timeLineSlider {
  display: flex;
  flex-direction: row;
}

.timeLineSlider,
p {
  background: rgba(12, 122, 22, 0.5);
  width: 100%;
  margin: 5px 5px 5px 5px;
}

/* For animation Line */
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

.btn {
  cursor: pointer;
  background: #6e34d9;
  background-image: -webkit-linear-gradient(top, #6e34d9, #0a027a);
  background-image: -moz-linear-gradient(top, #6e34d9, #0a027a);
  background-image: -ms-linear-gradient(top, #6e34d9, #0a027a);
  background-image: -o-linear-gradient(top, #6e34d9, #0a027a);
  background-image: linear-gradient(to bottom, #6e34d9, #0a027a);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 0px 0px 14px #ffd52e;
  -webkit-box-shadow: 0px 1px 26px #666666;
  -moz-box-shadow: 0px 1px 26px #666666;
  box-shadow: 0px 1px 26px #666666;
  color: #ffffff;
  font-size: 13px;
  padding: 4px 8px 4px 8px;
  text-decoration: none;
}

.btn:hover {
  background: #0a027a;
  background-image: -webkit-linear-gradient(top, #0a027a, #6e34d9);
  background-image: -moz-linear-gradient(top, #0a027a, #6e34d9);
  background-image: -ms-linear-gradient(top, #0a027a, #6e34d9);
  background-image: -o-linear-gradient(top, #0a027a, #6e34d9);
  background-image: linear-gradient(to bottom, #0a027a, #6e34d9);
  text-decoration: none;
}

.btn2 {
  cursor: pointer;
  background: #d93434;
  background-image: -webkit-linear-gradient(top, orangered, #0a027a);
  background-image: -moz-linear-gradient(top, orangered, #0a027a);
  background-image: -ms-linear-gradient(top, orangered, #0a027a);
  background-image: -o-linear-gradient(top, orangered, #0a027a);
  background-image: linear-gradient(to bottom, orangered, #0a027a);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 0px 0px 14px #ffd52e;
  -webkit-box-shadow: 0px 1px 26px #666666;
  -moz-box-shadow: 0px 1px 26px #666666;
  box-shadow: 0px 1px 26px #666666;
  color: #ffffff;
  font-size: 13px;
  padding: 4px 8px 4px 8px;
  text-decoration: none;
}

.btn2:hover {
  background: #0a027a;
  background-image: -webkit-linear-gradient(top, #0a027a, #6e34d9);
  background-image: -moz-linear-gradient(top, #0a027a, #6e34d9);
  background-image: -ms-linear-gradient(top, #0a027a, #6e34d9);
  background-image: -o-linear-gradient(top, #0a027a, #6e34d9);
  background-image: linear-gradient(to bottom, #0a027a, #6e34d9);
  text-decoration: none;
}

#blocker {
  z-index: 2;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;

  background: linear-gradient(291deg, #2960bb, #b22710, #b22710);
  background-size: 600% 600%;

  -webkit-animation: bganim 10s ease infinite;
  -moz-animation: bganim 10s ease infinite;
  -o-animation: bganim 10s ease infinite;
  animation: bganim 10s ease infinite;
}

#messageBox {
  font-size: xx-large;
  padding: 10%;
  align-items: center;
  text-align: center;
  vertical-align: middle;
}

#msgBox {
  text-shadow: 0px 4px 4px #282828;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
  background: rgb(2, 0, 36);
  background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgba(9, 81, 121, 0.8463760504201681) 34%, rgba(0, 212, 255, 1) 100%);
}

.msg-box {
  display: none;
  position: absolute;
  top: 30px;
  left: 50%;
  translate: -50%;
  border-radius: 6px !important;
  font-size: 15px !important;
  width: 300px;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;

  &.error {
    /* background-color: rgb(93, 4, 5); */
    color: rgb(255, 0, 30);
  }

  &.success {
    /* background-color: rgb(220, 14, 14); */
    color: rgb(32, 255, 84);
    text-align: center;
    margin-left: -150px;
    z-index: 20;
  }
}

.canPlay {
  border: solid limegreen 1px;
}

.canNotPlay {
  border: unset;
}


.myTheme1 {
  background: rgb(235, 1, 110);
  background: radial-gradient(circle, rgb(255, 73, 179) 7%, rgba(0, 144, 224, 0.9332107843137255) 57%, rgba(0, 212, 255, 1) 85%);
}

.stroke {

  text-shadow: 0px 4px 4px #282828;

  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

.animate1 {
	text-shadow: 0px 4px 4px #282828;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;

  background: linear-gradient(270deg, #ff0270, #02c5ff);
  background-size: 50% 50%;

  -webkit-animation: AnimationName 2s ease infinite;
  -moz-animation: AnimationName 2s ease infinite;
  animation: AnimationName 2s ease infinite;
}

@-webkit-keyframes AnimationName {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes AnimationName {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}


.bganim1 {
  background: linear-gradient(291deg, #2960bb, #b22710, #b22710);
  background-size: 600% 600%;

  -webkit-animation: bganim 10s ease infinite;
  -moz-animation: bganim 10s ease infinite;
  -o-animation: bganim 10s ease infinite;
  animation: bganim 10s ease infinite;
}

@-webkit-keyframes bganim {
  0%{background-position:0% 45%}
  50%{background-position:100% 56%}
  100%{background-position:0% 45%}
}
@-moz-keyframes bganim {
  0%{background-position:0% 45%}
  50%{background-position:100% 56%}
  100%{background-position:0% 45%}
}
@-o-keyframes bganim {
  0%{background-position:0% 45%}
  50%{background-position:100% 56%}
  100%{background-position:0% 45%}
}
@keyframes bganim {
  0%{background-position:0% 45%}
  50%{background-position:100% 56%}
  100%{background-position:0% 45%}
}


/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.sliderSwitch {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.sliderSwitch:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .sliderSwitch {
  background-color: #2196F3;
}

input:focus + .sliderSwitch {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .sliderSwitch:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.sliderSwitch span {
  width: unset;
}
/* Rounded sliders */
.sliderSwitch.round {
  border-radius: 34px;
}

.sliderSwitch.round:before {
  border-radius: 50%;
}