git.cworth.org Git - lmno.games/blob - empathy/empathy.css

   1 .vote-button {
   2     width: 100%;
   3     background-color: var(--accent-color);
   4     color: var(--text-fg-on-accent);
   5     text-align: left;
   6     border-radius: 25px;
   7     font-size: 200%;
   8     padding: 1em;
   9     margin-bottom: 0.25em;
  10     position: relative;
  11 }
  12
  13 .vote-choices {
  14     display: flex;
  15     flex-wrap: wrap;
  16 }
  17
  18 .vote-choice {
  19     font-size: 40%;
  20     background-color: var(--accent-color-bright);
  21     color: var(--text-fg-on-accent-bright);
  22     border-radius: 4px;
  23     padding-left: 4px;
  24     padding-right: 4px;
  25     margin-right: 0.5em;
  26 }
  27
  28 @media (hover:hover) {
  29     button:hover .vote-choice {
  30         background-color: var(--accent-color);
  31         color: var(--text-fg-on-accent);
  32     }
  33 }
  34
  35 .ambiguity-group {
  36     width: 100%;
  37     display: flex;
  38     flex-wrap: wrap;
  39     justify-content: center;
  40     align-items: center;
  41     background-color: var(--accent-color);
  42     margin-bottom: 0.25em;
  43     padding: 0;
  44     border-radius: 10px;
  45 }
  46
  47 .ambiguity-button {
  48     border-radius: 10px;
  49     margin: 0;
  50 }
  51
  52 .ambiguity-button.selected {
  53     background-color: var(--accent-color-bright);
  54     color: var(--text-fg-on-accent-bright);
  55 }
  56
  57 @keyframes bounce {
  58     0% {
  59         transform: translateY(0);
  60         animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1);
  61     }
  62     20% {
  63         transform: translateY(-5px);
  64         animation-timing-function: cubic-bezier(0.333, 0, 0,667, 0.333);
  65     }
  66     40% {
  67         transform: translateY(0);
  68     }
  69     100% {
  70         transform: translateY(0);
  71     }
  72 }
  73
  74 .typing span {
  75     font-size: 150%;
  76     line-height: 0;
  77
  78     display: inline-block;
  79     animation-name: bounce;
  80     animation-duration: 2s;
  81     animation-iteration-count: infinite;
  82     animation-timing-function: linear;
  83 }
  84
  85 .typing span:nth-child(2) {
  86     animation-delay: .2s;
  87 }
  88
  89 .typing span:nth-child(3) {
  90     animation-delay: .4s;
  91 }
  92
  93 .typing.active span {
  94     opacity: 1.0;
  95 }
  96
  97 .typing.idle span {
  98     opacity: 0.0;
  99     transition-property: opacity;
 100     transition-duration: 2s;
 101     transition-delay: 1s;
 102 }