Webbserver - Love Blomberg

Show sourcecode

The following files exists in this folder. Click to view.

public_html/gamla-kurser/webbutv1/projekt/venturo/css/

css_index.css
dark-light.css

dark-light.css

126 lines ASCII Windows (CRLF)
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
@import "https://unpkg.com/open-props/easings.min.css";

.sun-and-moon> :is(.moon, .sun, .sun-beams) {
    transform-origin: center;
}

.sun-and-moon> :is(.moon, .sun) {
    fill: var(--icon-fill);
}


.theme-toggle:is(:hover, :focus-visible)>.sun-and-moon> :is(.moon, .sun) {
    fill: var(--icon-fill-hover);
}

.sun-and-moon>.sun-beams {
    stroke: var(--icon-fill);
    stroke-width: 2px;
}

.theme-toggle:is(:hover, :focus-visible) .sun-and-moon>.sun-beams {
    stroke: var(--icon-fill-hover);
}

[data-theme="dark"] .sun-and-moon>.sun {
    transform: scale(1.75);
}

[data-theme="dark"] .sun-and-moon>.sun-beams {
    opacity: 0;
}

[data-theme="dark"] .sun-and-moon>.moon>circle {
    transform: translateX(-7px);
}

@supports (cx: 1) {
    [data-theme="dark"] .sun-and-moon>.moon>circle {
        cx: 17;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .sun-and-moon>.sun {
        transition: transform .5s var(--ease-elastic-3);
    }

    .sun-and-moon>.sun-beams {
        transition: transform .5s var(--ease-elastic-4), opacity .5s var(--ease-3);
    }

    .sun-and-moon .moon>circle {
        transition: transform .25s var(--ease-out-5);
    }

    @supports (cx: 1) {
        .sun-and-moon .moon>circle {
            transition: cx .25s var(--ease-out-5);
        }
    }

    [data-theme="dark"] .sun-and-moon>.sun {
        transition-timing-function: var(--ease-3);
        transition-duration: .25s;
        transform: scale(1.75);
    }

    [data-theme="dark"] .sun-and-moon>.sun-beams {
        transition-duration: .15s;
        transform: rotateZ(-25deg);
    }

    [data-theme="dark"] .sun-and-moon>.moon>circle {
        transition-duration: .5s;
        transition-delay: .25s;
    }
}

.theme-toggle {
    --size: 2.5rem;
    --icon-fill: hsl(210 10% 30%);
    --icon-fill-hover: hsl(210 10% 15%);
    background: none;
    border: none;
    inline-size: var(--size);
    block-size: var(--size);
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    outline-offset: 5px;
}

.theme-toggle>svg {
    inline-size: 100%;
    block-size: 100%;
    stroke-linecap: round
}

[data-theme=dark] .theme-toggle {
    --icon-fill: hsl(210 10% 70%);
    --icon-fill-hover: hsl(210 15% 90%)
}

@media (hover: none) {
    .theme-toggle {
        --size: 48px
    }
}

html {
    block-size: 100%;
    color-scheme: light
}

html[data-theme=dark] {
    color-scheme: dark
}

@supports not (color-scheme: dark) {
    html[data-theme=dark] {
        background: #111
    }
}