feat: migrate to vue 3 (#2689)
--------- Co-authored-by: Joep <jcbuhre@gmail.com> Co-authored-by: Omar Hussein <omarmohammad1951@gmail.com> Co-authored-by: Oleg Lobanov <oleg@lobanov.me>
This commit is contained in:
kloon15
@@ -1,15 +1,11 @@
|
||||
#listing {
|
||||
--item-selected: white;
|
||||
}
|
||||
|
||||
body.rtl #listing {
|
||||
html[dir="rtl"] #listing {
|
||||
margin-right: 16em;
|
||||
}
|
||||
|
||||
#listing h2 {
|
||||
margin: 0 0 0 0.5em;
|
||||
font-size: .9em;
|
||||
color: rgba(0, 0, 0, 0.38);
|
||||
font-size: 0.9em;
|
||||
color: var(--textPrimary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -18,19 +14,22 @@ body.rtl #listing {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#listing>div {
|
||||
#listing > div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#listing .item {
|
||||
background-color: #fff;
|
||||
background: var(--surfacePrimary);
|
||||
border-color: var(--divider);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
color: #6f6f6f;
|
||||
transition: .1s ease background, .1s ease opacity;
|
||||
color: var(--textPrimary);
|
||||
transition:
|
||||
0.1s ease background,
|
||||
0.1s ease opacity;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
@@ -75,13 +74,13 @@ body.rtl #listing {
|
||||
margin: 1em auto;
|
||||
display: block !important;
|
||||
width: 95%;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
color: var(--textPrimary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.message i {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: .2em;
|
||||
margin-bottom: 0.2em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -92,14 +91,18 @@ body.rtl #listing {
|
||||
|
||||
#listing.mosaic .item {
|
||||
width: calc(33% - 1em);
|
||||
margin: .5em;
|
||||
margin: 0.5em;
|
||||
padding: 0.5em;
|
||||
border-radius: 0.2em;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
|
||||
box-shadow:
|
||||
0 1px 3px rgba(0, 0, 0, 0.06),
|
||||
0 1px 2px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
#listing.mosaic .item:hover {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !important;
|
||||
box-shadow:
|
||||
0 1px 3px rgba(0, 0, 0, 0.12),
|
||||
0 1px 2px rgba(0, 0, 0, 0.24) !important;
|
||||
}
|
||||
|
||||
#listing.mosaic .header {
|
||||
@@ -127,16 +130,16 @@ body.rtl #listing {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#listing.mosaic.gallery .item[data-type=image] div:last-of-type {
|
||||
#listing.mosaic.gallery .item[data-type="image"] div:last-of-type {
|
||||
color: white;
|
||||
background: linear-gradient(#0000, #0009);
|
||||
}
|
||||
|
||||
#listing.mosaic.gallery .item i {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
font-size: 8em;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
font-size: 8em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#listing.mosaic.gallery .item img {
|
||||
@@ -159,7 +162,7 @@ body.rtl #listing {
|
||||
#listing.list .item {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid var(--borderPrimary);
|
||||
padding: 1em;
|
||||
border-top: 0;
|
||||
}
|
||||
@@ -168,9 +171,9 @@ body.rtl #listing {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#listing .item[aria-selected=true] {
|
||||
#listing .item[aria-selected="true"] {
|
||||
background: var(--blue) !important;
|
||||
color: var(--item-selected) !important;
|
||||
color: var(--iconSecondary) !important;
|
||||
}
|
||||
|
||||
#listing.list .item div:first-of-type {
|
||||
@@ -202,25 +205,25 @@ body.rtl #listing {
|
||||
|
||||
#listing .item.header {
|
||||
display: none !important;
|
||||
background-color: #ccc;
|
||||
background-color: var(--iconTertiary);
|
||||
}
|
||||
|
||||
#listing.list .header i {
|
||||
font-size: 1.5em;
|
||||
vertical-align: middle;
|
||||
margin-left: .2em;
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
|
||||
#listing.list .item.header {
|
||||
display: flex !important;
|
||||
background: #fafafa;
|
||||
background: var(--background);
|
||||
z-index: 999;
|
||||
padding: .85em;
|
||||
padding: 0.85em;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-bottom: 1px solid var(--borderPrimary);
|
||||
}
|
||||
|
||||
#listing.list .item.header>div:first-child {
|
||||
#listing.list .item.header > div:first-child {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
@@ -232,7 +235,7 @@ body.rtl #listing {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#listing.list .item.header>div:first-child {
|
||||
#listing.list .item.header > div:first-child {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
@@ -250,7 +253,7 @@ body.rtl #listing {
|
||||
|
||||
#listing.list .header i {
|
||||
opacity: 0;
|
||||
transition: .1s ease all;
|
||||
transition: 0.1s ease all;
|
||||
}
|
||||
|
||||
#listing.list .header p:hover i,
|
||||
@@ -272,7 +275,7 @@ body.rtl #listing {
|
||||
height: 4em;
|
||||
padding: 0.5em 0.5em 0.5em 1em;
|
||||
justify-content: space-between;
|
||||
transition: .2s ease bottom;
|
||||
transition: 0.2s ease bottom;
|
||||
}
|
||||
|
||||
#listing #multiple-selection.active {
|
||||
@@ -281,5 +284,5 @@ body.rtl #listing {
|
||||
|
||||
#listing #multiple-selection p,
|
||||
#listing #multiple-selection i {
|
||||
color: var(--item-selected);
|
||||
color: var(--iconSecondary);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user