]>
git.gir.st - subscriptionfeed.git/blob - app/static/style.css
2 font-family: sans-serif
;
12 text-decoration: none
;
16 .card-main:hover
.title
, .card-main:active
.title
,
17 .more-actions
label:hover
, .more-actions
label:active
,
19 summary:active
, summary:hover
{
21 text-decoration: none
;
32 box-sizing: border-box
;
33 max-width: 1200px; /* same as .articles */
41 box-sizing: border-box
;
44 .flashes>.flash-radio:checked ~ li {
47 .flashes>li .flash-close {
51 .flashes>li .flash-close::before {
56 .flashes
>li
.message
.flash-close::before:hover
,
57 .flashes>li.info .flash-close::before:hover {
62 text-decoration: underline
;
66 background-color: #ace;
67 border: 1px solid
#5ae;
75 background-color: #aaa;
76 border: 1px solid
#888;
79 .flashes>li.message a {
84 background-color: #f33;
85 border: 1px solid
#700;
93 border: 1px solid white
;
95 .flashes
>li
.welcome h2
,
96 .flashes>li.welcome p {
106 justify-content: center
;
113 box-shadow: 0 0 5px #222;
114 border:1px solid
#222;
116 margin: 0 .25em .5em .25em;
122 height: calc
(270px / 16 * 9);
126 width: 100%; height: 100%;
129 .card .thumb .badge {
133 background: rgba
(16,16,16,.8);
154 left: 0; top: 0; right: 0; bottom: 0;
158 background: rgba
(255,0,0,.1);
160 .card
.pinned
.infobar details
.advanced
>summary::after
,
161 .card.pinned .infobar :not(details).advanced::after {
162 content: ' \1f4cc\FE0F';
169 .card .info-main, .card .infobar>:first-child {
172 text-overflow: ellipsis
;
185 border-color: transparent
;
196 .card .emoji, #submgr .emoji {
199 .card .details>:last-child .emoji {
215 .advanced:not([open]) summary{
226 ul#submgr
{list-style: none
}
238 border:1px solid
#700;
240 box-sizing: border-box
;
243 .video_error::before {
244 content: '\26A0\fe0e';
246 .video_error a:link, .video_error a:visited {
249 .video_error a:hover, .video_error a:active {
256 /* https://stackoverflow.com/a/20201563 */
259 padding-top: calc
( 100% / var
(--aspect-ratio
) );
261 /* Note: clamping aspect-ratio to avoid vertical videos going
262 off-screen, but only on browsers that support nesting calc/max: */
263 @supports (padding:calc
(100%/max
(1))) {
265 padding-top: calc
( 100% / max
(var
(--aspect-ratio
), 4/3) );
268 .aspect-ratio video {
275 .more-actions
.emoji
,
276 .more-actions input[type="checkbox"] {
277 margin: 0 .7em; /*like input.emoji's padding*/
284 .header-left:not(:first-of-type) {
294 .pagination-container {
299 border: 1px solid
#aaa;
305 .pagination.prev::before {
307 padding-right: .25em;
312 .pagination.next::after {