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     position: relative;
  46 }
  47
  48 .ambiguity-button {
  49     border-radius: 10px;
  50     margin: 0;
  51 }
  52
  53 .ambiguity-button.selected {
  54     background-color: var(--accent-color-bright);
  55     color: var(--text-fg-on-accent-bright);
  56 }
  57
  58 @keyframes bounce {
  59     0% {
  60         transform: translateY(0);
  61         animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1);
  62     }
  63     20% {
  64         transform: translateY(-5px);
  65         animation-timing-function: cubic-bezier(0.333, 0, 0,667, 0.333);
  66     }
  67     40% {
  68         transform: translateY(0);
  69     }
  70     100% {
  71         transform: translateY(0);
  72     }
  73 }
  74
  75 .typing span {
  76     font-size: 150%;
  77     line-height: 0;
  78
  79     display: inline-block;
  80     animation-name: bounce;
  81     animation-duration: 2s;
  82     animation-iteration-count: infinite;
  83     animation-timing-function: linear;
  84 }
  85
  86 .typing span:nth-child(2) {
  87     animation-delay: .2s;
  88 }
  89
  90 .typing span:nth-child(3) {
  91     animation-delay: .4s;
  92 }
  93
  94 .typing.active span {
  95     opacity: 1.0;
  96 }
  97
  98 .typing.idle span {
  99     opacity: 0.0;
 100     transition-property: opacity;
 101     transition-duration: 2s;
 102     transition-delay: 1s;
 103 }
 104
 105 .label {
 106     border-radius: 4px;
 107     background-color: var(--accent-color-bright);
 108     color: var(--text-fg-on-accent-bright);
 109     font-size: 72%;
 110     font-weight: bold;
 111     padding: 0.25em;
 112     text-transform: uppercase;
 113 }
 114
 115 .star-button {
 116     color: white;
 117     opacity: 0.5;
 118     font-size: 125%;
 119     font-weight: bold;
 120     cursor: pointer;
 121     position: absolute;
 122     right: 0.5em;
 123     top: 0;
 124 }
 125
 126 @media (hover:hover) {
 127     .star-button:hover {
 128         color: var(--accent-color-bright);
 129         opacity: 1.0;
 130     }
 131 }
 132
 133 .star-button.selected {
 134     color: var(--accent-color-bright);
 135     opacity: 1.0;
 136 }