Skip to content

Commit 8fac17e

Browse files
givanzgivanz
committed
Media modal upload area style fix
1 parent 21295b7 commit 8fac17e

File tree

3 files changed

+97
-28
lines changed

3 files changed

+97
-28
lines changed

‎libs/media/media.css

Lines changed: 94 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
}
6767

6868

69-
.filemanager .upload-collapse {
69+
.filemanager .upload {
7070
margin:3rem;
7171
padding:0rem;
7272
padding:1rem;
@@ -75,17 +75,17 @@
7575
min-height:200px;
7676
}
7777

78-
.filemanager .upload-collapse h3 {
78+
.filemanager .upload h3 {
7979
padding:1rem 4rem;
8080
}
8181

82-
.filemanager .upload-collapse button#upload-close {
82+
.filemanager .upload button#upload-close {
8383
position:absolute;
8484
right:1rem;
8585
z-index:1000
8686
}
8787

88-
.filemanager .upload-collapse input[type=file] {
88+
.filemanager .upload input[type=file] {
8989
position:absolute;
9090
z-index:100;
9191
top:0;
@@ -97,13 +97,13 @@
9797
font-size:1rem;
9898
}
9999

100-
.filemanager .upload-collapse input[type=file]::-webkit-file-upload-button
100+
.filemanager .upload input[type=file]::-webkit-file-upload-button
101101
/*,.filemanager .upload input[type=file]::file-selector-button */
102102
{
103103
visibility: hidden;
104104
}
105105

106-
.filemanager .upload-collapse input[type=file]::before {
106+
.filemanager .upload input[type=file]::before {
107107
content: 'Choose files';
108108
color: white;
109109
display: inline-block;
@@ -115,18 +115,18 @@
115115
white-space: nowrap;
116116
-webkit-user-select: none;
117117
cursor: pointer;
118-
//text-shadow: 1px 1px #fff;
118+
//text-shadow: 1px 1px var(--bs-body-bg);
119119
font-size: 1rem;
120120
font-weight:500;
121121
box-shadow:1px 1px 2px 1px rgba(0, 0, 0, 0.07), -1px 1px 2px 0px rgba(255, 255, 255, 0.15) inset;
122122
}
123-
.filemanager .upload-collapse input[type=file]:hover::before {
123+
.filemanager .upload input[type=file]:hover::before {
124124
border-color: black;
125125
}
126-
.filemanager .upload-collapse input[type=file]:active {
126+
.filemanager .upload input[type=file]:active {
127127
outline: 0;
128128
}
129-
.filemanager .upload-collapse input[type=file]:active::before {
129+
.filemanager .upload input[type=file]:active::before {
130130
background: -webkit-linear-gradient(top, #0a58ca, #0d6efd);
131131
}
132132

@@ -138,15 +138,15 @@
138138
width: 14px;
139139
height: 14px;
140140
border-radius: 50%;
141-
border: 2px solid #333;
141+
border: 2px solid var(--bs-border-color);
142142
right: 10px;
143143
}
144144

145145
.filemanager .search:after {
146146
content: '';
147147
width: 3px;
148148
height: 10px;
149-
background-color: #333;
149+
background-color: var(--bs-border-color);
150150
border-radius: 2px;
151151
position: absolute;
152152
top: 18px;
@@ -278,11 +278,13 @@
278278

279279
.filemanager .nothingfound {
280280
background-color: #373743;
281+
background-color: var(--bs-light-border-subtle);
281282
width: 23em;
282283
height: 21em;
283284
margin: 0 auto;
284285
display: none;
285-
font-family: Arial;
286+
border-radius:20px;
287+
text-align:center;
286288
-webkit-animation: showSlowlyElement 700ms; /* Chrome, Safari, Opera */
287289
animation: showSlowlyElement 700ms; /* Standard syntax */
288290
}
@@ -298,17 +300,19 @@
298300
line-height: 11.4em;
299301
}
300302
.filemanager .nothingfound .nofiles:after {
301-
content: '×';
302-
position: absolute;
303-
color: #ffffff;
304-
font-size: 14em;
305-
margin-right: 0.092em;
306-
right: 0;
303+
content: 'x';
304+
position: absolute;
305+
color: var(--bs-body-bg);
306+
font-size: 12em;
307+
margin-right: 2rem;
308+
line-height: 0.76;
309+
font-weight: 600;
310+
right: 0;
307311
}
308312

309313
.filemanager .nothingfound span {
310-
margin: 0 auto auto 6.8em;
311-
color: #ffffff;
314+
margin: 0 auto auto;
315+
//color: var(--bs-body-bg);
312316
font-size: 16px;
313317
font-weight: 500;
314318
line-height: 20px;
@@ -368,6 +372,10 @@
368372
border-bottom:1px solid var(--bs-border-color);
369373
}
370374

375+
.files .preview img {
376+
max-width:100%;
377+
}
378+
371379
.files .preview-link:hover + .preview,
372380
.files .preview-link:focus + .preview,
373381
.files .preview-link + .preview:hover {
@@ -395,7 +403,7 @@
395403
.icon.folder:before {
396404
content: '';
397405
float: left;
398-
background-color: rgba(108, 108, 256, 0.7);
406+
background-color: rgba(var(--bs-primary-rgb), 0.5);
399407

400408
width: 1.5em;
401409
height: 0.45em;
@@ -406,14 +414,14 @@
406414
border-top-left-radius: 0.1em;
407415
border-top-right-radius: 0.1em;
408416

409-
box-shadow: 1.25em 0.25em 0 0em rgba(108, 108, 256, 0.8);
417+
box-shadow: 1.25em 0.25em 0 0em rgba(var(--bs-primary-rgb), 0.6);
410418
}
411419
.icon.folder:after {
412420
content: '';
413421
float: left;
414422
clear: left;
415423

416-
background-color: rgba(108, 108, 256, 1);
424+
background-color: rgba(var(--bs-primary-rgb), 1);
417425
width: 3em;
418426
height: 2.25em;
419427

@@ -424,7 +432,7 @@
424432
}
425433
.icon.folder.full:after {
426434
height: 2.15em;
427-
box-shadow: 0 -0.12em 0 0 #ffffff;
435+
box-shadow: 0 -0.12em 0 0 var(--bs-body-bg);
428436
}
429437

430438
.icon.file {
@@ -433,7 +441,7 @@
433441
line-height: 3em;
434442
text-align: center;
435443
border-radius: 0.25em;
436-
color: #FFF;
444+
color: var(--bs-body-bg);
437445
display: inline-block;
438446
margin: 15px 20px 0px 5px;
439447
position: relative;
@@ -569,3 +577,63 @@
569577
.icon.file.f-scss:after {
570578
border-bottom-color: #30837c;
571579
}
580+
581+
.upload-collapse {
582+
margin: 0 1rem 2rem;
583+
padding: 0rem;
584+
border: 1px dashed var(--bs-border-color);
585+
border-radius: 4px;
586+
background: var(--bs-light-bg-subtle);
587+
position: relative;
588+
min-height: 180px;
589+
}
590+
.upload-collapse h3, .upload-collapse .h3 {
591+
padding: 2rem 4rem;
592+
}
593+
.upload-collapse button#upload-close {
594+
position: absolute;
595+
right: 1rem;
596+
top: 1rem;
597+
z-index: 1000;
598+
}
599+
.upload-collapse input[type=file] {
600+
position: absolute;
601+
z-index: 100;
602+
top: 0;
603+
left: 0;
604+
width: 100%;
605+
height: 100%;
606+
padding: 6rem 4rem 4rem;
607+
display: block !important;
608+
font-size: 1rem;
609+
}
610+
.upload-collapse input[type=file]::-webkit-file-upload-button {
611+
visibility: hidden;
612+
}
613+
.upload-collapse input[type=file]::before {
614+
content: 'Choose files';
615+
color: white;
616+
display: inline-block;
617+
background: gradient(top, rgba(var(--bs-link-color-rgb), 0.85), var(--bs-link-color));
618+
background: -webkit-linear-gradient(top, rgba(var(--bs-link-color-rgb), 0.85), var(--bs-link-color));
619+
border: 1px solid var(--bs-link-color-rgb);
620+
border-radius: 3px;
621+
padding: 0.7rem 1.4rem;
622+
outline: none;
623+
white-space: nowrap;
624+
-webkit-user-select: none;
625+
cursor: pointer;
626+
font-size: 1rem;
627+
font-weight: 500;
628+
box-shadow: 1px 1px 2px 1px rgba(var(--bs-body-color-rgb), 0.07), -1px 1px 2px 0px rgba(var(--bs-body-bg-rgb), 0.15) inset;
629+
}
630+
.upload-collapse input[type=file]:hover::before {
631+
border-color: rgba(var(--bs-link-color-rgb), 0.7);
632+
}
633+
.upload-collapse input[type=file]:active {
634+
outline: 0;
635+
}
636+
.upload-collapse input[type=file]:active::before {
637+
background: gradient(top, var(--bs-link-color), rgba(var(--bs-link-color-rgb), 0.85));
638+
background: -webkit-linear-gradient(top, var(--bs-link-color), rgba(var(--bs-link-color-rgb), 0.85));
639+
}

‎libs/media/media.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ class MediaModal {
4040
<input type="search" id="media-search-input" placeholder="Find a file.." />
4141
</div>
4242
43-
<button class="btn btn-outline-secondary btn-sm btn-icon me-5 float-end"
43+
<button class="btn btn-outline-secondary btn-sm btn-icon me-5 float-end border-secondary-subtle"
4444
data-bs-toggle="collapse"
4545
data-bs-target=".upload-collapse"
4646
aria-expanded="false"
@@ -316,6 +316,7 @@ class MediaModal {
316316

317317
var index = _this.breadcrumbs.find('a').index($(this)),
318318
nextDir = _this.breadcrumbsUrls[index];
319+
nextDir = this.attributes.href.value;
319320

320321
_this.breadcrumbsUrls.length = Number(index);
321322

‎libs/media/openverse.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@ class OpenVerseDisplay extends OpenVerse {
220220

221221
toggleBtn() {
222222
return `
223-
<button class="btn btn-outline-secondary btn-sm btn-icon me-3 float-end" id="openverse-toggle"
223+
<button class="btn btn-outline-secondary btn-sm btn-icon me-3 float-end border-secondary-subtle" id="openverse-toggle"
224224
data-bs-toggle="collapse"
225225
data-bs-target="#openverse-form"
226226
aria-expanded="false"

0 commit comments

Comments
 (0)