alice.mosphere.at
this repo has no description
1body {
2 font-family: sans-serif;
3 margin: 0;
4 padding: 1em;
5 background: #f5f5f5;
6}
7
8header {
9 display: flex;
10 justify-content: space-between;
11 align-items: center;
12}
13
14#global-controls button {
15 margin-right: 0.5em;
16}
17
18.exercise-part {
19 margin-top: 1em;
20 background: #fff;
21 padding: 1em;
22 border-radius: 4px;
23}
24
25.columns {
26 display: flex;
27 justify-content: space-around;
28 flex-wrap: wrap;
29 margin-bottom: 1em;
30}
31
32.column {
33 flex: 1 1 200px;
34 margin: 0.5em;
35 padding: 0.5em;
36 background: #eaeaea;
37 border-radius: 4px;
38}
39
40.column h3 {
41 text-align: center;
42}
43
44.card-container {
45 min-height: 100px;
46 padding: 0.5em;
47 background: #fff;
48 border: 1px dashed #ccc;
49 border-radius: 4px;
50}
51
52.card {
53 background: #d1e7dd;
54 padding: 0.5em;
55 margin: 0.5em 0;
56 border-radius: 4px;
57 cursor: grab;
58 display: flex;
59 flex-direction: column;
60 align-items: center;
61 text-align: center;
62 padding-top: 8px;
63 padding-bottom: 8px;
64}
65
66.card-name {
67 font-weight: bold;
68 margin-bottom: 4px;
69 display: block;
70}
71
72.card-description {
73 font-size: 0.85em;
74 color: #555;
75 display: block;
76 padding-left: 4px;
77 padding-right: 4px;
78}
79
80/* Make description clickable */
81.card-description.clickable {
82 cursor: pointer;
83 transition: background-color 0.2s ease;
84}
85.card-description.clickable:hover {
86 background-color: #f0f0f0; /* Subtle hover effect */
87}
88
89/* Textarea for editing description */
90.card-description-edit {
91 width: 90%; /* Adjust as needed */
92 margin: 4px auto; /* Center and add vertical space */
93 font-size: 0.85em;
94 font-family: inherit;
95 border: 1px solid #aaa;
96 border-radius: 3px;
97 resize: vertical; /* Allow vertical resize */
98 box-sizing: border-box;
99}
100
101.values-grid {
102 display: grid;
103 grid-template-columns: repeat(2, 1fr);
104 gap: 2em;
105 margin-bottom: 2em;
106 padding: 1em;
107 background: #f8f9fa;
108 border-radius: 4px;
109}
110
111.grid-section {
112 background: white;
113 padding: 1em;
114 border-radius: 4px;
115 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
116}
117
118.grid-section h3 {
119 margin-top: 0;
120 color: #495057;
121 border-bottom: 1px solid #dee2e6;
122 padding-bottom: 0.5em;
123}
124
125.grid-section ul {
126 list-style: none;
127 padding: 0;
128 margin: 0;
129}
130
131.grid-section li {
132 border-bottom: 1px solid #eee;
133 padding: 0.75em 0;
134}
135
136.grid-section li:last-child {
137 border-bottom: none;
138}
139
140/* Styles for Review Page Lists */
141#reviewContent .grid-section ul li {
142 margin-bottom: 0;
143}
144
145.review-value-name {
146 font-weight: bold;
147 display: block;
148}
149
150.review-value-description {
151 font-size: 0.9em;
152 color: #444;
153 display: block;
154 margin-left: 0;
155 margin-top: 2px;
156}
157
158/* Styles for the separate Core Values & Statements list */
159#reviewContent > ul {
160 list-style: disc;
161 margin-left: 20px;
162}
163
164#reviewContent > ul li {
165 margin-bottom: 5px;
166}
167
168/* Modal Styles */
169.modal {
170 position: fixed;
171 left: 0;
172 top: 0;
173 width: 100%;
174 height: 100%;
175 background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
176 display: flex;
177 justify-content: center;
178 align-items: center;
179 z-index: 1000; /* Ensure it's on top */
180}
181
182.modal-content {
183 background-color: #fff;
184 padding: 20px;
185 border-radius: 5px;
186 width: 90%;
187 max-width: 400px;
188 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
189}
190
191.modal-content label {
192 display: block;
193 margin-top: 10px;
194 margin-bottom: 5px;
195 font-weight: bold;
196}
197
198.modal-content input[type='text'],
199.modal-content textarea {
200 width: calc(100% - 20px); /* Account for padding */
201 padding: 8px;
202 margin-bottom: 10px;
203 border: 1px solid #ccc;
204 border-radius: 4px;
205}
206
207.modal-buttons {
208 text-align: right;
209 margin-top: 15px;
210}
211
212.modal-buttons button {
213 margin-left: 10px;
214 padding: 8px 15px;
215}
216
217/* Inline button style */
218.inline-btn {
219 margin-left: 15px;
220 font-size: 0.9em;
221 padding: 2px 8px;
222}
223
224/* Add other existing styles below */
225#app {
226}