Grammalecte  Hex Artifact Content

Artifact 16626ac74cda06ee669b0437c883b4d3bd515f6ed8d617f03e5d8efd50310231:


0000: 2f 2a 0a 20 20 20 20 43 53 53 0a 20 20 20 20 43  /*.    CSS.    C
0010: 6f 6e 74 65 6e 74 20 70 61 6e 65 6c 73 20 66 6f  ontent panels fo
0020: 72 20 47 72 61 6d 6d 61 6c 65 63 74 65 0a 2a 2f  r Grammalecte.*/
0030: 0a 0a 2e 67 72 61 6d 6d 61 6c 65 63 74 65 5f 70  ...grammalecte_p
0040: 61 6e 65 6c 20 7b 0a 20 20 20 20 70 61 64 64 69  anel {.    paddi
0050: 6e 67 3a 20 30 3b 0a 20 20 20 20 6d 61 72 67 69  ng: 0;.    margi
0060: 6e 3a 20 30 3b 0a 20 20 20 20 70 6f 73 69 74 69  n: 0;.    positi
0070: 6f 6e 3a 20 66 69 78 65 64 3b 0a 20 20 20 20 62  on: fixed;.    b
0080: 6f 78 2d 73 69 7a 69 6e 67 3a 20 63 6f 6e 74 65  ox-sizing: conte
0090: 6e 74 2d 62 6f 78 3b 0a 20 20 20 20 7a 2d 69 6e  nt-box;.    z-in
00a0: 64 65 78 3a 20 32 31 34 37 34 38 33 36 34 31 3b  dex: 2147483641;
00b0: 20 2f 2a 20 6d 61 78 69 6d 75 6d 20 69 73 20 32   /* maximum is 2
00c0: 31 34 37 34 38 33 36 34 37 3a 20 68 74 74 70 73  147483647: https
00d0: 3a 2f 2f 73 74 61 63 6b 6f 76 65 72 66 6c 6f 77  ://stackoverflow
00e0: 2e 63 6f 6d 2f 71 75 65 73 74 69 6f 6e 73 2f 34  .com/questions/4
00f0: 39 31 30 35 32 2f 6d 69 6e 69 6d 75 6d 2d 61 6e  91052/minimum-an
0100: 64 2d 6d 61 78 69 6d 75 6d 2d 76 61 6c 75 65 2d  d-maximum-value-
0110: 6f 66 2d 7a 2d 69 6e 64 65 78 20 2a 2f 0a 20 20  of-z-index */.  
0120: 20 20 62 6f 72 64 65 72 3a 20 32 70 78 20 73 6f    border: 2px so
0130: 6c 69 64 20 68 73 6c 28 32 31 30 2c 20 31 30 25  lid hsl(210, 10%
0140: 2c 20 35 30 25 29 3b 0a 20 20 20 20 62 6f 72 64  , 50%);.    bord
0150: 65 72 2d 72 61 64 69 75 73 3a 20 31 30 70 78 20  er-radius: 10px 
0160: 31 30 70 78 20 31 30 70 78 20 31 30 70 78 3b 0a  10px 10px 10px;.
0170: 20 20 20 20 62 61 63 6b 67 72 6f 75 6e 64 2d 63      background-c
0180: 6f 6c 6f 72 3a 20 68 73 6c 28 32 31 30 2c 20 30  olor: hsl(210, 0
0190: 25 2c 20 31 30 30 25 29 3b 0a 20 20 20 20 63 6f  %, 100%);.    co
01a0: 6c 6f 72 3a 20 68 73 6c 28 30 2c 20 30 25 2c 20  lor: hsl(0, 0%, 
01b0: 30 25 29 3b 0a 20 20 20 20 66 6f 6e 74 2d 66 61  0%);.    font-fa
01c0: 6d 69 6c 79 3a 20 22 54 72 65 62 75 63 68 65 74  mily: "Trebuchet
01d0: 20 4d 53 22 2c 20 22 46 69 72 61 20 53 61 6e 73   MS", "Fira Sans
01e0: 22 2c 20 22 4c 69 62 65 72 61 74 69 6f 6e 20 53  ", "Liberation S
01f0: 61 6e 73 22 2c 20 73 61 6e 73 2d 73 65 72 69 66  ans", sans-serif
0200: 3b 0a 20 20 20 20 62 6f 78 2d 73 68 61 64 6f 77  ;.    box-shadow
0210: 3a 20 30 20 30 20 32 70 78 20 31 70 78 20 68 73  : 0 0 2px 1px hs
0220: 6c 61 28 32 31 30 2c 20 35 30 25 2c 20 35 30 25  la(210, 50%, 50%
0230: 2c 20 2e 35 29 3b 0a 20 20 20 20 6c 69 6e 65 2d  , .5);.    line-
0240: 68 65 69 67 68 74 3a 20 6e 6f 72 6d 61 6c 3b 0a  height: normal;.
0250: 20 20 20 20 74 65 78 74 2d 73 68 61 64 6f 77 3a      text-shadow:
0260: 20 6e 6f 6e 65 3b 0a 20 20 20 20 74 65 78 74 2d   none;.    text-
0270: 64 65 63 6f 72 61 74 69 6f 6e 3a 20 6e 6f 6e 65  decoration: none
0280: 3b 0a 7d 0a 2e 67 72 61 6d 6d 61 6c 65 63 74 65  ;.}..grammalecte
0290: 5f 70 61 6e 65 6c 20 69 6d 67 20 7b 0a 20 20 20  _panel img {.   
02a0: 20 64 69 73 70 6c 61 79 3a 20 69 6e 6c 69 6e 65   display: inline
02b0: 2d 62 6c 6f 63 6b 3b 0a 20 20 20 20 6d 61 72 67  -block;.    marg
02c0: 69 6e 3a 20 30 3b 0a 20 20 20 20 70 61 64 64 69  in: 0;.    paddi
02d0: 6e 67 3a 20 30 3b 0a 7d 0a 0a 2e 67 72 61 6d 6d  ng: 0;.}...gramm
02e0: 61 6c 65 63 74 65 5f 70 61 6e 65 6c 5f 62 61 72  alecte_panel_bar
02f0: 20 7b 0a 20 20 20 20 70 6f 73 69 74 69 6f 6e 3a   {.    position:
0300: 20 73 74 69 63 6b 79 3b 0a 20 20 20 20 77 69 64   sticky;.    wid
0310: 74 68 3a 20 31 30 30 25 3b 0a 20 20 20 20 62 61  th: 100%;.    ba
0320: 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 20  ckground-color: 
0330: 68 73 6c 28 32 31 30 2c 20 30 25 2c 20 39 30 25  hsl(210, 0%, 90%
0340: 29 3b 0a 20 20 20 20 62 6f 72 64 65 72 2d 72 61  );.    border-ra
0350: 64 69 75 73 3a 20 31 30 70 78 20 31 30 70 78 20  dius: 10px 10px 
0360: 30 20 30 3b 0a 20 20 20 20 62 6f 72 64 65 72 2d  0 0;.    border-
0370: 62 6f 74 74 6f 6d 3a 20 31 70 78 20 73 6f 6c 69  bottom: 1px soli
0380: 64 20 68 73 6c 28 32 31 30 2c 20 31 30 25 2c 20  d hsl(210, 10%, 
0390: 38 30 25 29 3b 0a 20 20 20 20 63 6f 6c 6f 72 3a  80%);.    color:
03a0: 20 68 73 6c 28 32 31 30 2c 20 31 30 25 2c 20 34   hsl(210, 10%, 4
03b0: 25 29 3b 0a 20 20 20 20 66 6f 6e 74 2d 73 69 7a  %);.    font-siz
03c0: 65 3a 20 32 30 70 78 3b 0a 7d 0a 2e 67 72 61 6d  e: 20px;.}..gram
03d0: 6d 61 6c 65 63 74 65 5f 70 61 6e 65 6c 5f 74 69  malecte_panel_ti
03e0: 74 6c 65 20 7b 0a 20 20 20 20 70 61 64 64 69 6e  tle {.    paddin
03f0: 67 3a 20 31 30 70 78 20 32 30 70 78 3b 0a 7d 0a  g: 10px 20px;.}.
0400: 2e 67 72 61 6d 6d 61 6c 65 63 74 65 5f 70 61 6e  .grammalecte_pan
0410: 65 6c 5f 6c 61 62 65 6c 20 7b 0a 20 20 20 20 64  el_label {.    d
0420: 69 73 70 6c 61 79 3a 20 69 6e 6c 69 6e 65 2d 62  isplay: inline-b
0430: 6c 6f 63 6b 3b 0a 20 20 20 20 70 61 64 64 69 6e  lock;.    paddin
0440: 67 3a 20 30 20 31 30 70 78 3b 0a 7d 0a 0a 2e 67  g: 0 10px;.}...g
0450: 72 61 6d 6d 61 6c 65 63 74 65 5f 70 61 6e 65 6c  rammalecte_panel
0460: 5f 63 6f 6d 6d 61 6e 64 73 20 7b 0a 20 20 20 20  _commands {.    
0470: 66 6c 6f 61 74 3a 20 72 69 67 68 74 3b 0a 7d 0a  float: right;.}.
0480: 2e 67 72 61 6d 6d 61 6c 65 63 74 65 5f 63 6f 70  .grammalecte_cop
0490: 79 5f 62 75 74 74 6f 6e 20 7b 0a 20 20 20 20 64  y_button {.    d
04a0: 69 73 70 6c 61 79 3a 20 69 6e 6c 69 6e 65 2d 62  isplay: inline-b
04b0: 6c 6f 63 6b 3b 0a 20 20 20 20 70 61 64 64 69 6e  lock;.    paddin
04c0: 67 3a 20 32 70 78 20 31 30 70 78 3b 0a 20 20 20  g: 2px 10px;.   
04d0: 20 62 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f   background-colo
04e0: 72 3a 20 68 73 6c 28 31 35 30 2c 20 38 30 25 2c  r: hsl(150, 80%,
04f0: 20 33 30 25 29 3b 0a 20 20 20 20 62 6f 72 64 65   30%);.    borde
0500: 72 2d 72 61 64 69 75 73 3a 20 30 20 30 20 30 20  r-radius: 0 0 0 
0510: 33 70 78 3b 0a 20 20 20 20 66 6f 6e 74 2d 73 69  3px;.    font-si
0520: 7a 65 3a 20 32 32 70 78 3b 0a 20 20 20 20 66 6f  ze: 22px;.    fo
0530: 6e 74 2d 77 65 69 67 68 74 3a 20 62 6f 6c 64 3b  nt-weight: bold;
0540: 0a 20 20 20 20 63 6f 6c 6f 72 3a 20 68 73 6c 28  .    color: hsl(
0550: 31 35 30 2c 20 30 25 2c 20 31 30 30 25 29 3b 0a  150, 0%, 100%);.
0560: 20 20 20 20 74 65 78 74 2d 61 6c 69 67 6e 3a 20      text-align: 
0570: 63 65 6e 74 65 72 3b 0a 20 20 20 20 63 75 72 73  center;.    curs
0580: 6f 72 3a 20 70 6f 69 6e 74 65 72 3b 0a 7d 0a 2e  or: pointer;.}..
0590: 67 72 61 6d 6d 61 6c 65 63 74 65 5f 63 6f 70 79  grammalecte_copy
05a0: 5f 62 75 74 74 6f 6e 3a 68 6f 76 65 72 20 7b 0a  _button:hover {.
05b0: 20 20 20 20 62 61 63 6b 67 72 6f 75 6e 64 2d 63      background-c
05c0: 6f 6c 6f 72 3a 20 68 73 6c 28 31 35 30 2c 20 31  olor: hsl(150, 1
05d0: 30 30 25 2c 20 34 30 25 29 3b 0a 7d 0a 2e 67 72  00%, 40%);.}..gr
05e0: 61 6d 6d 61 6c 65 63 74 65 5f 6d 6f 76 65 5f 62  ammalecte_move_b
05f0: 75 74 74 6f 6e 20 7b 0a 20 20 20 20 64 69 73 70  utton {.    disp
0600: 6c 61 79 3a 20 69 6e 6c 69 6e 65 2d 62 6c 6f 63  lay: inline-bloc
0610: 6b 3b 0a 20 20 20 20 70 61 64 64 69 6e 67 3a 20  k;.    padding: 
0620: 32 70 78 20 35 70 78 3b 0a 20 20 20 20 62 61 63  2px 5px;.    bac
0630: 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 20 68  kground-color: h
0640: 73 6c 28 31 38 30 2c 20 38 30 25 2c 20 35 30 25  sl(180, 80%, 50%
0650: 29 3b 0a 20 20 20 20 66 6f 6e 74 2d 73 69 7a 65  );.    font-size
0660: 3a 20 32 32 70 78 3b 0a 20 20 20 20 66 6f 6e 74  : 22px;.    font
0670: 2d 77 65 69 67 68 74 3a 20 62 6f 6c 64 3b 0a 20  -weight: bold;. 
0680: 20 20 20 63 6f 6c 6f 72 3a 20 68 73 6c 28 31 38     color: hsl(18
0690: 30 2c 20 30 25 2c 20 31 30 30 25 29 3b 0a 20 20  0, 0%, 100%);.  
06a0: 20 20 74 65 78 74 2d 61 6c 69 67 6e 3a 20 63 65    text-align: ce
06b0: 6e 74 65 72 3b 0a 20 20 20 20 63 75 72 73 6f 72  nter;.    cursor
06c0: 3a 20 70 6f 69 6e 74 65 72 3b 0a 7d 0a 2e 67 72  : pointer;.}..gr
06d0: 61 6d 6d 61 6c 65 63 74 65 5f 6d 6f 76 65 5f 62  ammalecte_move_b
06e0: 75 74 74 6f 6e 3a 68 6f 76 65 72 20 7b 0a 20 20  utton:hover {.  
06f0: 20 20 62 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c    background-col
0700: 6f 72 3a 20 68 73 6c 28 31 38 30 2c 20 31 30 30  or: hsl(180, 100
0710: 25 2c 20 36 30 25 29 3b 0a 7d 0a 2e 67 72 61 6d  %, 60%);.}..gram
0720: 6d 61 6c 65 63 74 65 5f 63 6c 6f 73 65 5f 62 75  malecte_close_bu
0730: 74 74 6f 6e 20 7b 0a 20 20 20 20 64 69 73 70 6c  tton {.    displ
0740: 61 79 3a 20 69 6e 6c 69 6e 65 2d 62 6c 6f 63 6b  ay: inline-block
0750: 3b 0a 20 20 20 20 70 61 64 64 69 6e 67 3a 20 32  ;.    padding: 2
0760: 70 78 20 31 30 70 78 3b 0a 20 20 20 20 62 6f 72  px 10px;.    bor
0770: 64 65 72 2d 72 61 64 69 75 73 3a 20 30 20 38 70  der-radius: 0 8p
0780: 78 20 30 20 30 3b 0a 20 20 20 20 62 61 63 6b 67  x 0 0;.    backg
0790: 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 20 68 73 6c  round-color: hsl
07a0: 28 30 2c 20 38 30 25 2c 20 35 30 25 29 3b 0a 20  (0, 80%, 50%);. 
07b0: 20 20 20 66 6f 6e 74 2d 73 69 7a 65 3a 20 32 32     font-size: 22
07c0: 70 78 3b 0a 20 20 20 20 66 6f 6e 74 2d 77 65 69  px;.    font-wei
07d0: 67 68 74 3a 20 62 6f 6c 64 3b 0a 20 20 20 20 63  ght: bold;.    c
07e0: 6f 6c 6f 72 3a 20 68 73 6c 28 32 31 30 2c 20 30  olor: hsl(210, 0
07f0: 25 2c 20 31 30 30 25 29 3b 0a 20 20 20 20 74 65  %, 100%);.    te
0800: 78 74 2d 61 6c 69 67 6e 3a 20 63 65 6e 74 65 72  xt-align: center
0810: 3b 0a 20 20 20 20 63 75 72 73 6f 72 3a 20 70 6f  ;.    cursor: po
0820: 69 6e 74 65 72 3b 0a 7d 0a 2e 67 72 61 6d 6d 61  inter;.}..gramma
0830: 6c 65 63 74 65 5f 63 6c 6f 73 65 5f 62 75 74 74  lecte_close_butt
0840: 6f 6e 3a 68 6f 76 65 72 20 7b 0a 20 20 20 20 62  on:hover {.    b
0850: 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a  ackground-color:
0860: 20 68 73 6c 28 30 2c 20 31 30 30 25 2c 20 36 30   hsl(0, 100%, 60
0870: 25 29 3b 0a 7d 0a 0a 2e 67 72 61 6d 6d 61 6c 65  %);.}...grammale
0880: 63 74 65 5f 70 61 6e 65 6c 5f 63 6f 6e 74 65 6e  cte_panel_conten
0890: 74 20 7b 0a 20 20 20 20 70 6f 73 69 74 69 6f 6e  t {.    position
08a0: 3a 20 61 62 73 6f 6c 75 74 65 3b 0a 20 20 20 20  : absolute;.    
08b0: 6d 69 6e 2d 77 69 64 74 68 3a 20 31 30 30 25 3b  min-width: 100%;
08c0: 0a 20 20 20 20 68 65 69 67 68 74 3a 20 63 61 6c  .    height: cal
08d0: 63 28 31 30 30 25 20 2d 20 35 35 70 78 29 3b 20  c(100% - 55px); 
08e0: 2f 2a 20 70 61 6e 65 6c 20 68 65 69 67 68 74 20  /* panel height 
08f0: 2d 20 74 69 74 6c 65 5f 62 61 72 20 2a 2f 0a 20  - title_bar */. 
0900: 20 20 20 6f 76 65 72 66 6c 6f 77 3a 20 61 75 74     overflow: aut
0910: 6f 3b 0a 7d 0a 0a 0a 2f 2a 0a 20 20 20 20 53 70  o;.}.../*.    Sp
0920: 69 6e 6e 65 72 0a 2a 2f 0a 2e 67 72 61 6d 6d 61  inner.*/..gramma
0930: 6c 65 63 74 65 5f 73 70 69 6e 6e 65 72 20 7b 0a  lecte_spinner {.
0940: 20 20 20 20 76 69 73 69 62 69 6c 69 74 79 3a 20      visibility: 
0950: 68 69 64 64 65 6e 3b 0a 20 20 20 20 77 69 64 74  hidden;.    widt
0960: 68 3a 20 32 30 70 78 3b 0a 20 20 20 20 68 65 69  h: 20px;.    hei
0970: 67 68 74 3a 20 32 30 70 78 3b 0a 20 20 20 20 70  ght: 20px;.    p
0980: 6f 73 69 74 69 6f 6e 3a 20 61 62 73 6f 6c 75 74  osition: absolut
0990: 65 3b 0a 20 20 20 20 74 6f 70 3a 20 30 70 78 3b  e;.    top: 0px;
09a0: 0a 20 20 20 20 72 69 67 68 74 3a 20 32 30 30 70  .    right: 200p
09b0: 78 3b 0a 20 20 20 20 62 61 63 6b 67 72 6f 75 6e  x;.    backgroun
09c0: 64 2d 63 6f 6c 6f 72 3a 20 68 73 6c 61 28 32 31  d-color: hsla(21
09d0: 30 2c 20 38 30 25 2c 20 38 30 25 2c 20 2e 35 29  0, 80%, 80%, .5)
09e0: 3b 0a 20 20 20 20 62 6f 72 64 65 72 3a 20 31 30  ;.    border: 10
09f0: 70 78 20 73 6f 6c 69 64 20 68 73 6c 61 28 32 31  px solid hsla(21
0a00: 30 2c 20 38 30 25 2c 20 36 30 25 2c 20 2e 35 29  0, 80%, 60%, .5)
0a10: 3b 0a 20 20 20 20 62 6f 72 64 65 72 2d 74 6f 70  ;.    border-top
0a20: 3a 20 31 30 70 78 20 73 6f 6c 69 64 20 68 73 6c  : 10px solid hsl
0a30: 61 28 32 31 30 2c 20 31 30 30 25 2c 20 34 30 25  a(210, 100%, 40%
0a40: 2c 20 2e 37 29 3b 0a 20 20 20 20 62 6f 72 64 65  , .7);.    borde
0a50: 72 2d 62 6f 74 74 6f 6d 3a 20 31 30 70 78 20 73  r-bottom: 10px s
0a60: 6f 6c 69 64 20 68 73 6c 61 28 32 31 30 2c 20 31  olid hsla(210, 1
0a70: 30 30 25 2c 20 34 30 25 2c 20 2e 37 29 3b 0a 20  00%, 40%, .7);. 
0a80: 20 20 20 62 6f 72 64 65 72 2d 72 61 64 69 75 73     border-radius
0a90: 3a 20 35 30 25 3b 0a 20 20 20 20 74 65 78 74 2d  : 50%;.    text-
0aa0: 61 6c 69 67 6e 3a 20 63 65 6e 74 65 72 3b 0a 20  align: center;. 
0ab0: 20 20 20 63 75 72 73 6f 72 3a 20 70 6f 69 6e 74     cursor: point
0ac0: 65 72 3b 0a 20 20 20 20 62 6f 78 2d 73 68 61 64  er;.    box-shad
0ad0: 6f 77 3a 20 30 20 30 20 30 20 30 20 68 73 6c 61  ow: 0 0 0 0 hsla
0ae0: 28 32 31 30 2c 20 35 30 25 2c 20 35 30 25 2c 20  (210, 50%, 50%, 
0af0: 2e 35 29 3b 0a 20 20 20 20 61 6e 69 6d 61 74 69  .5);.    animati
0b00: 6f 6e 3a 20 67 72 61 6d 6d 61 6c 65 63 74 65 2d  on: grammalecte-
0b10: 73 70 69 6e 2d 62 69 67 20 2e 35 73 20 6c 69 6e  spin-big .5s lin
0b20: 65 61 72 20 69 6e 66 69 6e 69 74 65 3b 0a 7d 0a  ear infinite;.}.
0b30: 0a 40 6b 65 79 66 72 61 6d 65 73 20 67 72 61 6d  .@keyframes gram
0b40: 6d 61 6c 65 63 74 65 2d 73 70 69 6e 2d 62 69 67  malecte-spin-big
0b50: 20 7b 0a 20 20 20 20 30 25 20 7b 0a 20 20 20 20   {.    0% {.    
0b60: 20 20 20 20 74 72 61 6e 73 66 6f 72 6d 3a 20 72      transform: r
0b70: 6f 74 61 74 65 28 30 64 65 67 29 20 73 63 61 6c  otate(0deg) scal
0b80: 65 28 31 29 3b 0a 20 20 20 20 20 20 20 20 62 6f  e(1);.        bo
0b90: 72 64 65 72 2d 74 6f 70 3a 20 31 30 70 78 20 73  rder-top: 10px s
0ba0: 6f 6c 69 64 20 68 73 6c 61 28 32 31 30 2c 20 31  olid hsla(210, 1
0bb0: 30 30 25 2c 20 34 30 25 2c 20 2e 37 29 3b 0a 20  00%, 40%, .7);. 
0bc0: 20 20 20 20 20 20 20 62 6f 72 64 65 72 2d 62 6f         border-bo
0bd0: 74 74 6f 6d 3a 20 31 30 70 78 20 73 6f 6c 69 64  ttom: 10px solid
0be0: 20 68 73 6c 61 28 32 31 30 2c 20 31 30 30 25 2c   hsla(210, 100%,
0bf0: 20 34 30 25 2c 20 2e 37 29 3b 0a 20 20 20 20 7d   40%, .7);.    }
0c00: 0a 20 20 20 20 37 30 25 20 7b 0a 20 20 20 20 20  .    70% {.     
0c10: 20 20 20 74 72 61 6e 73 66 6f 72 6d 3a 20 72 6f     transform: ro
0c20: 74 61 74 65 28 31 38 30 64 65 67 29 20 73 63 61  tate(180deg) sca
0c30: 6c 65 28 2e 38 29 3b 0a 20 20 20 20 20 20 20 20  le(.8);.        
0c40: 62 6f 72 64 65 72 2d 74 6f 70 3a 20 31 30 70 78  border-top: 10px
0c50: 20 73 6f 6c 69 64 20 68 73 6c 61 28 30 2c 20 31   solid hsla(0, 1
0c60: 30 30 25 2c 20 34 30 25 2c 20 2e 37 29 3b 0a 20  00%, 40%, .7);. 
0c70: 20 20 20 20 20 20 20 62 6f 72 64 65 72 2d 62 6f         border-bo
0c80: 74 74 6f 6d 3a 20 31 30 70 78 20 73 6f 6c 69 64  ttom: 10px solid
0c90: 20 68 73 6c 61 28 30 2c 20 31 30 30 25 2c 20 34   hsla(0, 100%, 4
0ca0: 30 25 2c 20 2e 37 29 3b 0a 20 20 20 20 20 20 20  0%, .7);.       
0cb0: 20 62 6f 78 2d 73 68 61 64 6f 77 3a 20 30 20 30   box-shadow: 0 0
0cc0: 20 30 20 32 30 70 78 20 68 73 6c 61 28 32 31 30   0 20px hsla(210
0cd0: 2c 20 35 30 25 2c 20 35 30 25 2c 20 30 29 3b 0a  , 50%, 50%, 0);.
0ce0: 20 20 20 20 7d 0a 20 20 20 20 31 30 30 25 20 7b      }.    100% {
0cf0: 0a 20 20 20 20 20 20 20 20 74 72 61 6e 73 66 6f  .        transfo
0d00: 72 6d 3a 20 72 6f 74 61 74 65 28 33 36 30 64 65  rm: rotate(360de
0d10: 67 29 20 73 63 61 6c 65 28 31 29 3b 0a 20 20 20  g) scale(1);.   
0d20: 20 20 20 20 20 62 6f 72 64 65 72 2d 74 6f 70 3a       border-top:
0d30: 20 31 30 70 78 20 73 6f 6c 69 64 20 68 73 6c 61   10px solid hsla
0d40: 28 32 31 30 2c 20 31 30 30 25 2c 20 34 30 25 2c  (210, 100%, 40%,
0d50: 20 2e 37 29 3b 0a 20 20 20 20 20 20 20 20 62 6f   .7);.        bo
0d60: 72 64 65 72 2d 62 6f 74 74 6f 6d 3a 20 31 30 70  rder-bottom: 10p
0d70: 78 20 73 6f 6c 69 64 20 68 73 6c 61 28 32 31 30  x solid hsla(210
0d80: 2c 20 31 30 30 25 2c 20 34 30 25 2c 20 2e 37 29  , 100%, 40%, .7)
0d90: 3b 0a 20 20 20 20 20 20 20 20 62 6f 78 2d 73 68  ;.        box-sh
0da0: 61 64 6f 77 3a 20 30 20 30 20 30 20 30 20 68 73  adow: 0 0 0 0 hs
0db0: 6c 61 28 32 31 30 2c 20 35 30 25 2c 20 35 30 25  la(210, 50%, 50%
0dc0: 2c 20 30 29 3b 0a 20 20 20 20 7d 0a 7d 0a        , 0);.    }.}.