github.com/voedger/voedger@v0.0.0-20240520144910-273e84102129/pkg/apps/sys.monitor/site.hello/style.css (about)

     1  BODY {
     2      perspective: 1000px;
     3      perspective-origin: center -5em;
     4  
     5      background-color: rgba(52, 70, 24, 0.678);
     6      font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
     7  
     8      padding: 0px;
     9      margin: 0px;
    10  }
    11  
    12  .page {
    13      display: flex;
    14      flex-direction: column;
    15  
    16      width: 100%;
    17      height: 100%;
    18  }
    19  
    20  
    21  .header {
    22      height: 140px;
    23  
    24      text-align: center;
    25  
    26      color: #fff;
    27      font-size: 50px;
    28  
    29      font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    30      text-transform: uppercase;
    31  
    32      opacity: .8;
    33  
    34      display: flex;
    35      flex-direction: column;
    36      justify-content: center;
    37      align-items: center;
    38  
    39      line-height: 1.2;
    40  }
    41  
    42  .header .sub {
    43      font-size: 34px;
    44      text-transform: none;
    45  }
    46  
    47  .content {
    48      display: flex;
    49      flex-direction: column;
    50      justify-content: center;
    51      align-items: center;
    52      flex: 1;
    53  }
    54  
    55  .footer {
    56  
    57      height: 140px;
    58  
    59      text-align: center;
    60      color: #fff;
    61      font-size: 13px;
    62  
    63      opacity: 0.7;
    64  
    65      display: flex;
    66      flex-direction: column;
    67      justify-content: center;
    68      align-items: center;
    69  }
    70  
    71  
    72  /* cube */
    73  
    74  
    75  .container {
    76      width: 20vh;
    77      height: 20vh;
    78  
    79      position: relative;
    80  }
    81  
    82  .container {
    83      transform-style: preserve-3d;
    84      animation: rotate 10s infinite linear;
    85      /* transform: rotatex(120deg) rotateY(120deg) rotateZ(120deg); */
    86  }
    87  .container:before,
    88  .container:after {
    89      content: "";
    90      display: block;
    91      position: absolute;
    92      width: 100%;
    93      height: 100%;
    94  }
    95  .container:before {
    96      transform: rotateX(90deg);
    97  }
    98  .container:after {
    99      transform: rotatey(90deg);
   100  }
   101  
   102  .side {
   103      left: 0px;top: 0px;
   104      position: absolute;
   105      width: 100%;
   106      height: 100%;
   107      border: 2px solid white;
   108      opacity: 0.7;
   109  
   110      display: flex;
   111  
   112      justify-content: center;
   113      align-items: center;
   114  }
   115  
   116  .side svg {
   117      width: 80%;
   118      height: 80%;
   119  
   120      max-width: 150px;
   121      max-width: 150px;
   122  
   123      fill: #fff;
   124  }
   125  
   126  .back {
   127      transform: translateZ(-10vh);
   128      /* background: orange; */
   129  }
   130  
   131  .left {
   132      transform: translateX(-10vh) rotateY(90deg);
   133      /* background: lightgreen; */
   134  }
   135  
   136  .right {
   137      transform: translateX(10vh) rotateY(90deg);
   138      /* background: yellowgreen; */
   139  }
   140  .top {
   141      transform: translateY(-10vh) rotateX(90deg);
   142      /* background: skyblue; */
   143  }
   144  
   145  .bottom {
   146      transform: translateY(10vh) rotateX(90deg);
   147      /* background: steelblue; */
   148  }
   149  
   150  .front {
   151      transform: translateZ(10vh);
   152      /* background: gold; */
   153  }
   154  
   155  @keyframes rotate {
   156      100% {
   157          transform: rotatex(360deg) rotateY(360deg) rotateZ(360deg);
   158      }
   159  }
   160  
   161  HTML,
   162  BODY {
   163      height: 100%;
   164  }
   165  
   166  BODY {
   167      display: flex;
   168      justify-content: center;
   169      align-items: center;
   170  }