MediaWiki:Gadget-PG PERIODIC TABLE OF ACTIONS.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

.pg-periodic-system-of-actions {
  background-color: blue;
  border: 0px solid;
  display: flex;
  align-items: flex-end;
  justify-content: left;
}
.pg-periodic-system-column {
  width: 90%;
  margin: 0px;
  border: 0px;
  background-color: blue;
  border: 0px solid;
}
.pg-periodic-system-cell {
  background-color: white;
  border: 0px solid;
  text-align: center;
  margin: 0px;
}

/********** observed */
.pg-observed-action {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 10%;
  left: 50%;
  margin: -50px 0 0 -50px;
  background: red;
  border-color: black;
  border-width: 13px;
  border-radius: 8%;
  backface-visibility: hidden;
}



/* CSS for cell chasers */

           div.pg-psoa-cell{
               position: relative;
               width: 100px;
               height: 50px;
               border: 0px solid black;
               background-color: #d2d1d4;
           }
           div.pg-psoa-action-chaser {
               width: 100%;
               height: 10%;
               border: 0;
               overflow: hidden;
           }
           div.pg-psoa-action-animation {
               position: absolute;
               height: 100%;
               width: 100%;
               border: 0;
               background: linear-gradient(to right, #d2d1d4, rgb(12, 1, 1));
               animation: pg-chaser-horizontal 2s linear infinite;
           }       
           @keyframes pg-chaser-horizontal{
               0%{
                   transform: translateX(-100%);
               }
               100%{
                   transform: translateX(0%);
           	   }
            }