TVGuide/dialog.css at master · Sopsy/TVGuide · 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
body:has(section#tv-guide) dialog {
    .epg-program {
        flex-direction: column;
        gap: 8px;

        .description,
        &:not(.running) .description {
            display: flex;
            font-size: 1em;
        }
    }

    .channel-name {
        color: var(--meta-info-color);
        font-weight: 600;
        width: initial;
    }

    .start-time {
        text-transform: capitalize;
        font-weight: 600;
    }

    .upcoming-toggle {
        margin: 8px 0 16px 0;
        text-decoration: underline;
        text-decoration-skip-ink: none;
        cursor: pointer;
    }

    .broadcast-list {
        display: flex;
        flex-direction: column;
        gap: 16px;

        div {
            display: flex;
            flex-direction: column;
            gap: 8px;

            div {
                flex-direction: row;
            }
        }

        &.hidden {
            display: none;
        }

        .logo {
            padding: 4px;
            max-width: 200px;
            overflow: hidden;
        }

        img {
            display: block;
            max-height: 20px;
            object-fit: contain;
            object-position: 0 0;
        }
    }

    button.close-button {
        margin: 8px 0 12px 0;
    }

    div:first-child .group-type  {
        color: var(--text-color);
        padding: 4px;
        border-radius: 3px;
    }

    .channel-group-preferences {
        margin: 0 12px;
        display: flex;
        flex-direction: column;
        gap: 26px;

        #name {
            width: 50%;
        }

        div:first-child div {
            display: flex;
            flex-direction: row;
            align-items:baseline;
        }

        .channel-options {
            gap: 36px;
            columns: 200px;

            div {
                width: 100%;
                break-inside: avoid;
                margin-bottom: 18px;
                display: flex;
                justify-content: space-between;
            }

            .channel-option button {
                font-size: 24px;
            }
        }

        footer button:first-child {
            width: 100%
        }
    }
}