Grammalecte  Hex Artifact Content

Artifact b1d4b36570ae7c5f08d85b45477c8357cafea9666abcd3ab78be5337746bdce4:


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 64 69 76 2e 67 72 61 6d 6d 61 6c 65 63 74  ..div.grammalect
0040: 65 5f 70 61 6e 65 6c 20 7b 0a 20 20 20 20 61 6c  e_panel {.    al
0050: 6c 3a 20 69 6e 69 74 69 61 6c 3b 0a 20 20 20 20  l: initial;.    
0060: 70 61 64 64 69 6e 67 3a 20 30 3b 0a 20 20 20 20  padding: 0;.    
0070: 6d 61 72 67 69 6e 3a 20 30 3b 0a 20 20 20 20 70  margin: 0;.    p
0080: 6f 73 69 74 69 6f 6e 3a 20 66 69 78 65 64 3b 0a  osition: fixed;.
0090: 20 20 20 20 62 6f 78 2d 73 69 7a 69 6e 67 3a 20      box-sizing: 
00a0: 63 6f 6e 74 65 6e 74 2d 62 6f 78 3b 0a 20 20 20  content-box;.   
00b0: 20 7a 2d 69 6e 64 65 78 3a 20 32 31 34 37 34 38   z-index: 214748
00c0: 33 36 34 31 3b 20 2f 2a 20 6d 61 78 69 6d 75 6d  3641; /* maximum
00d0: 20 69 73 20 32 31 34 37 34 38 33 36 34 37 3a 20   is 2147483647: 
00e0: 68 74 74 70 73 3a 2f 2f 73 74 61 63 6b 6f 76 65  https://stackove
00f0: 72 66 6c 6f 77 2e 63 6f 6d 2f 71 75 65 73 74 69  rflow.com/questi
0100: 6f 6e 73 2f 34 39 31 30 35 32 2f 6d 69 6e 69 6d  ons/491052/minim
0110: 75 6d 2d 61 6e 64 2d 6d 61 78 69 6d 75 6d 2d 76  um-and-maximum-v
0120: 61 6c 75 65 2d 6f 66 2d 7a 2d 69 6e 64 65 78 20  alue-of-z-index 
0130: 2a 2f 0a 20 20 20 20 62 6f 72 64 65 72 3a 20 32  */.    border: 2
0140: 70 78 20 73 6f 6c 69 64 20 68 73 6c 28 32 31 30  px solid hsl(210
0150: 2c 20 35 30 25 2c 20 35 30 25 29 3b 0a 20 20 20  , 50%, 50%);.   
0160: 20 62 6f 72 64 65 72 2d 72 61 64 69 75 73 3a 20   border-radius: 
0170: 31 30 70 78 20 31 30 70 78 20 31 30 70 78 20 31  10px 10px 10px 1
0180: 30 70 78 3b 0a 20 20 20 20 62 61 63 6b 67 72 6f  0px;.    backgro
0190: 75 6e 64 2d 63 6f 6c 6f 72 3a 20 68 73 6c 28 32  und-color: hsl(2
01a0: 31 30 2c 20 30 25 2c 20 31 30 30 25 29 3b 0a 20  10, 0%, 100%);. 
01b0: 20 20 20 63 6f 6c 6f 72 3a 20 68 73 6c 28 30 2c     color: hsl(0,
01c0: 20 30 25 2c 20 30 25 29 3b 0a 20 20 20 20 66 6f   0%, 0%);.    fo
01d0: 6e 74 2d 66 61 6d 69 6c 79 3a 20 22 54 72 65 62  nt-family: "Treb
01e0: 75 63 68 65 74 20 4d 53 22 2c 20 22 46 69 72 61  uchet MS", "Fira
01f0: 20 53 61 6e 73 22 2c 20 22 4c 69 62 65 72 61 74   Sans", "Liberat
0200: 69 6f 6e 20 53 61 6e 73 22 2c 20 73 61 6e 73 2d  ion Sans", sans-
0210: 73 65 72 69 66 3b 0a 20 20 20 20 62 6f 78 2d 73  serif;.    box-s
0220: 68 61 64 6f 77 3a 20 30 20 30 20 31 70 78 20 36  hadow: 0 0 1px 6
0230: 70 78 20 68 73 6c 61 28 32 31 30 2c 20 35 30 25  px hsla(210, 50%
0240: 2c 20 35 30 25 2c 20 2e 35 29 3b 0a 20 20 20 20  , 50%, .5);.    
0250: 6c 69 6e 65 2d 68 65 69 67 68 74 3a 20 6e 6f 72  line-height: nor
0260: 6d 61 6c 3b 0a 20 20 20 20 74 65 78 74 2d 73 68  mal;.    text-sh
0270: 61 64 6f 77 3a 20 6e 6f 6e 65 3b 0a 20 20 20 20  adow: none;.    
0280: 74 65 78 74 2d 64 65 63 6f 72 61 74 69 6f 6e 3a  text-decoration:
0290: 20 6e 6f 6e 65 3b 0a 20 20 20 20 74 65 78 74 2d   none;.    text-
02a0: 61 6c 69 67 6e 3a 20 6c 65 66 74 3b 0a 20 20 20  align: left;.   
02b0: 20 68 79 70 68 65 6e 73 3a 20 6e 6f 6e 65 3b 0a   hyphens: none;.
02c0: 7d 0a 64 69 76 2e 67 72 61 6d 6d 61 6c 65 63 74  }.div.grammalect
02d0: 65 5f 70 61 6e 65 6c 20 69 6d 67 20 7b 0a 20 20  e_panel img {.  
02e0: 20 20 64 69 73 70 6c 61 79 3a 20 69 6e 6c 69 6e    display: inlin
02f0: 65 2d 62 6c 6f 63 6b 3b 0a 20 20 20 20 6d 61 72  e-block;.    mar
0300: 67 69 6e 3a 20 30 3b 0a 20 20 20 20 70 61 64 64  gin: 0;.    padd
0310: 69 6e 67 3a 20 30 3b 0a 7d 0a 0a 64 69 76 2e 67  ing: 0;.}..div.g
0320: 72 61 6d 6d 61 6c 65 63 74 65 5f 70 61 6e 65 6c  rammalecte_panel
0330: 5f 62 61 72 20 7b 0a 20 20 20 20 70 6f 73 69 74  _bar {.    posit
0340: 69 6f 6e 3a 20 73 74 69 63 6b 79 3b 0a 20 20 20  ion: sticky;.   
0350: 20 77 69 64 74 68 3a 20 31 30 30 25 3b 0a 20 20   width: 100%;.  
0360: 20 20 62 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c    background-col
0370: 6f 72 3a 20 68 73 6c 28 32 31 30 2c 20 32 30 25  or: hsl(210, 20%
0380: 2c 20 39 32 25 29 3b 0a 20 20 20 20 62 6f 72 64  , 92%);.    bord
0390: 65 72 2d 72 61 64 69 75 73 3a 20 31 30 70 78 20  er-radius: 10px 
03a0: 31 30 70 78 20 30 20 30 3b 0a 20 20 20 20 62 6f  10px 0 0;.    bo
03b0: 72 64 65 72 2d 62 6f 74 74 6f 6d 3a 20 31 70 78  rder-bottom: 1px
03c0: 20 73 6f 6c 69 64 20 68 73 6c 28 32 31 30 2c 20   solid hsl(210, 
03d0: 32 30 25 2c 20 38 36 25 29 3b 0a 20 20 20 20 63  20%, 86%);.    c
03e0: 6f 6c 6f 72 3a 20 68 73 6c 28 32 31 30 2c 20 33  olor: hsl(210, 3
03f0: 30 25 2c 20 34 30 25 29 3b 0a 20 20 20 20 66 6f  0%, 40%);.    fo
0400: 6e 74 2d 73 69 7a 65 3a 20 32 30 70 78 3b 0a 7d  nt-size: 20px;.}
0410: 0a 64 69 76 2e 67 72 61 6d 6d 61 6c 65 63 74 65  .div.grammalecte
0420: 5f 70 61 6e 65 6c 5f 74 69 74 6c 65 20 7b 0a 20  _panel_title {. 
0430: 20 20 20 70 61 64 64 69 6e 67 3a 20 31 30 70 78     padding: 10px
0440: 20 32 30 70 78 3b 0a 7d 0a 64 69 76 2e 67 72 61   20px;.}.div.gra
0450: 6d 6d 61 6c 65 63 74 65 5f 70 61 6e 65 6c 5f 6c  mmalecte_panel_l
0460: 61 62 65 6c 20 7b 0a 20 20 20 20 64 69 73 70 6c  abel {.    displ
0470: 61 79 3a 20 69 6e 6c 69 6e 65 2d 62 6c 6f 63 6b  ay: inline-block
0480: 3b 0a 20 20 20 20 70 61 64 64 69 6e 67 3a 20 30  ;.    padding: 0
0490: 20 31 30 70 78 3b 0a 20 20 20 20 66 6f 6e 74 2d   10px;.    font-
04a0: 66 61 6d 69 6c 79 3a 20 22 54 72 65 62 75 63 68  family: "Trebuch
04b0: 65 74 20 4d 53 22 2c 20 22 46 69 72 61 20 53 61  et MS", "Fira Sa
04c0: 6e 73 22 2c 20 22 4c 69 62 65 72 61 74 69 6f 6e  ns", "Liberation
04d0: 20 53 61 6e 73 22 2c 20 73 61 6e 73 2d 73 65 72   Sans", sans-ser
04e0: 69 66 3b 0a 7d 0a 64 69 76 2e 67 72 61 6d 6d 61  if;.}.div.gramma
04f0: 6c 65 63 74 65 5f 70 61 6e 65 6c 5f 69 6e 76 69  lecte_panel_invi
0500: 73 69 62 6c 65 5f 6d 61 72 6b 65 72 20 7b 0a 20  sible_marker {. 
0510: 20 20 20 70 6f 73 69 74 69 6f 6e 3a 20 61 62 73     position: abs
0520: 6f 6c 75 74 65 3b 0a 20 20 20 20 2f 2a 76 69 73  olute;.    /*vis
0530: 69 62 69 6c 69 74 79 3a 20 68 69 64 64 65 6e 3b  ibility: hidden;
0540: 2a 2f 0a 20 20 20 20 66 6f 6e 74 2d 73 69 7a 65  */.    font-size
0550: 3a 20 36 70 78 3b 0a 20 20 20 20 63 6f 6c 6f 72  : 6px;.    color
0560: 3a 20 68 73 6c 28 32 31 30 2c 20 30 25 2c 20 39  : hsl(210, 0%, 9
0570: 30 25 29 3b 20 2f 2a 20 73 61 6d 65 20 63 6f 6c  0%); /* same col
0580: 6f 72 20 74 68 61 6e 20 70 61 6e 65 6c 5f 62 61  or than panel_ba
0590: 72 20 62 61 63 6b 67 72 6f 75 6e 64 20 2a 2f 0a  r background */.
05a0: 7d 0a 0a 64 69 76 2e 67 72 61 6d 6d 61 6c 65 63  }..div.grammalec
05b0: 74 65 5f 70 61 6e 65 6c 5f 63 6f 6d 6d 61 6e 64  te_panel_command
05c0: 73 20 7b 0a 20 20 20 20 66 6c 6f 61 74 3a 20 72  s {.    float: r
05d0: 69 67 68 74 3b 0a 7d 0a 64 69 76 2e 67 72 61 6d  ight;.}.div.gram
05e0: 6d 61 6c 65 63 74 65 5f 63 6f 70 79 5f 62 75 74  malecte_copy_but
05f0: 74 6f 6e 20 7b 0a 20 20 20 20 64 69 73 70 6c 61  ton {.    displa
0600: 79 3a 20 69 6e 6c 69 6e 65 2d 62 6c 6f 63 6b 3b  y: inline-block;
0610: 0a 20 20 20 20 70 61 64 64 69 6e 67 3a 20 32 70  .    padding: 2p
0620: 78 20 31 30 70 78 3b 0a 20 20 20 20 62 61 63 6b  x 10px;.    back
0630: 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 20 68 73  ground-color: hs
0640: 6c 28 31 35 30 2c 20 38 30 25 2c 20 33 30 25 29  l(150, 80%, 30%)
0650: 3b 0a 20 20 20 20 62 6f 72 64 65 72 2d 72 61 64  ;.    border-rad
0660: 69 75 73 3a 20 30 20 30 20 30 20 33 70 78 3b 0a  ius: 0 0 0 3px;.
0670: 20 20 20 20 66 6f 6e 74 2d 66 61 6d 69 6c 79 3a      font-family:
0680: 20 22 54 72 65 62 75 63 68 65 74 20 4d 53 22 2c   "Trebuchet MS",
0690: 20 22 46 69 72 61 20 53 61 6e 73 22 2c 20 22 4c   "Fira Sans", "L
06a0: 69 62 65 72 61 74 69 6f 6e 20 53 61 6e 73 22 2c  iberation Sans",
06b0: 20 73 61 6e 73 2d 73 65 72 69 66 3b 0a 20 20 20   sans-serif;.   
06c0: 20 66 6f 6e 74 2d 73 69 7a 65 3a 20 32 32 70 78   font-size: 22px
06d0: 3b 0a 20 20 20 20 66 6f 6e 74 2d 77 65 69 67 68  ;.    font-weigh
06e0: 74 3a 20 62 6f 6c 64 3b 0a 20 20 20 20 63 6f 6c  t: bold;.    col
06f0: 6f 72 3a 20 68 73 6c 28 31 35 30 2c 20 30 25 2c  or: hsl(150, 0%,
0700: 20 31 30 30 25 29 3b 0a 20 20 20 20 74 65 78 74   100%);.    text
0710: 2d 61 6c 69 67 6e 3a 20 63 65 6e 74 65 72 3b 0a  -align: center;.
0720: 20 20 20 20 63 75 72 73 6f 72 3a 20 70 6f 69 6e      cursor: poin
0730: 74 65 72 3b 0a 7d 0a 64 69 76 2e 67 72 61 6d 6d  ter;.}.div.gramm
0740: 61 6c 65 63 74 65 5f 63 6f 70 79 5f 62 75 74 74  alecte_copy_butt
0750: 6f 6e 3a 68 6f 76 65 72 20 7b 0a 20 20 20 20 62  on:hover {.    b
0760: 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a  ackground-color:
0770: 20 68 73 6c 28 31 35 30 2c 20 39 30 25 2c 20 33   hsl(150, 90%, 3
0780: 35 25 29 3b 0a 7d 0a 64 69 76 2e 67 72 61 6d 6d  5%);.}.div.gramm
0790: 61 6c 65 63 74 65 5f 6d 6f 76 65 5f 62 75 74 74  alecte_move_butt
07a0: 6f 6e 20 7b 0a 20 20 20 20 64 69 73 70 6c 61 79  on {.    display
07b0: 3a 20 69 6e 6c 69 6e 65 2d 62 6c 6f 63 6b 3b 0a  : inline-block;.
07c0: 20 20 20 20 70 61 64 64 69 6e 67 3a 20 32 70 78      padding: 2px
07d0: 20 35 70 78 3b 0a 20 20 20 20 62 61 63 6b 67 72   5px;.    backgr
07e0: 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 20 68 73 6c 28  ound-color: hsl(
07f0: 31 38 30 2c 20 35 30 25 2c 20 36 30 25 29 3b 0a  180, 50%, 60%);.
0800: 20 20 20 20 66 6f 6e 74 2d 66 61 6d 69 6c 79 3a      font-family:
0810: 20 22 54 72 65 62 75 63 68 65 74 20 4d 53 22 2c   "Trebuchet MS",
0820: 20 22 46 69 72 61 20 53 61 6e 73 22 2c 20 22 4c   "Fira Sans", "L
0830: 69 62 65 72 61 74 69 6f 6e 20 53 61 6e 73 22 2c  iberation Sans",
0840: 20 73 61 6e 73 2d 73 65 72 69 66 3b 0a 20 20 20   sans-serif;.   
0850: 20 66 6f 6e 74 2d 73 69 7a 65 3a 20 32 32 70 78   font-size: 22px
0860: 3b 0a 20 20 20 20 66 6f 6e 74 2d 77 65 69 67 68  ;.    font-weigh
0870: 74 3a 20 62 6f 6c 64 3b 0a 20 20 20 20 63 6f 6c  t: bold;.    col
0880: 6f 72 3a 20 68 73 6c 28 31 38 30 2c 20 30 25 2c  or: hsl(180, 0%,
0890: 20 31 30 30 25 29 3b 0a 20 20 20 20 74 65 78 74   100%);.    text
08a0: 2d 61 6c 69 67 6e 3a 20 63 65 6e 74 65 72 3b 0a  -align: center;.
08b0: 20 20 20 20 63 75 72 73 6f 72 3a 20 70 6f 69 6e      cursor: poin
08c0: 74 65 72 3b 0a 7d 0a 64 69 76 2e 67 72 61 6d 6d  ter;.}.div.gramm
08d0: 61 6c 65 63 74 65 5f 6d 6f 76 65 5f 62 75 74 74  alecte_move_butt
08e0: 6f 6e 3a 68 6f 76 65 72 20 7b 0a 20 20 20 20 62  on:hover {.    b
08f0: 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a  ackground-color:
0900: 20 68 73 6c 28 31 38 30 2c 20 38 30 25 2c 20 36   hsl(180, 80%, 6
0910: 35 25 29 3b 0a 7d 0a 64 69 76 2e 67 72 61 6d 6d  5%);.}.div.gramm
0920: 61 6c 65 63 74 65 5f 63 6c 6f 73 65 5f 62 75 74  alecte_close_but
0930: 74 6f 6e 20 7b 0a 20 20 20 20 64 69 73 70 6c 61  ton {.    displa
0940: 79 3a 20 69 6e 6c 69 6e 65 2d 62 6c 6f 63 6b 3b  y: inline-block;
0950: 0a 20 20 20 20 70 61 64 64 69 6e 67 3a 20 32 70  .    padding: 2p
0960: 78 20 31 30 70 78 3b 0a 20 20 20 20 62 6f 72 64  x 10px;.    bord
0970: 65 72 2d 72 61 64 69 75 73 3a 20 30 20 38 70 78  er-radius: 0 8px
0980: 20 30 20 30 3b 0a 20 20 20 20 62 61 63 6b 67 72   0 0;.    backgr
0990: 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 20 68 73 6c 28  ound-color: hsl(
09a0: 30 2c 20 38 30 25 2c 20 35 30 25 29 3b 0a 20 20  0, 80%, 50%);.  
09b0: 20 20 66 6f 6e 74 2d 66 61 6d 69 6c 79 3a 20 22    font-family: "
09c0: 54 72 65 62 75 63 68 65 74 20 4d 53 22 2c 20 22  Trebuchet MS", "
09d0: 46 69 72 61 20 53 61 6e 73 22 2c 20 22 4c 69 62  Fira Sans", "Lib
09e0: 65 72 61 74 69 6f 6e 20 53 61 6e 73 22 2c 20 73  eration Sans", s
09f0: 61 6e 73 2d 73 65 72 69 66 3b 0a 20 20 20 20 66  ans-serif;.    f
0a00: 6f 6e 74 2d 73 69 7a 65 3a 20 32 32 70 78 3b 0a  ont-size: 22px;.
0a10: 20 20 20 20 66 6f 6e 74 2d 77 65 69 67 68 74 3a      font-weight:
0a20: 20 62 6f 6c 64 3b 0a 20 20 20 20 63 6f 6c 6f 72   bold;.    color
0a30: 3a 20 68 73 6c 28 32 31 30 2c 20 30 25 2c 20 31  : hsl(210, 0%, 1
0a40: 30 30 25 29 3b 0a 20 20 20 20 74 65 78 74 2d 61  00%);.    text-a
0a50: 6c 69 67 6e 3a 20 63 65 6e 74 65 72 3b 0a 20 20  lign: center;.  
0a60: 20 20 63 75 72 73 6f 72 3a 20 70 6f 69 6e 74 65    cursor: pointe
0a70: 72 3b 0a 7d 0a 64 69 76 2e 67 72 61 6d 6d 61 6c  r;.}.div.grammal
0a80: 65 63 74 65 5f 63 6c 6f 73 65 5f 62 75 74 74 6f  ecte_close_butto
0a90: 6e 3a 68 6f 76 65 72 20 7b 0a 20 20 20 20 62 61  n:hover {.    ba
0aa0: 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 20  ckground-color: 
0ab0: 68 73 6c 28 30 2c 20 31 30 30 25 2c 20 36 30 25  hsl(0, 100%, 60%
0ac0: 29 3b 0a 7d 0a 0a 64 69 76 2e 67 72 61 6d 6d 61  );.}..div.gramma
0ad0: 6c 65 63 74 65 5f 70 61 6e 65 6c 5f 63 6f 6e 74  lecte_panel_cont
0ae0: 65 6e 74 20 7b 0a 20 20 20 20 70 6f 73 69 74 69  ent {.    positi
0af0: 6f 6e 3a 20 61 62 73 6f 6c 75 74 65 3b 0a 20 20  on: absolute;.  
0b00: 20 20 77 69 64 74 68 3a 20 31 30 30 25 3b 0a 20    width: 100%;. 
0b10: 20 20 20 68 65 69 67 68 74 3a 20 63 61 6c 63 28     height: calc(
0b20: 31 30 30 25 20 2d 20 35 35 70 78 29 3b 20 2f 2a  100% - 55px); /*
0b30: 20 70 61 6e 65 6c 20 68 65 69 67 68 74 20 2d 20   panel height - 
0b40: 74 69 74 6c 65 5f 62 61 72 20 2a 2f 0a 20 20 20  title_bar */.   
0b50: 20 6f 76 65 72 66 6c 6f 77 3a 20 61 75 74 6f 3b   overflow: auto;
0b60: 0a 7d 0a 0a 64 69 76 2e 67 72 61 6d 6d 61 6c 65  .}..div.grammale
0b70: 63 74 65 5f 70 61 6e 65 6c 5f 6d 65 73 73 61 67  cte_panel_messag
0b80: 65 20 7b 0a 20 20 20 20 6d 61 72 67 69 6e 3a 20  e {.    margin: 
0b90: 31 30 70 78 3b 0a 20 20 20 20 70 61 64 64 69 6e  10px;.    paddin
0ba0: 67 3a 20 31 30 70 78 3b 0a 20 20 20 20 62 6f 72  g: 10px;.    bor
0bb0: 64 65 72 2d 72 61 64 69 75 73 3a 20 35 70 78 3b  der-radius: 5px;
0bc0: 0a 20 20 20 20 62 61 63 6b 67 72 6f 75 6e 64 2d  .    background-
0bd0: 63 6f 6c 6f 72 3a 20 68 73 6c 28 30 2c 20 35 30  color: hsl(0, 50
0be0: 25 2c 20 34 30 25 29 3b 0a 20 20 20 20 63 6f 6c  %, 40%);.    col
0bf0: 6f 72 3a 20 68 73 6c 28 30 2c 20 35 30 25 2c 20  or: hsl(0, 50%, 
0c00: 39 36 25 29 3b 0a 20 20 20 20 66 6f 6e 74 2d 66  96%);.    font-f
0c10: 61 6d 69 6c 79 3a 20 22 54 72 65 62 75 63 68 65  amily: "Trebuche
0c20: 74 20 4d 53 22 2c 20 22 46 69 72 61 20 53 61 6e  t MS", "Fira San
0c30: 73 22 2c 20 22 4c 69 62 65 72 61 74 69 6f 6e 20  s", "Liberation 
0c40: 53 61 6e 73 22 2c 20 73 61 6e 73 2d 73 65 72 69  Sans", sans-seri
0c50: 66 3b 0a 20 20 20 20 66 6f 6e 74 2d 73 69 7a 65  f;.    font-size
0c60: 3a 20 31 36 70 78 3b 0a 7d 0a 0a 0a 2f 2a 0a 20  : 16px;.}.../*. 
0c70: 20 20 20 53 70 69 6e 6e 65 72 0a 2a 2f 0a 64 69     Spinner.*/.di
0c80: 76 2e 67 72 61 6d 6d 61 6c 65 63 74 65 5f 73 70  v.grammalecte_sp
0c90: 69 6e 6e 65 72 20 7b 0a 20 20 20 20 76 69 73 69  inner {.    visi
0ca0: 62 69 6c 69 74 79 3a 20 68 69 64 64 65 6e 3b 0a  bility: hidden;.
0cb0: 20 20 20 20 62 6f 78 2d 73 69 7a 69 6e 67 3a 20      box-sizing: 
0cc0: 62 6f 72 64 65 72 2d 62 6f 78 3b 0a 20 20 20 20  border-box;.    
0cd0: 77 69 64 74 68 3a 20 34 30 70 78 3b 0a 20 20 20  width: 40px;.   
0ce0: 20 68 65 69 67 68 74 3a 20 34 30 70 78 3b 0a 20   height: 40px;. 
0cf0: 20 20 20 70 6f 73 69 74 69 6f 6e 3a 20 61 62 73     position: abs
0d00: 6f 6c 75 74 65 3b 0a 20 20 20 20 74 6f 70 3a 20  olute;.    top: 
0d10: 32 70 78 3b 0a 20 20 20 20 72 69 67 68 74 3a 20  2px;.    right: 
0d20: 32 30 30 70 78 3b 0a 20 20 20 20 62 61 63 6b 67  200px;.    backg
0d30: 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 20 68 73 6c  round-color: hsl
0d40: 61 28 32 31 30 2c 20 31 30 30 25 2c 20 33 30 25  a(210, 100%, 30%
0d50: 2c 20 2e 31 29 3b 0a 20 20 20 20 62 6f 72 64 65  , .1);.    borde
0d60: 72 3a 20 33 70 78 20 73 6f 6c 69 64 20 68 73 6c  r: 3px solid hsl
0d70: 61 28 32 31 30 2c 20 31 30 30 25 2c 20 33 30 25  a(210, 100%, 30%
0d80: 2c 20 2e 31 29 3b 0a 20 20 20 20 62 6f 72 64 65  , .1);.    borde
0d90: 72 2d 74 6f 70 3a 20 33 70 78 20 73 6f 6c 69 64  r-top: 3px solid
0da0: 20 68 73 6c 61 28 32 31 30 2c 20 31 30 30 25 2c   hsla(210, 100%,
0db0: 20 35 30 25 2c 20 2e 38 29 3b 0a 20 20 20 20 62   50%, .8);.    b
0dc0: 6f 72 64 65 72 2d 72 61 64 69 75 73 3a 20 35 30  order-radius: 50
0dd0: 25 3b 0a 20 20 20 20 74 65 78 74 2d 61 6c 69 67  %;.    text-alig
0de0: 6e 3a 20 63 65 6e 74 65 72 3b 0a 20 20 20 20 63  n: center;.    c
0df0: 75 72 73 6f 72 3a 20 70 6f 69 6e 74 65 72 3b 0a  ursor: pointer;.
0e00: 20 20 20 20 62 6f 78 2d 73 68 61 64 6f 77 3a 20      box-shadow: 
0e10: 30 20 30 20 30 20 30 20 68 73 6c 61 28 32 31 30  0 0 0 0 hsla(210
0e20: 2c 20 38 30 25 2c 20 35 30 25 2c 20 2e 35 29 3b  , 80%, 50%, .5);
0e30: 0a 20 20 20 20 61 6e 69 6d 61 74 69 6f 6e 3a 20  .    animation: 
0e40: 67 72 61 6d 6d 61 6c 65 63 74 65 2d 73 70 69 6e  grammalecte-spin
0e50: 2d 62 69 67 20 32 73 20 6c 69 6e 65 61 72 20 69  -big 2s linear i
0e60: 6e 66 69 6e 69 74 65 3b 0a 7d 0a 0a 40 6b 65 79  nfinite;.}..@key
0e70: 66 72 61 6d 65 73 20 67 72 61 6d 6d 61 6c 65 63  frames grammalec
0e80: 74 65 2d 73 70 69 6e 2d 62 69 67 20 7b 0a 20 20  te-spin-big {.  
0e90: 20 20 30 25 20 7b 0a 20 20 20 20 20 20 20 20 74    0% {.        t
0ea0: 72 61 6e 73 66 6f 72 6d 3a 20 72 6f 74 61 74 65  ransform: rotate
0eb0: 28 30 64 65 67 29 20 73 63 61 6c 65 28 31 29 3b  (0deg) scale(1);
0ec0: 0a 20 20 20 20 7d 0a 20 20 20 20 35 30 25 20 7b  .    }.    50% {
0ed0: 0a 20 20 20 20 20 20 20 20 74 72 61 6e 73 66 6f  .        transfo
0ee0: 72 6d 3a 20 72 6f 74 61 74 65 28 31 38 30 64 65  rm: rotate(180de
0ef0: 67 29 20 73 63 61 6c 65 28 2e 39 29 3b 0a 20 20  g) scale(.9);.  
0f00: 20 20 20 20 20 20 62 6f 78 2d 73 68 61 64 6f 77        box-shadow
0f10: 3a 20 30 20 30 20 30 20 31 30 70 78 20 68 73 6c  : 0 0 0 10px hsl
0f20: 61 28 32 31 30 2c 20 35 30 25 2c 20 35 30 25 2c  a(210, 50%, 50%,
0f30: 20 30 29 3b 0a 20 20 20 20 7d 0a 20 20 20 20 31   0);.    }.    1
0f40: 30 30 25 20 7b 0a 20 20 20 20 20 20 20 20 74 72  00% {.        tr
0f50: 61 6e 73 66 6f 72 6d 3a 20 72 6f 74 61 74 65 28  ansform: rotate(
0f60: 33 36 30 64 65 67 29 20 73 63 61 6c 65 28 31 29  360deg) scale(1)
0f70: 3b 0a 20 20 20 20 20 20 20 20 62 6f 78 2d 73 68  ;.        box-sh
0f80: 61 64 6f 77 3a 20 30 20 30 20 30 20 30 20 68 73  adow: 0 0 0 0 hs
0f90: 6c 61 28 32 31 30 2c 20 35 30 25 2c 20 35 30 25  la(210, 50%, 50%
0fa0: 2c 20 30 29 3b 0a 20 20 20 20 7d 0a 7d 0a        , 0);.    }.}.