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