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