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