styles.css

/*:active { cursor: url(boom.png), auto; }*/
* { font-family: 'Cairo', sans-serif; }
* {
  -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 */
}
h1,h2,h3,h4,h5,h6 { font-weight: bold; }
.jumbotron-heading{
  font-family: 'Amiri', sans-serif;
  font-weight: 300;
  font-size: 70pt;
  color: #3a3a3a;
  letter-spacing: -4px;
}
.dir-rtl { direction: rtl; }
.dir-ltr { direction: ltr; }
.jumbotron { 
  background-color: #fff;
  padding: 45px 20px; 
}
.experiment * {
  transition: background-color 0.15s ease-in-out;
  min-height: 2px;
  cursor: alias;
}
.experiment div, .experiment span, 
.experiment aside, .experiment nav,
.experiment section, .experiment article {
  min-height: 15px;
}
.experiment.selected-on * { 
  border:rgba(0,0,0,0.1) 1px dashed;
  padding-top: 4px !important; 
  padding-bottom: 4px !important; 
}
[data-sclprt-highlight] {
  cursor: pointer;
  background-color: #ffefa3 !important;
  background-image: url(bg-highlight.png);
  box-shadow: 0 0 0 1px #fff6cb;
}
[data-sclprt-selected] {
  cursor: pointer;
  background-image: url(bg-highlight.png);
  animation: selected 1.5s infinite;
}
[data-sclprt-selected-parent] {
  outline: 2px dashed magenta !important;
}
@keyframes selected {
  0%      { background-color: #beeaa5; 
            box-shadow: 0 0 2px 2px #a7de88;
            outline: 2px dashed #e7ffda;
          }
  50%     { background-color: #cafead; 
            outline: 2px dashed #92c574;
            box-shadow: 0 0 2px 2px #ddffca;
          }
  100%    { background-color: #beeaa5; 
            box-shadow: 0 0 2px 2px #a7de88;
            outline: 2px dashed #e7ffda;
          }
}

.destroyed {
  animation: destroyed 0.1s;
  box-shadow: 0 0 1px 1px #ddffca;
}
@keyframes destroyed {
  0%      { transform: translate(-4px, -3px) scale(1.00); 
            background-color: #beeaa5; 
            opacity: 0.2;
          }
  50%     { transform: translate(2px, -2px) scale(1.00);  
            background-color: transparent;
            opacity: 1.0;
          }
  100%    { transform: translate(2px, 5px) scale(1.00); 
            background-color: #beeaa5;
            opacity: 0.5;
          }
}
.copied {
  animation: copied 0.2s;
}
@keyframes copied {
  0%     { opacity: 1.0; }
  50%    { opacity: 0.0; }
  100%   { opacity: 1.0; }
}
.cut {
  animation: cut 0.2s;
}
@keyframes cut {
  0%      { transform: scale(1.00); 
            background-color: rgba(255,255,255,0.5); 
            opacity: 1.0;
          }
  100%    { transform: scale(0.50); 
            background-color: rgba(255,255,255,1.0);
            opacity: 0.0;
          }
}
.pasted {
  animation: cut 0.1s;
}
@keyframes pasted {
  0%      { transform: translate(10px, 0) scale(0.50); 
            opacity: 0.0;
          }
  100%    { transform: translate(0px, 0) scale(1.00); 
            opacity: 1.0;
          }
}

.locator { 
  border: 1px solid #cafead; 
  background-color: #262e35;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
  z-index: 9999;
}
.locator .parent .tagname,
.locator .parent .tagclosing { 
  color: magenta; 
  font-weight: bold;
}
.locator .itself { 
  background-color: rgba(255,255,255,0.09);
  padding: 1px 7px 3px;
  border-radius: 3px;
  margin: 2px -6px 1px;
}
.locator .itself .tagname,
.locator .itself .tagclosing { 
  color: #a4f773; 
}
.itself .idname,  .itself .classname,
.parent .idname,  .parent .classname {
  word-spacing: 3px; 
  letter-spacing: 0.5px;
  font-weight: 300;
}
.locator .highlighted small {
  margin: 1px 0;
  border-radius: 2px;
  font-weight: 600;
  color: rgba(0,0,0,0.65) !important;
  background-color: #fff3cd;
}
.toolbar .btn-primary {
  color: #fff;
  background-color: #f4036e;
  border-color: #f4036e;
}
.toolbar .btn-primary:hover {
    color: #fff;
    background-color: #f4036e;
    border-color: #f4036e;
}
.toolbar .btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #f4036e;
    border-color: #b0165e;
}