Skip to content

Commit 3095a54

Browse files
fquirinfquirin
committed
style tweaks for media player cards + x
1 parent cdadbde commit 3095a54

16 files changed

+147
-53
lines changed

‎www/css/sepiaFW-cards.css‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -337,13 +337,42 @@
337337
/* --- Common --- */
338338

339339
.sepiaFW-cards-list-body .fullWidthItem {
340-
width: 100%;
340+
position: relative;
341+
margin: 0 -2.5px;
342+
width: calc(100% + 5px);
341343
padding: 5px 5px 0 5px;
342344
display: flex;
343345
justify-content: center;
344346
align-items: center;
345347
align-content: center;
346348
}
349+
.sepiaFW-cards-list-body .fullWidthItem .cardItemBlock {
350+
border-radius: 3px;
351+
display: flex;
352+
align-items: center;
353+
justify-content: center;
354+
flex: 1 1 auto;
355+
margin: 0 2.5px;
356+
padding: 0;
357+
background: #fcfcfc;
358+
color: #000;
359+
}
360+
.dark-skin .sepiaFW-cards-list-body .fullWidthItem .cardItemBlock {
361+
background: #212327;
362+
color: #eee;
363+
}
364+
.sepiaFW-cards-flexSize-container .cardBodyItem.fullWidthItem .cardItemOverlay {
365+
position: absolute;
366+
border-radius: 2px;
367+
top: 5px;
368+
left: 7.5px;
369+
margin: 0;
370+
width: calc(100% - 15px);
371+
height: calc(100% - 5px);
372+
}
373+
.sepiaFW-cards-flexSize-container .cardBodyItem.fullWidthItem .cardItemOverlay p {
374+
animation: sepiaFW-animation-blink 3s infinite;
375+
}
347376

348377
/* --- Radio --- */
349378

@@ -414,35 +443,11 @@
414443
.sepiaFW-cards-flexSize-container.sepia-embedded-player-card {
415444
margin-bottom: 10px;
416445
}
417-
.sepiaFW-cards-flexSize-container .cardBodyItem.embeddedWebPlayer {
418-
position: relative;
419-
}
420446
.sepiaFW-cards-flexSize-container .cardBodyItem.embeddedWebPlayer iframe {
421447
border: 0;
422-
border-radius: 3px;
423448
transition: height .3s;
424-
}
425-
.sepiaFW-cards-flexSize-container .cardBodyItem.embeddedWebPlayer .cardItemOverlay {
426-
position: absolute;
427-
top: 0;
428-
left: 0;
429-
width: 100%;
430-
height: 100%;
431-
margin: 5px 5px 0 5px;
432-
width: calc(100% - 10px);
433-
height: calc(100% - 5px);
434-
background: #dfdfdf;
435-
color: #000;
436-
display: flex;
437-
justify-content: center;
438-
align-items: center;
439-
}
440-
.dark-skin .sepiaFW-cards-flexSize-container .cardBodyItem.embeddedWebPlayer .cardItemOverlay {
441-
background: #212327;
442-
color: #eee;
443-
}
444-
.sepiaFW-cards-flexSize-container .cardBodyItem.embeddedWebPlayer .cardItemOverlay p {
445-
animation: sepiaFW-animation-blink 3s infinite;
449+
box-sizing: content-box;
450+
padding: 0;
446451
}
447452

448453
/* --- Time events --- */
@@ -725,15 +730,14 @@
725730
}
726731
.sepiaFW-cards-list-body .linkCard .linkCardCenter {
727732
display: flex;
733+
align-items: center;
734+
justify-content: center;
728735
flex-direction: column;
729736
/*width: calc(100% - 80px);*/
730737
flex: 1 1 auto;
731738
/*max-width: 120px;*/
732739
margin: 5px 0px 0px 0px;
733740
padding: 2px 8px 2px 8px;
734-
display: flex;
735-
align-items: center;
736-
justify-content: center;
737741
font-size: 14px;
738742
text-align: center;
739743
cursor: pointer;

‎www/css/sepiaFW-skin-alabaster-dark.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,11 @@ html {
9595
#sepiaFW-chat-output article.chatAssistant span {
9696
color: #eee;
9797
}
98+
#sepiaFW-chat-output article.chatPm,
99+
#sepiaFW-chat-output article.chatMe.chatPm,
100+
#sepiaFW-chat-output article.chatAssistant.chatPm {
101+
border-left-color: rgb(42, 43, 44);
102+
}
98103

99104
#sepiaFW-main-window .chat-buttons-area button,
100105
#sepiaFW-main-window .chat-buttons-area .my-view-custom-button,
@@ -122,13 +127,17 @@ html {
122127
.sepiaFW-cards-list-body .newsArticle > div,
123128
.sepiaFW-cards-list-body .listElement div,
124129
.sepiaFW-cards-list-body .listElement .listRight,
130+
.dark-skin .sepiaFW-cards-list-body .fullWidthItem .cardItemBlock,
125131
.sepiaFW-cards-list-title,
126132
.sepiaFW-cards-list-footer {
127133
border: 1px solid rgb(42, 43, 44);
128134
background: rgba(36, 41, 43, 0.42);
129135
box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.30), 1px 1px 2px 0 rgba(0, 0, 0, 0.60);
130136
color: #eee;
131137
}
138+
.dark-skin .sepiaFW-cards-flexSize-container .cardBodyItem.fullWidthItem .cardItemOverlay {
139+
background: rgb(24, 25, 28);
140+
}
132141
.sepiaFW-cards-list-title.newsHeader {
133142
border: 0 !important;
134143
background: rgba(250, 250, 250, 0.85);

‎www/css/sepiaFW-skin-alabaster-mystical.css‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,12 +177,14 @@ html.landscape-small #sepiaFW-chat-controls {
177177

178178
#sepiaFW-chat-output article {
179179
border: 1px solid rgb(245, 245, 245);
180-
border-left-color: unset !important;
181180
background: rgba(250, 250, 250, 0.60);
182181
color: #000;
183182
padding-left: 9px;
184183
box-shadow: 1px 1px 12px 0 rgba(0, 0, 0, 0.08), 1px 1px 2px 0 rgba(0, 0, 0, 0.12);
185184
}
185+
#sepiaFW-chat-output article.chatPm {
186+
border-left-color: rgb(245, 245, 245);
187+
}
186188
#sepiaFW-chat-output article b,
187189
#sepiaFW-chat-output article.chatMe b,
188190
#sepiaFW-chat-output article.chatAssistant b {
@@ -199,12 +201,18 @@ html.landscape-small #sepiaFW-chat-controls {
199201
background: rgba(255, 240, 255, 0.4);
200202
color: #000;
201203
}
204+
#sepiaFW-chat-output article.chatMe.chatPm {
205+
border-left-color: rgb(244, 236, 245);
206+
}
202207

203208
#sepiaFW-chat-output article.chatAssistant {
204209
border: 1px solid rgb(238, 238, 245);
205210
background: rgba(243, 248, 255, 0.40);
206211
color: #000;
207212
}
213+
#sepiaFW-chat-output article.chatAssistant.chatPm {
214+
border-left-color: rgb(238, 238, 245);
215+
}
208216

209217
#sepiaFW-chat-output article.statusUpdate {
210218
background: transparent;
@@ -278,6 +286,7 @@ html.landscape-small #sepiaFW-chat-controls {
278286
.sepiaFW-cards-list-body .newsArticle > div,
279287
.sepiaFW-cards-list-body .listElement div,
280288
.sepiaFW-cards-list-body .listElement .listRight,
289+
.sepiaFW-cards-list-body .fullWidthItem .cardItemBlock,
281290
.sepiaFW-cards-list-title,
282291
.sepiaFW-cards-list-title.newsHeader,
283292
.sepiaFW-cards-list-footer {
@@ -286,6 +295,9 @@ html.landscape-small #sepiaFW-chat-controls {
286295
box-shadow: 1px 1px 12px 0 rgba(0, 0, 0, 0.08), 1px 1px 2px 0 rgba(0, 0, 0, 0.12);
287296
color: #000;
288297
}
298+
.sepiaFW-cards-flexSize-container .cardBodyItem.fullWidthItem .cardItemOverlay {
299+
background: #eaecf5;
300+
}
289301
.sepiaFW-cards-list-body .newsArticle .newsCenter {
290302
background: rgba(250, 250, 250, 0.60);
291303
}

‎www/css/sepiaFW-skin-canary-dark.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -314,7 +314,8 @@ html {
314314
.sepiaFW-cards-list-body .linkCard > div,
315315
.sepiaFW-cards-list-body .timeEvent div,
316316
.sepiaFW-cards-list-body .newsArticle .newsCenter,
317-
.sepiaFW-cards-list-body .radioStation div {
317+
.sepiaFW-cards-list-body .radioStation div,
318+
.dark-skin .sepiaFW-cards-list-body .fullWidthItem .cardItemBlock {
318319
background: #212121;
319320
color: #ECEBE7;
320321
}

‎www/css/sepiaFW-skin-flaming-squirrel-dark.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,9 @@ html {
4040
.sepiaFW-cards-list-body .timeEvent div {
4141
background: #ffdd64;
4242
color: #1a0f30;
43+
}
44+
45+
.dark-skin .sepiaFW-cards-list-body .fullWidthItem .cardItemBlock {
46+
background: #ebeaed;
47+
color: #000;
4348
}

‎www/css/sepiaFW-skin-grid.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@ html.landscape-small #sepiaFW-chat-controls-right {
283283
border-left-width: 2px;
284284
}
285285
#sepiaFW-chat-output article.chatMe.chatPm{
286-
border-left-color: rgba(255, 0, 0, 1.0);
286+
border-left-color: #ceff1a;
287287
border-left-width: 2px;
288288
}
289289
#sepiaFW-chat-output article.chatOther.chatPm{
@@ -381,12 +381,16 @@ html.landscape-small #sepiaFW-chat-controls-right {
381381
.sepiaFW-cards-list-body .timeEvent > div,
382382
.sepiaFW-cards-list-body .radioStation > div,
383383
.sepiaFW-cards-list-body .weatherNowSmall > div,
384-
.sepiaFW-cards-list-body .linkCard > div {
384+
.sepiaFW-cards-list-body .linkCard > div,
385+
.dark-skin .sepiaFW-cards-list-body .fullWidthItem .cardItemBlock {
385386
background: rgba(20, 163, 187, 0.66);
386387
color: #fff !important;
387388
box-shadow: 0 0 5px #15abc3;
388389
border: 1px solid #15abc3;
389390
}
391+
.dark-skin .sepiaFW-cards-flexSize-container .cardBodyItem.fullWidthItem .cardItemOverlay {
392+
background: rgba(20, 163, 187, 1.0);
393+
}
390394

391395
/*----- Frames ----- */
392396

‎www/css/sepiaFW-skin-history-of-future.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -539,6 +539,15 @@ html.landscape-small #sepiaFW-assist-btn-area {
539539
color: #111111;
540540
}
541541

542+
.dark-skin .sepiaFW-cards-list-body .fullWidthItem .cardItemBlock {
543+
background: #212121;
544+
color: #f4f4f4;
545+
border-radius: 14px;
546+
}
547+
.dark-skin .sepiaFW-cards-list-body .fullWidthItem .cardItemBlock.cardItemOverlay {
548+
border-radius: 13px;
549+
}
550+
542551
/*----- Tiny style -----*/
543552

544553
.sepiaFW-tiny-app #sepiaFW-login-box {

‎www/css/sepiaFW-skin-minimal-green.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,15 @@
6363
border-radius: 0 !important;
6464
}
6565
.sepiaFW-cards-list-body > div > div {
66-
background: #191b19 !important;
66+
background: #161816 !important;
6767
color: #eeeeee;
68+
border: 1px solid #172117;
69+
}
70+
.dark-skin .sepiaFW-cards-list-body .fullWidthItem .cardItemBlock {
71+
background: #161816;
72+
color: #eeeeee;
73+
border: 1px solid #172117;
74+
border-radius: 0;
6875
}
6976

7077
.sepiaFW-cards-list-title {

‎www/css/sepiaFW-skin-minimal-orange.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,15 @@
6767
border-radius: 0 !important;
6868
}
6969
.sepiaFW-cards-list-body > div > div {
70-
background: #1b1919 !important;
70+
background: #171615 !important;
7171
color: #eeeeee;
72+
border: 1px solid #1f1813;
73+
}
74+
.dark-skin .sepiaFW-cards-list-body .fullWidthItem .cardItemBlock {
75+
background: #171615;
76+
color: #eeeeee;
77+
border: 1px solid #1f1813;
78+
border-radius: 0;
7279
}
7380

7481
.sepiaFW-cards-list-title {

‎www/css/sepiaFW-skin-minimal.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -320,6 +320,10 @@ html.landscape-small #sepiaFW-main-output-carousel .sepiaFW-carousel-pane {
320320
color: #eeeeee;
321321
/*border-left-color: #19191b !important;*/
322322
}
323+
.dark-skin .sepiaFW-cards-list-body .fullWidthItem .cardItemBlock {
324+
background: #000;
325+
color: #eeeeee;
326+
}
323327
.sepiaFW-cards-list-body .listElement .checked {
324328
background: #e8e8e8 !important;
325329
}

0 commit comments

Comments
 (0)