this repo has no description
1#scheduled-posts-page {
2 .posts-list {
3 list-style: none;
4 padding: 0;
5 margin: 0;
6
7 li {
8 > button {
9 text-align: start;
10 color: inherit;
11 padding: 16px;
12 display: flex;
13 flex-direction: column;
14 border-bottom: 1px solid var(--outline-color);
15 gap: 8px;
16
17 > .status {
18 padding: 8px;
19 pointer-events: none;
20 background-color: var(--bg-blur-color);
21 border-radius: 8px;
22 border: 1px solid var(--outline-color);
23 font-size: 80%;
24 max-height: 160px;
25 overflow: hidden;
26 mask-image: linear-gradient(
27 to bottom,
28 black calc(160px - 16px),
29 transparent
30 );
31
32 .media-container .media {
33 width: 80px !important;
34 height: 80px !important;
35 }
36 }
37 }
38
39 .post-schedule-meta {
40 display: flex;
41 align-items: center;
42 gap: 4px;
43
44 &.post-schedule-time {
45 .icon,
46 b {
47 color: var(--red-text-color);
48 }
49 }
50 &.post-schedule-month b {
51 opacity: 0.8;
52 }
53 }
54 }
55
56 h2 {
57 font-weight: 500;
58 margin: 0;
59 padding: 0;
60 font-size: 1em;
61 }
62 }
63}
64
65#scheduled-post-sheet {
66 header h2 {
67 font-weight: normal;
68
69 small {
70 font-size: var(--text-size);
71 }
72 }
73 main > .status {
74 background-color: var(--bg-blur-color);
75 border-radius: 8px;
76 border: 1px solid var(--outline-color);
77 overflow: auto;
78 max-height: 50svh;
79
80 .media-container .media {
81 width: 80px !important;
82 height: 80px !important;
83 }
84 }
85 .status-reply {
86 border-radius: 16px 16px 0 0;
87 max-height: 160px;
88 background-color: var(--bg-color);
89 margin: 0 12px;
90 border: 1px solid var(--outline-color);
91 border-bottom: 0;
92 -webkit-animation: appear-up 1sease-in-out;
93 animation: appear-up 1sease-in-out;
94 overflow: auto;
95
96 > .status {
97 font-size: 90%;
98 }
99 }
100 footer {
101 display: flex;
102 flex-direction: column;
103 gap: 8px;
104 padding: 8px 0;
105
106 .row {
107 display: flex;
108 gap: 8px;
109 justify-content: space-between;
110 align-items: center;
111 }
112
113 input[type='datetime-local'] {
114 max-width: calc(100vw - 32px);
115 min-width: 0; /* Adding a min-width to prevent overflow */
116
117 &:user-invalid {
118 border-color: var(--red-color);
119 }
120
121 @supports not selector(:user-invalid) {
122 &:invalid {
123 border-color: var(--red-color);
124 }
125 }
126 }
127
128 .grow {
129 flex-grow: 1;
130 }
131 }
132}