]> git.localhorst.tv Git - alttp.git/blob - resources/sass/episodes.scss
log who sent manual random chats
[alttp.git] / resources / sass / episodes.scss
1 .episodes-group-heading {
2         position: sticky;
3         top: 0;
4         margin: 2rem 0 0 0;
5         padding: 1rem 0 3rem 0;
6         background: $body-bg;
7         background: linear-gradient(180deg, $body-bg, $body-bg 65%, transparent);
8         z-index: 1;
9 }
10
11 .episodes-item {
12         background-size: 6rem auto;
13         background-repeat: no-repeat;
14         background-position: left bottom;
15         min-height: 8rem;
16
17         &.is-active {
18                 border-color: $success !important;
19                 box-shadow: 0 0 0.25rem 0.25rem $success;
20         }
21
22         .episode-start {
23                 width: 4rem;
24         }
25         @include media-breakpoint-up(md) {
26                 .episode-body {
27                         margin-left: 5rem;
28                 }
29         }
30         .episode-channel-links > * {
31                 margin: 0.5ex 0;
32                 &:first-child {
33                         margin-top: 0;
34                 }
35                 &:last-child {
36                         margin-bottom: 0;
37                 }
38         }
39         .episode-players {
40                 display: grid;
41                 grid-template-columns: 1fr 1fr;
42         }
43         @include media-breakpoint-down(md) {
44                 .episode-event {
45                         margin-left: 5rem;
46                 }
47         }
48
49         .event-link {
50                 color: inherit;
51                 text-decoration: none;
52                 &:hover {
53                         color: $link-color;
54                         text-decoration: underline;
55                 }
56         }
57         .player-link {
58                 border: none;
59
60                 img {
61                         max-height: 3rem;
62                         width: auto;
63                         border-radius: 50%;
64                         margin: 0 0.5rem 0 0;
65                 }
66                 span {
67                         vertical-align: middle;
68                 }
69         }
70 }
71
72 .crew-member {
73         border: none;
74
75         img {
76                 max-height: 2rem;
77                 width: auto;
78                 border-radius: 50%;
79                 margin: 0 0.25rem 0 0;
80         }
81         span {
82                 vertical-align: middle;
83         }
84
85         &.unconfirmed {
86                 opacity: 0.25;
87                 &:hover {
88                         opacity: 1;
89                 }
90         }
91 }
92
93 .channel-select {
94         .search-results-holder {
95                 position: relative;
96         }
97         .search-results {
98                 position: absolute;
99                 left: 0;
100                 top: 100%;
101                 z-index: 1;
102                 width: 100%;
103                 border-top-left-radius: 0;
104                 border-top-right-radius: 0;
105                 box-shadow: 1ex 1ex 1ex rgba(0, 0, 0, 0.5);
106         }
107         &.collapsed .search-results {
108                 display: none;
109         }
110         &.expanded .search-input {
111                 border-bottom-left-radius: 0;
112                 border-bottom-right-radius: 0;
113         }
114 }