Score each mini glyph and render the winner for each
[lmno.games] / 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 .achievement {
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 }
139
140 .player-idle {
141     opacity: 0.5;
142 }