photobooth/assets/sass/themes/_classic.scss at c293f7885103489aebfea55d6253e82329a5e0e2 · PhotoboothProject/photobooth · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/**
 * Classic Theme
 */
[data-ui-theme='classic'],
[data-ui-theme='classic_rounded'] {
  .stage--start {
    .stage-inner {
      width: auto;
      height: auto;
      margin-left: 2rem;
      margin-right: 2rem;
      max-width: 40rem;

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: color-mix(in srgb, var(--primary-color), transparent 75%);
        backdrop-filter: blur(10px);
      }

      > * {
        // workaround to allow background blur
        position: relative;
      }
    }

    .names {
      text-align: center;
    }

    .names--decoration {
      &:before,
      &:after,
      .names-inner:before,
      .names-inner:after {
        content: '';
        display: block;
        margin: 1rem auto;
        border-top: 1px solid currentColor;
      }
      &:before,
      &:after {
        width: 50%;
      }
    }

    button[data-command='gallery-button'] {
      position: fixed;
      top: 2rem;
      left: 2rem;
    }
    button[data-command='cups-button'] {
      position: fixed;
      bottom: 2rem;
      left: 2rem;
    }
  }

  .stage--result {
    button[data-command='homebtn'] {
      position: fixed;
      top: 2rem;
      right: 2rem;
    }
    button[data-command='gallerybtn'] {
      position: fixed;
      top: 2rem;
      left: 2rem;
    }
  }
}

[data-ui-theme='classic_rounded'] {
  .stage--start {
    .stage-inner,
    .stage-inner:before {
      border-radius: 1rem;
    }
    #collageDiv {
      border-radius: 1rem;
    }
  }
}