Browse Source

Theme order and names

Andrew 1 month ago
parent
commit
29c28c4573
47 changed files with 3661 additions and 3 deletions
  1. BIN
      app/javascript/fonts/premillenium/MSSansSerif.ttf
  2. BIN
      app/javascript/images/alert_badge.png
  3. BIN
      app/javascript/images/background-cybre-light.png
  4. BIN
      app/javascript/images/background-cybre.png
  5. BIN
      app/javascript/images/clippy_frame.png
  6. BIN
      app/javascript/images/clippy_wave.gif
  7. BIN
      app/javascript/images/elephant-fren.png
  8. BIN
      app/javascript/images/header-cybre-colour.jpg
  9. BIN
      app/javascript/images/header-cybre.jpeg
  10. BIN
      app/javascript/images/icon_about.png
  11. BIN
      app/javascript/images/icon_blocks.png
  12. BIN
      app/javascript/images/icon_direct.png
  13. BIN
      app/javascript/images/icon_docs.png
  14. BIN
      app/javascript/images/icon_domain_blocks.png
  15. BIN
      app/javascript/images/icon_follow_requests.png
  16. BIN
      app/javascript/images/icon_home.png
  17. BIN
      app/javascript/images/icon_invite.png
  18. BIN
      app/javascript/images/icon_keyboard_shortcuts.png
  19. BIN
      app/javascript/images/icon_likes.png
  20. BIN
      app/javascript/images/icon_lists.png
  21. BIN
      app/javascript/images/icon_local.png
  22. BIN
      app/javascript/images/icon_logout.png
  23. BIN
      app/javascript/images/icon_mutes.png
  24. BIN
      app/javascript/images/icon_notifications.png
  25. BIN
      app/javascript/images/icon_pin.png
  26. BIN
      app/javascript/images/icon_public.png
  27. BIN
      app/javascript/images/icon_settings.png
  28. BIN
      app/javascript/images/icon_tos.png
  29. BIN
      app/javascript/images/logo-cybre-light.png
  30. BIN
      app/javascript/images/mailer/icon_cached.png
  31. BIN
      app/javascript/images/mailer/icon_done.png
  32. BIN
      app/javascript/images/mailer/icon_email.png
  33. BIN
      app/javascript/images/mailer/icon_file_download.png
  34. BIN
      app/javascript/images/mailer/icon_grade.png
  35. BIN
      app/javascript/images/mailer/icon_lock_open.png
  36. BIN
      app/javascript/images/mailer/icon_person_add.png
  37. BIN
      app/javascript/images/mailer/icon_reply.png
  38. BIN
      app/javascript/images/mailer/logo_full.png
  39. BIN
      app/javascript/images/mailer/logo_transparent.png
  40. BIN
      app/javascript/images/reticle.png
  41. BIN
      app/javascript/images/start.png
  42. BIN
      app/javascript/images/void.png
  43. 957
    0
      app/javascript/styles/cybre-light.scss
  44. 282
    0
      app/javascript/styles/cybre.scss
  45. 2413
    0
      app/javascript/styles/win95.scss
  46. 4
    1
      config/locales/en.yml
  47. 5
    2
      config/themes.yml

BIN
app/javascript/fonts/premillenium/MSSansSerif.ttf View File


BIN
app/javascript/images/alert_badge.png View File


BIN
app/javascript/images/background-cybre-light.png View File


BIN
app/javascript/images/background-cybre.png View File


BIN
app/javascript/images/clippy_frame.png View File


BIN
app/javascript/images/clippy_wave.gif View File


BIN
app/javascript/images/elephant-fren.png View File


BIN
app/javascript/images/header-cybre-colour.jpg View File


BIN
app/javascript/images/header-cybre.jpeg View File


BIN
app/javascript/images/icon_about.png View File


BIN
app/javascript/images/icon_blocks.png View File


BIN
app/javascript/images/icon_direct.png View File


BIN
app/javascript/images/icon_docs.png View File


BIN
app/javascript/images/icon_domain_blocks.png View File


BIN
app/javascript/images/icon_follow_requests.png View File


BIN
app/javascript/images/icon_home.png View File


BIN
app/javascript/images/icon_invite.png View File


BIN
app/javascript/images/icon_keyboard_shortcuts.png View File


BIN
app/javascript/images/icon_likes.png View File


BIN
app/javascript/images/icon_lists.png View File


BIN
app/javascript/images/icon_local.png View File


BIN
app/javascript/images/icon_logout.png View File


BIN
app/javascript/images/icon_mutes.png View File


BIN
app/javascript/images/icon_notifications.png View File


BIN
app/javascript/images/icon_pin.png View File


BIN
app/javascript/images/icon_public.png View File


BIN
app/javascript/images/icon_settings.png View File


BIN
app/javascript/images/icon_tos.png View File


BIN
app/javascript/images/logo-cybre-light.png View File


BIN
app/javascript/images/mailer/icon_cached.png View File


BIN
app/javascript/images/mailer/icon_done.png View File


BIN
app/javascript/images/mailer/icon_email.png View File


BIN
app/javascript/images/mailer/icon_file_download.png View File


BIN
app/javascript/images/mailer/icon_grade.png View File


BIN
app/javascript/images/mailer/icon_lock_open.png View File


BIN
app/javascript/images/mailer/icon_person_add.png View File


BIN
app/javascript/images/mailer/icon_reply.png View File


BIN
app/javascript/images/mailer/logo_full.png View File


BIN
app/javascript/images/mailer/logo_transparent.png View File


BIN
app/javascript/images/reticle.png View File


BIN
app/javascript/images/start.png View File


BIN
app/javascript/images/void.png View File


+ 957
- 0
app/javascript/styles/cybre-light.scss View File

@@ -0,0 +1,957 @@
1
+$ui-base-color: #f7e8ed; // "darkest"
2
+$ui-base-alt: #f9f2f5;
3
+$ui-base-lighter-color: darken($ui-base-color, 40%); // Lighter darkest
4
+$ui-secondary-color: #ead0d6; // "lightest"
5
+$ui-primary-color: #bf5677; // "lighter"
6
+$ui-highlight-color: #bf5677; // "vibrant"
7
+$primary-text-color: #382b32;
8
+$secondary-text-color: #382b32;
9
+
10
+$header-color: $ui-primary-color;
11
+$header-text-color: #fff;
12
+$icon-button-inactive-color: lighten(desaturate($ui-base-lighter-color, 20%), 20%);
13
+$action-button-color: $icon-button-inactive-color;
14
+
15
+$about-page-text: $primary-text-color;
16
+
17
+@import 'application';
18
+
19
+
20
+$gold-star: #dd9d08;
21
+
22
+/* cybre-specific additions */
23
+
24
+.column .static-content.getting-started {
25
+  background-image: url('../images/logo-cybre-light.png');
26
+  background-size:auto 50%;
27
+  background-position: 50% 75%;
28
+  background-repeat:no-repeat;
29
+}
30
+
31
+.ui, body {
32
+  background: $ui-base-color url('../images/background-cybre-light.png');
33
+}
34
+
35
+.drawer__inner__mastodon {
36
+  display: none;
37
+}
38
+
39
+.landing-page .header-wrapper {
40
+    background-image:url('../images/header-cybre-alt.jpg');
41
+    background-size:cover;
42
+    background-position:50% 50%;
43
+}
44
+
45
+.landing-page.alternative .header {
46
+    background-image:url('../images/header-cybre-colour.jpg');
47
+    background-repeat: repeat-x;
48
+    background-size:contain;
49
+    height:45vh;
50
+    width: 100%;
51
+    position:absolute;
52
+    z-index: 1;
53
+    text-align:center;
54
+
55
+    display: unset!important;
56
+}
57
+
58
+.landing-page.alternative .header img {
59
+    margin: auto;
60
+    max-height:45vh;
61
+}
62
+
63
+
64
+.landing-page.alternative .grid {
65
+    position: relative;
66
+    z-index:2;
67
+    margin-top:15vh;
68
+}
69
+
70
+.landing-page.alternative .landing-page__hero img {
71
+    visibility: hidden;
72
+    max-height:170px;
73
+}
74
+
75
+.landing-page.alternative .landing-page__forms {
76
+    height:auto;
77
+}
78
+
79
+.landing-page.alternative .column-1 {
80
+    display:flex;
81
+    align-items:flex-end;
82
+}
83
+
84
+.landing-page.alternative .column {
85
+    max-height:initial;
86
+}
87
+
88
+.landing-page.alternative .row__mascot {
89
+    .floats {
90
+        position:absolute;
91
+        img {
92
+            width:100%;
93
+            height:100%;
94
+        }
95
+        transition: all 0.1s linear;
96
+        animation-name: floating;
97
+        animation-iteration-count: infinite;
98
+        animation-direction: alternate;
99
+        animation-timing-function: ease-in-out;
100
+    }
101
+
102
+    .float-1 {
103
+        width:50px;
104
+        height:50px;
105
+        bottom:60px;
106
+        left:110px;
107
+        animation-duration: 3s;
108
+    }
109
+
110
+    .float-2 {
111
+        width:130px;
112
+        height:130px;
113
+        left:85px;
114
+        bottom: -60px;
115
+        animation-duration: 3.5s;
116
+        animation-delay: 0.2s;
117
+    }
118
+
119
+    .float-3 {
120
+        width:100px;
121
+        height:100px;
122
+        right: 50;
123
+        top: -10px;
124
+        animation-duration: 4s;
125
+        animation-delay: 0.5s;
126
+    }
127
+}
128
+
129
+/* about.scss */
130
+
131
+.landing-page {
132
+  h1 {
133
+    color: $about-page-text;
134
+    small {
135
+      color: lighten($about-page-text, 10%);
136
+    }
137
+  }
138
+  p, li {
139
+    color: $about-page-text;
140
+  }
141
+
142
+  .header-wrapper {
143
+    padding-top:0px;
144
+
145
+    background-size:cover;
146
+    background-position:50% 55%;
147
+  }
148
+
149
+  .header-wrapper {
150
+    .mascot {
151
+        width:500px;
152
+        bottom:-52px;
153
+        left:-120px;
154
+    }
155
+  }
156
+
157
+  .container.links {
158
+     background-color: $ui-base-color;
159
+     border-top: 5px solid $ui-primary-color;
160
+     width:100%;
161
+     max-width:100%;
162
+     padding:0px calc(50% - 400px);
163
+
164
+     a {
165
+        &:hover {
166
+          color: lighten($ui-primary-color, 10%);
167
+        }
168
+     }
169
+  }
170
+
171
+  .container.hero {
172
+      .floats {
173
+          display:none;
174
+      }
175
+
176
+      .closed-registrations-message, form {
177
+          border-top: 50px solid #5f4770;
178
+          -webkit-box-shadow: 0 0 6px rgba(0,0,0,.1);
179
+          box-shadow: 0 0 6px rgba(0,0,0,.1);
180
+
181
+          &:before {
182
+              font-size: 16px;
183
+              font-family:inherit;
184
+              line-height:inherit;
185
+              font-weight:normal;
186
+              color:white;
187
+              position:absolute;
188
+              top:-35px;
189
+          }
190
+      }
191
+
192
+      .closed-registrations-message:before {
193
+          content: "Registrations closed";
194
+      }
195
+
196
+      form:before {
197
+          content: "Register now";
198
+      }
199
+  }
200
+
201
+  #mastodon-timeline {
202
+    .column-header {
203
+      color:white;
204
+    }
205
+  }
206
+}
207
+
208
+.features-list__row {
209
+  .text {
210
+    color: $about-page-text;
211
+  }
212
+}
213
+
214
+.information-board {
215
+  .panel {
216
+    .panel-header {
217
+      color: $primary-text-color;
218
+      border-bottom: 1px solid lighten($ui-secondary-color, 4%);
219
+
220
+      a,
221
+      span {
222
+        font-weight: 400;
223
+        color: lighten($ui-primary-color, 4%);
224
+      }
225
+    }
226
+  }
227
+}
228
+
229
+/* components.scss */
230
+
231
+.onboarding-modal__page {
232
+  p {
233
+    color: $primary-text-color;
234
+  }
235
+}
236
+
237
+.column-header {
238
+  background: $header-color;
239
+  color: $header-text-color;
240
+  border-top-left-radius: 3px;
241
+  border-top-right-radius: 3px;
242
+  box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
243
+}
244
+
245
+.column-header__button {
246
+  background: $header-color;
247
+  color: $header-text-color;
248
+  border-top-right-radius: 3px;
249
+
250
+  &:hover {
251
+    color: darken($ui-base-color, 10%);
252
+  }
253
+
254
+  &.active {
255
+    color: $primary-text-color;
256
+    background: darken($ui-base-color, 5%);
257
+
258
+    &:hover {
259
+      background: darken($ui-base-color, 5%);
260
+    }
261
+  }
262
+}
263
+
264
+// selectivity -- needs to override .column-header > button
265
+.column-header .column-header__back-button {
266
+  background: $header-color;
267
+  color:$header-text-color;
268
+}
269
+
270
+.column-back-button {
271
+  background: $header-color;
272
+  color:$header-text-color;
273
+}
274
+
275
+.column-header__collapsible-inner {
276
+  background: darken($ui-base-alt, 2%);
277
+}
278
+
279
+.empty-column-indicator,
280
+.error-column {
281
+  color: darken($ui-base-lighter-color, 15%);
282
+}
283
+
284
+
285
+.compose-form {
286
+  .autosuggest-textarea__textarea,
287
+  .spoiler-input__input {
288
+    color: $primary-text-color;
289
+    border: 1px solid $ui-primary-color;
290
+  }
291
+
292
+  .autosuggest-textarea__textarea {
293
+    border-bottom-width:0px;
294
+  }
295
+  .compose-form__modifiers {
296
+    border: 1px solid $ui-primary-color;
297
+    border-top-width:0px;
298
+  }
299
+
300
+  .compose-form__buttons button.active:last-child {
301
+    border-radius:3px;
302
+    background: $ui-base-color;
303
+    color: $ui-primary-color;
304
+  }
305
+  .compose-form__buttons-wrapper {
306
+    background-color:$ui-primary-color;
307
+  }
308
+
309
+  .icon-button.inverted {
310
+    color:white;
311
+
312
+    &:hover {
313
+      color:$ui-secondary-color;
314
+    }
315
+  }
316
+}
317
+
318
+button.icon-button {
319
+  &.disabled {
320
+  }
321
+}
322
+
323
+.icon-button {
324
+  &.inverted {
325
+    color: darken($ui-base-lighter-color, 10%);
326
+  }
327
+
328
+  &.overlayed {
329
+    background: rgba($base-overlay-background, 0.2);
330
+    color: rgba($white, 0.7);
331
+
332
+    &:hover {
333
+      background: rgba($base-overlay-background, 0.4);
334
+    }
335
+  }
336
+
337
+  &.disabled {
338
+    color: desaturate($icon-button-inactive-color, 5%);
339
+
340
+    &:hover,
341
+    &:active,
342
+    &:focus {
343
+      color: desaturate($icon-button-inactive-color, 5%);
344
+    }
345
+  }
346
+
347
+  color: $icon-button-inactive-color;
348
+
349
+  &:hover,
350
+  &:active,
351
+  &:focus {
352
+    color: darken($icon-button-inactive-color, 5%);
353
+  }
354
+}
355
+
356
+.icon-button.star-icon,
357
+.icon-button.star-icon:active {
358
+  background:transparent;
359
+  border:none;
360
+}
361
+
362
+.icon-button.star-icon.active {
363
+  color: $gold-star;
364
+  &:active,  &:hover, &:focus {
365
+    color: $gold-star;
366
+  }
367
+}
368
+
369
+.text-icon-button {
370
+  color: $white;
371
+  &.active {
372
+    background: $ui-base-color;
373
+    color: $ui-primary-color;
374
+  }
375
+  &:focus, &:hover {
376
+    color: darken($ui-base-color, 3%);
377
+  }
378
+}
379
+.status.status-direct {
380
+  background: darken($ui-base-alt, 5%);
381
+  .icon-button.disabled {
382
+    color: lighten($ui-base-lighter-color, 10%);
383
+  }
384
+}
385
+
386
+.account__header, .account-card {
387
+  & > div {
388
+    background: rgba(lighten($ui-base-color, 4%), 0.6);
389
+  }
390
+
391
+  .account__header__content {
392
+    color: $primary-text-color;
393
+  }
394
+
395
+  .detailed-status__display-name .display-name strong {
396
+    color: $ui-highlight-color;
397
+  }
398
+
399
+  .icon-button {
400
+    &, &:hover {
401
+      color:desaturate($ui-base-lighter-color, 20%);
402
+    }
403
+    &.active {
404
+      &, &:hover {
405
+        color:$ui-base-lighter-color;
406
+      }
407
+    }
408
+  }
409
+}
410
+
411
+.account__section-headline a {
412
+  &.active {
413
+    color: $primary-text-color;
414
+
415
+    &::after {
416
+      border-bottom-color: $ui-base-alt;
417
+    }
418
+
419
+    &::after {
420
+      border-bottom-color: $ui-base-alt;
421
+    }
422
+  }
423
+}
424
+
425
+.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
426
+    color: $ui-primary-color;
427
+}
428
+
429
+.privacy-dropdown__option {
430
+  color: $primary-text-color;
431
+
432
+  strong {
433
+    color: $primary-text-color;
434
+  }
435
+
436
+  &:hover,
437
+  &.active {
438
+    color: $white;
439
+
440
+    .privacy-dropdown__option__content {
441
+      color: $white;
442
+
443
+      strong {
444
+        color: $white;
445
+      }
446
+    }
447
+  }
448
+}
449
+
450
+.emoji-picker-dropdown__menu {
451
+  .emoji-search-wrapper {
452
+    border-color: darken($ui-base-color, 10%);
453
+  }
454
+  .emoji-search {
455
+    background: darken($ui-base-color, 5%);
456
+    border-color: darken($ui-base-color, 10%);
457
+  }
458
+  .emoji-mart {
459
+    color: $ui-primary-color;
460
+  }
461
+}
462
+
463
+.search-popout {
464
+  background: $ui-base-color;
465
+  color: $ui-primary-color;
466
+
467
+  h4 {
468
+    color: $ui-primary-color;
469
+  }
470
+
471
+  em {
472
+    color: $ui-highlight-color;
473
+  }
474
+}
475
+.search__icon .fa.active {
476
+  opacity:1.0;
477
+}
478
+.search-results__hashtag {
479
+  color: darken($ui-primary-color, 10%);
480
+  &:hover {
481
+    color: lighten($ui-primary-color, 5%);
482
+  }
483
+}
484
+
485
+.static-content {
486
+    /*color: $primary-text-color;*/
487
+}
488
+
489
+#Getting-started {
490
+  background: $ui-primary-color;
491
+  border-bottom:0px;
492
+  color:white;
493
+}
494
+
495
+.getting-started {
496
+  p {
497
+    color: $primary-text-color;
498
+  }
499
+
500
+  a {
501
+    color: darken($ui-base-lighter-color, 10%);
502
+  }
503
+}
504
+.getting-started__wrapper {
505
+  flex: 0 0.5 auto;
506
+}
507
+
508
+.getting-started {
509
+  .column-link {
510
+    background: lighten($ui-primary-color, 5%);
511
+    color:$white;
512
+    &:hover {
513
+      background: lighten($ui-primary-color, 10%);
514
+    }
515
+  }
516
+}
517
+.column-link__badge {
518
+  background: saturate(darken($ui-primary-color, 5%), 5%);
519
+}
520
+.column-subheading {
521
+  background: darken($ui-primary-color, 5%);
522
+  color:$white;
523
+}
524
+
525
+.media-spoiler,
526
+.video-player__spoiler.active {
527
+  color: $white;
528
+  &:hover {
529
+    color: darken($white, 5%);
530
+  }
531
+}
532
+
533
+.status {
534
+  border-bottom: 1px solid $ui-secondary-color;
535
+}
536
+
537
+.status__relative-time, .status__display-name {
538
+  color: darken($ui-base-color, 40%);
539
+}
540
+
541
+.status__content {
542
+  .status__content__spoiler-link {
543
+    background: $ui-base-lighter-color;
544
+
545
+    &:hover {
546
+      background: lighten($ui-base-lighter-color, 5%);
547
+    }
548
+  }
549
+}
550
+
551
+.muted .status__content p {
552
+  color: $icon-button-inactive-color;
553
+}
554
+
555
+.dropdown-menu__item {
556
+  & > a {
557
+    color: $primary-text-color;
558
+    &:hover, &:active, &:focus {
559
+      color: $white;
560
+    }
561
+  }
562
+}
563
+
564
+.dropdown--active .dropdown__content {
565
+  & > ul {
566
+    background: $ui-base-color;
567
+    box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
568
+    & > li > a {
569
+      background: $ui-base-color;
570
+      color: $primary-text-color;
571
+
572
+      &:hover {
573
+        background: $ui-highlight-color;
574
+        color: $ui-base-color;
575
+      }
576
+    }
577
+  }
578
+}
579
+
580
+.boost-modal,
581
+.confirmation-modal,
582
+.report-modal,
583
+.actions-modal,
584
+.mute-modal
585
+{
586
+  color: $primary-text-color;
587
+}
588
+.boost-modal__action-bar,
589
+.confirmation-modal__action-bar,
590
+.mute-modal__action-bar,
591
+.report-modal__action-bar,
592
+.mute-modal__action-bar  {
593
+  & > div {
594
+    color: $ui-primary-color;
595
+  }
596
+}
597
+
598
+.actions-modal
599
+{
600
+  ul {
601
+    li:not(:empty) {
602
+      a {
603
+        color: $primary-text-color;
604
+        button {
605
+
606
+        }
607
+        &.active, &:hover, &:active, &:focus {
608
+          color: $white;
609
+          button {
610
+            color: $white;
611
+          }
612
+        }
613
+      }
614
+    }
615
+  }
616
+}
617
+
618
+.react-toggle-track {
619
+  background-color: $icon-button-inactive-color;
620
+}
621
+
622
+.report-modal__comment .setting-text {
623
+  color: $primary-text-color;
624
+  border-bottom-color: lighten($ui-primary-color, 10%);
625
+  &:focus, &:active {
626
+    color: $primary-text-color;
627
+  }
628
+}
629
+
630
+.status.light {
631
+  .status__content {
632
+    color: $primary-text-color;
633
+  }
634
+  .display-name strong {
635
+    color: $primary-text-color;
636
+  }
637
+}
638
+
639
+.reply-indicator__content a {
640
+  color: lighten($ui-highlight-color, 30%);
641
+}
642
+
643
+.status__content
644
+{
645
+  a {
646
+    color: $ui-highlight-color;
647
+
648
+    &:hover {
649
+      .fa {
650
+        color: darken($ui-base-color, 40%);
651
+      }
652
+    }
653
+  }
654
+}
655
+
656
+.detailed-status__display-name {
657
+  color: $ui-base-lighter-color;
658
+}
659
+
660
+.drawer .drawer__inner {
661
+  overflow: visible;
662
+  height:inherit;
663
+  background:$ui-base-alt;
664
+}
665
+
666
+.search__icon .fa {
667
+  color: $ui-highlight-color;
668
+}
669
+
670
+.drawer__pager {
671
+  overflow-y:auto;
672
+}
673
+
674
+.drawer .drawer__header {
675
+  background: $ui-base-color;
676
+  border-radius:3px;
677
+}
678
+
679
+.onboarding-modal__page h1 {
680
+  background-color: darken($ui-primary-color, 5%);
681
+}
682
+
683
+/* forms.scss */
684
+.block-button, .button, button {
685
+  background-color: $ui-primary-color;
686
+  color: $white;
687
+
688
+  &.button-alternative {
689
+    color: $ui-base-color;
690
+  }
691
+
692
+  &.logo-button {
693
+    color: $white;
694
+    svg path:first-child {
695
+      fill: $white;
696
+    }
697
+  }
698
+}
699
+
700
+.simple_form {
701
+  p.hint {
702
+    color: $primary-text-color;
703
+  }
704
+
705
+  .block-button, .button, button {
706
+    background-color: $ui-primary-color;
707
+    color: $white;
708
+
709
+    &:hover {
710
+      background-color: lighten($ui-primary-color, 5%);
711
+    }
712
+
713
+    &:active,
714
+    &:focus {
715
+      background-color: darken($ui-primary-color, 5%);
716
+    }
717
+
718
+  }
719
+}
720
+
721
+/* admin.scss */
722
+
723
+.table > thead > tr > th {
724
+  border-bottom-color:  $ui-secondary-color;
725
+}
726
+
727
+.simple_form h4 {
728
+  border-bottom: 1px solid $ui-highlight-color;
729
+}
730
+
731
+.admin-wrapper {
732
+  .content {
733
+    h2, p.hint, h4, h6 {
734
+      color: $primary-text-color;
735
+    }
736
+
737
+    .muted-hint {
738
+      color: $primary-text-color;
739
+    }
740
+  }
741
+
742
+  .sidebar {
743
+    .logo {
744
+      -webkit-filter: invert(100%);
745
+      filter: invert(100%);
746
+    }
747
+
748
+    ul {
749
+      ul {
750
+        a {
751
+          &.selected {
752
+            background-color: $ui-primary-color;
753
+            color: $white;
754
+
755
+            &:hover {
756
+              background-color: lighten($ui-primary-color, 10%);
757
+            }
758
+          }
759
+        }
760
+      }
761
+    }
762
+  }
763
+}
764
+
765
+.pagination .current {
766
+  color: $ui-primary-color;
767
+}
768
+
769
+.report-accounts__item > strong {
770
+  color: $primary-text-color;
771
+}
772
+
773
+.admin-wrapper .content { 
774
+  & > p {
775
+    color: $primary-text-color;
776
+  }
777
+  hr {
778
+    border-color: $ui-highlight-color;
779
+  }
780
+}
781
+
782
+/* accounts.scss */
783
+.card {
784
+  .name {
785
+    color: $white;
786
+  }
787
+
788
+  .counter {
789
+    .counter-number {
790
+      color: $white;
791
+    }
792
+  }
793
+}
794
+
795
+/* stream_entries.scss */
796
+.activity-stream {
797
+  .entry {
798
+  }
799
+  .status.light {
800
+    .display-name {
801
+      strong {
802
+        color: $primary-text-color;
803
+      }
804
+    }
805
+    .status__content {
806
+      color: $primary-text-color;
807
+    }
808
+  }
809
+  .detailed-status.light {
810
+    .detailed-status__display-name {
811
+      .display-name {
812
+        strong {
813
+          color: $primary-text-color;
814
+        }
815
+      }
816
+    }
817
+    .status__content {
818
+      color: $primary-text-color;
819
+    }
820
+    .status-card,
821
+    .status-card__title,
822
+    .status-card__description {
823
+      color: $primary-text-color;
824
+    }
825
+  }
826
+}
827
+
828
+/* accounts.scss */
829
+.card {
830
+  .name {
831
+    color: darken($ui-primary-color, 15%);
832
+  }
833
+  .counter {
834
+    .counter-number {
835
+      color: darken($ui-primary-color, 15%);
836
+    }
837
+    border-color: $ui-primary-color;
838
+  }
839
+}
840
+
841
+.activity-stream-tabs {
842
+  a {
843
+    color: lighten($ui-primary-color, 10%);
844
+    &.active {
845
+      color: darken($ui-primary-color, 10%);
846
+    }
847
+  }
848
+}
849
+
850
+/* uncategorized */
851
+
852
+@media screen and (min-width: 1300px) {
853
+  .column {
854
+    flex-grow: 1 !important;
855
+    max-width: 400px;
856
+  }
857
+
858
+  .drawer {
859
+    width: 17%;
860
+    max-width: 400px;
861
+    min-width: 330px;
862
+  }
863
+}
864
+
865
+.status time:after,
866
+.detailed-status__datetime span:after {
867
+  font: normal normal normal 14px/1 FontAwesome;
868
+  content: "\00a0\00a0\f08e";
869
+}
870
+
871
+
872
+.column {
873
+  max-height:100vh;
874
+  & > .scrollable {
875
+    background-color: $ui-base-alt;
876
+  }
877
+}
878
+
879
+.empty-column-indicator, .error-column {
880
+  background-color: $ui-base-alt;
881
+}
882
+
883
+
884
+.media-gallery,
885
+.video-player {
886
+  max-height:30vh;
887
+  height:30vh !important;
888
+  position:relative;
889
+  margin-top:20px;
890
+  margin-left:-68px;
891
+  width: calc(100% + 80px) !important;
892
+  max-width: calc(100% + 80px);
893
+}
894
+
895
+.detailed-status .media-gallery,
896
+.detailed-status .video-player {
897
+  margin-left:-10px;
898
+  width: calc(100% + 22px);
899
+  max-width: calc(100% + 22px);
900
+}
901
+
902
+.video-player video {
903
+  transform: unset;
904
+  top: unset;
905
+}
906
+
907
+.detailed-status .media-spoiler,
908
+.status .media-spoiler {
909
+  height:100% !important;
910
+  vertical-align:middle;
911
+}
912
+
913
+.actions .button.button-alternative {
914
+    background: $ui-highlight-color;
915
+    color: $white;
916
+
917
+    &:active,
918
+    &:focus,
919
+    &:hover {
920
+      background-color: lighten($ui-highlight-color, 4%);
921
+    }
922
+}
923
+
924
+.public-layout .header {
925
+  background: $ui-highlight-color;
926
+  color: $white;
927
+}
928
+
929
+.public-layout .public-account-header__tabs__name h1 {
930
+  color: $white;
931
+  small {
932
+    color: $white;
933
+  }
934
+}
935
+.public-layout .header .brand:hover, 
936
+.public-layout .header .brand:focus, 
937
+.public-layout .header .brand:active {
938
+  background: lighten($ui-highlight-color, 5%);
939
+}
940
+
941
+.public-layout .container:last-child {
942
+  background:$ui-highlight-color;
943
+  padding-left: 100px;
944
+  padding-right: 100px;
945
+  border-radius: 4px;
946
+  h4 {
947
+    color: white;
948
+  }
949
+}
950
+
951
+.modal-layout, .modal-layout__mastodon > * {
952
+  background: none;
953
+}
954
+
955
+.dashboard__widgets a:not(.name-tag) {
956
+  color: $primary-text-color;
957
+}

+ 282
- 0
app/javascript/styles/cybre.scss View File

@@ -0,0 +1,282 @@
1
+$ui-base-color: #181818; // darkest
2
+$ui-highlight-color: #1ea21e; // vibrant
3
+$ui-secondary-color: #E4F2E4; // lightest
4
+$ui-primary-color: #E4F2E4; // lighter
5
+$ui-primary-color-alt: #a0b49c; // darker, for external pages
6
+
7
+$about-page-text: lighten($ui-base-color, 50%);
8
+
9
+@import 'cybre-base';
10
+
11
+@keyframes floating {
12
+  from {
13
+    transform: translate(0, 0);
14
+  }
15
+  65% {
16
+    transform: translate(0, 4px);
17
+  }
18
+  to {
19
+    transform: translate(0, -0);
20
+  }
21
+}
22
+
23
+body, body.about-body {
24
+  background: $ui-base-color url('../images/background-cybre.png');
25
+}
26
+
27
+body.about-body {
28
+  // basics.scss &.about-body
29
+  background: darken($ui-base-color, 8%) url('../images/background-cybre.png');
30
+
31
+  background-position-y: 200px;
32
+  background-position-x: center;
33
+}
34
+
35
+.about-body .mascot {
36
+  display: none;
37
+}
38
+
39
+.muted {
40
+  .status__content p, .status__content a {
41
+    color: lighten($ui-base-color, 35%);
42
+  }
43
+
44
+  .status__display-name strong {
45
+    color: lighten($ui-base-color, 35%);
46
+  }
47
+}
48
+
49
+.compose-form__buttons button.active:last-child {
50
+  color:$ui-secondary-color;
51
+  background-color: $ui-highlight-color;
52
+  border-radius:3px;
53
+}
54
+
55
+.screenshot-with-signup {
56
+  min-height:300px;
57
+}
58
+
59
+.container.hero .closed-registrations-message .clock {
60
+  font-size: 150%;
61
+  margin: 1em auto;
62
+}
63
+
64
+.column .static-content.getting-started {
65
+  background-image: url('../images/logo-cybre.png'), url('../images/background-cybre.png');
66
+  background-size:auto 50%, cover;
67
+  background-position: 50% 75%, center center;
68
+  background-repeat:no-repeat, no-repeat;
69
+}
70
+
71
+.columns-area {
72
+  background: $ui-base-color url('../images/background-cybre.png');
73
+}
74
+
75
+.actions .button.button-alternative {
76
+    background: $ui-highlight-color;
77
+    color: $ui-primary-color;
78
+
79
+    &:active,
80
+    &:focus,
81
+    &:hover {
82
+      background-color: lighten($ui-highlight-color, 4%);
83
+    }
84
+}
85
+
86
+@media screen and (max-width: 1280px) {
87
+  .landing-page .container.links {
88
+      top: -15px;
89
+  }
90
+}
91
+
92
+.landing-page.alternative .header {
93
+    background-image:url('../images/header-cybre-colour.jpg');
94
+    background-repeat: repeat-x;
95
+    background-size:contain;
96
+    height:45vh;
97
+    width: 100%;
98
+    position:absolute;
99
+    z-index: 1;
100
+    text-align:center;
101
+
102
+    display: unset!important;
103
+}
104
+
105
+.landing-page.alternative .header img {
106
+    margin: auto;
107
+    max-height:45vh;
108
+}
109
+
110
+
111
+.landing-page.alternative .grid {
112
+    position: relative;
113
+    z-index:2;
114
+    margin-top:15vh;
115
+}
116
+
117
+.landing-page.alternative .landing-page__hero img {
118
+    visibility: hidden;
119
+    max-height:170px;
120
+}
121
+
122
+.landing-page.alternative .landing-page__forms {
123
+    height:auto;
124
+}
125
+
126
+.landing-page.alternative .column-1 {
127
+    display:flex;
128
+    align-items:flex-end;
129
+}
130
+
131
+.landing-page.alternative .column {
132
+    max-height:initial;
133
+}
134
+
135
+.landing-page.alternative .row__mascot {
136
+    .floats {
137
+        position:absolute;
138
+        img {
139
+            width:100%;
140
+            height:100%;
141
+        }
142
+        transition: all 0.1s linear;
143
+        animation-name: floating;
144
+        animation-iteration-count: infinite;
145
+        animation-direction: alternate;
146
+        animation-timing-function: ease-in-out;
147
+    }
148
+
149
+    .float-1 {
150
+        width:50px;
151
+        height:50px;
152
+        bottom:60px;
153
+        left:110px;
154
+        animation-duration: 3s;
155
+    }
156
+
157
+    .float-2 {
158
+        width:130px;
159
+        height:130px;
160
+        left:85px;
161
+        bottom: -60px;
162
+        animation-duration: 3.5s;
163
+        animation-delay: 0.2s;
164
+    }
165
+
166
+    .float-3 {
167
+        width:100px;
168
+        height:100px;
169
+        right: 50;
170
+        top: -10px;
171
+        animation-duration: 4s;
172
+        animation-delay: 0.5s;
173
+    }
174
+}
175
+
176
+.activity-stream {
177
+  .status.light {
178
+    .status__header .status__meta .status__relative-time {
179
+      color: $ui-primary-color-alt;
180
+    }
181
+
182
+    .display-name span {
183
+      color: $ui-primary-color-alt;
184
+    }
185
+
186
+    .status__content {
187
+      a.status__content__spoiler-link {
188
+        background: $ui-primary-color-alt;
189
+
190
+        &:hover {
191
+          background: lighten($ui-primary-color-alt, 8%);
192
+        }
193
+      }
194
+    }
195
+  }
196
+
197
+  .detailed-status.light {
198
+    .detailed-status__display-name .display-name span {
199
+      color: $ui-primary-color-alt;
200
+    }
201
+
202
+    .status__content a.status__content__spoiler-link {
203
+      background: $ui-primary-color-alt;
204
+
205
+      &:hover {
206
+        background: lighten($ui-primary-color-alt, 8%);
207
+      }
208
+    }
209
+
210
+    .detailed-status__meta {
211
+      color: $ui-primary-color-alt;
212
+    }
213
+  }
214
+
215
+  .media-spoiler {
216
+    background: $ui-primary-color-alt;
217
+    &:hover {
218
+      background: darken($ui-primary-color-alt, 5%);
219
+    }
220
+  }
221
+
222
+  .pre-header {
223
+    color: $ui-primary-color-alt;
224
+    .status__display-name.muted strong {
225
+      color: $ui-primary-color-alt;
226
+    }
227
+  }
228
+}
229
+
230
+.embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button {
231
+  color: $ui-primary-color-alt;
232
+  svg {
233
+    path:first-child {
234
+      fill: $ui-primary-color-alt;
235
+    }
236
+  }
237
+  &:active,
238
+  &:focus,
239
+  &:hover {
240
+    svg path:first-child {
241
+      fill: lighten($ui-primary-color-alt, 4%);
242
+    }
243
+  }
244
+}
245
+
246
+.emoji-mart-search {
247
+  background: $simple-background-color;
248
+  input {
249
+    color: $ui-primary-color-alt;
250
+    border: 1px solid $ui-primary-color-alt;
251
+  }
252
+}
253
+
254
+.emoji-mart-anchor {
255
+  color: $ui-primary-color-alt;
256
+  &:hover {
257
+    color: darken($ui-primary-color-alt, 8%);
258
+  }
259
+}
260
+
261
+.search-popout {
262
+  background: $ui-base-color;
263
+  color: $ui-primary-color;
264
+
265
+  h4 {
266
+    color: $ui-primary-color;
267
+  }
268
+
269
+  em {
270
+    color: $ui-highlight-color;
271
+  }
272
+}
273
+
274
+/* Octagonal avatars, because ???? */
275
+.account__avatar,
276
+.account__avatar-overlay-base,
277
+.account__header__avatar,
278
+.account__avatar-overlay-overlay {
279
+    border-radius:0px !important;
280
+    -webkit-clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
281
+    clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
282
+}

+ 2413
- 0
app/javascript/styles/win95.scss
File diff suppressed because it is too large
View File


+ 4
- 1
config/locales/en.yml View File

@@ -865,9 +865,12 @@ en:
865 865
       <p>Originally adapted from the <a href="https://github.com/discourse/discourse">Discourse privacy policy</a>.</p>
866 866
     title: "%{instance} Terms of Service and Privacy Policy"
867 867
   themes:
868
+    default: Cybrespace
868 869
     contrast: High contrast
869
-    default: Mastodon
870
+    mastodon: Mastodon
870 871
     mastodon-light: Mastodon (light)
872
+    win95: Windows 95
873
+    light: Cybre Lite
871 874
   time:
872 875
     formats:
873 876
       default: "%b %d, %Y, %H:%M"

+ 5
- 2
config/themes.yml View File

@@ -1,3 +1,6 @@
1
-default: styles/application.scss
2
-contrast: styles/contrast.scss
1
+default: styles/cybre.scss 
2
+light: styles/cybre-light.scss
3
+mastodon: styles/application.scss 
3 4
 mastodon-light: styles/mastodon-light.scss
5
+contrast: styles/contrast.scss
6
+win95: styles/win95.scss