From e4df8b6657f158e697604dd8eb304b223e63d2db Mon Sep 17 00:00:00 2001
From: "Jan C. Borchardt" <hey@jancborchardt.net>
Date: Mon, 24 Aug 2020 21:49:47 +0200
Subject: [PATCH] Fix Dashboard CSS indentation
Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
Signed-off-by: npmbuildbot[bot] <npmbuildbot[bot]@users.noreply.github.com>
---
apps/dashboard/js/dashboard.js | Bin 929919 -> 930180 bytes
apps/dashboard/js/dashboard.js.map | Bin 2925783 -> 2925753 bytes
apps/dashboard/src/App.vue | 389 +++++++++---------
.../src/components/BackgroundSettings.vue | 82 ++--
4 files changed, 234 insertions(+), 237 deletions(-)
diff --git a/apps/dashboard/js/dashboard.js b/apps/dashboard/js/dashboard.js
index fcffa06e3ffb755d1352acf9ef5c3d81922b56b4..3783f58bf10be7b789d7ccf6abaa60a957cce864 100644
GIT binary patch
delta 1626
zcmai!ZA?>F7{_xd?YXx+Pe7pf0+ON*CbqSfLTh~q#1~QxK_iJ8QcUIEO=CwHt!#r3
zN@CQ+#ApmYpM3kUneBsLFu5%5#g9uC6Bo06G#bCSuvpLyp`!Irx%U)w+lT*6{{QoP
zo^#GU_uTBG;Hf9U)NRQfmb<lp-yhI?G?lW}QfFA|lzoj_gBoneMOD<h3#!gchb688
zE(=#7mzB%L#kgcHh0D%Wq)&(8;Ma_|&;m_9>PSPEVf63Qz$AHLC_*(J+X{L#340YI
za*;O;<#Z(tKpj)C?1Ka6r=ZwqNf%{SNk30Pz)U{ZSs9f)2kisJ4wJg|95xjj(}q5Y
zcb`lQ(*8+UP4}vqog6P<qsi`l0W<lgh0gsA=VjHuDY&^o^XfJKK%Hb-nqR=>CI-}e
z-)bdqtqmwO4JZB&aMF&K&?KmlmoOllWd=rtyFLRB;eMQfF4_HscJ##Yq?>+_u$Jyf
zSVt|ha8OX!XTfhb)*M;b?1cwbg$grJCAg0>uuiy+3~W%$Dr%pDwPJ8A1BXOQ7d^|s
zYA|7^vp&cFYx(Fa_)auyor4X+4a`AsababtGuo*}lTmlS+n9r%&Vff1RlkNh)9G!m
zp<G(r!$HGupx8v{@*5cbZ(>gtss-Phg)fDh%z`hk`nNmQiqRGv7l0&TnQ+$%u!4LN
zmWt@E1w(XN!lw6+Z>ylP5>}a8j=cL=T^>#4r`;Rv(PD|EuO&hg1-Mc);4?3$6n`v=
z@?KmH_^SX{2!Jnb3$<GEYjV+zrO{bYv#$`lgd6&X`N(^dF-jL=*v$22D|)07;|L?6
zWAT2iZ;&3hGACWNVcxR%<z6!%mC`nbcC!PmV(1pGo#Cz}$3SBY{enm{+_H2+7ZuA`
zDVUK<%t3uJ?iA5aGDd~t_pzMr|IV*;vx0dyB&OhYL5WRIC>Stvz21($R2V-Ieb$Mq
zfPBmC4obJ#O6XTNI_QDFXeAvvg$T!@J!(ul(A^i0#pt0MhZI#yB>UoDX(~xYSVpNj
ztK)rCKjcBLg04m7^SnKgYjt>gz)Q7_xL$tedA9?N=ur%}Mn4@upXDQ0cPyGnga%{r
msCvBT(@>4(S@_P95zlAwlRZgI9n!}`SOH>#f9%F@|9lIvto#lD
delta 1519
zcmah}OK1~O6eUR~Gl}=nR+Cul$F$mNHHp!rY1$&xPm#2CAqW*pl`$EO_(^Qj&={?)
z3KoQ-NP8EexDip%ji2#@h@j|3Y!O$2-<7KvKQ+e0_*%@oX%t<Yz&ZDv`|f-5UXH!@
z=H7URu50W*VU^462}l7ElS5n`cKbBlLZjsNdYdHwv{ZrNHmEp0<<n4TDRdM?6dZ+~
zf~OED3=~F+Ir5Ybx-Rhk?QT!Q4iQU?#Du{FwC5H1b^>^f@VnlF)ee0bzWE3phP-4$
zX97%kHUWT}lTiBC!e|nT^DXg|z?b9wBs40@ewm+#C7(e0OW3Tqu6}}*#rb8McZB@?
zeR16M5i0R%6>miIXIP<lJ3d27P1fLvFEA>&8XFp#JW@ce{t8Pp3dQLG#yvb>>jcN4
zvrZ2<GzGi=XRzYBZ{T6B;csw&F<lDA7(1T=Gh_Esuoc_C!yzU;`wnhne!!mJJ3IND
zGoULC70lO_hQ(&)3x!4hu1Kue=~#&mGGHm~4u}!a9<?hL9L&HXmVcLqEo>bdo=QU{
zC}yj5*^J+yC<XC{Kj1QJ7R|tN#x7;RJ3ClD*D4kcg!8lDV4=<|EK!(zFbgKthuN5e
zTBV4Oe!^kKX4hglsA4te9o~f3au86Yv4v!nYPQL{oMkLbZY@&wX>;^N#7KXi)c420
z9U8J!X@pfpq#18$hzA#FNek0^v_$ophACU7G;bFDkzG;gA8TZ_WIn#4Kdd2@ROd8f
zXxEW4W}uU_;02vJGb7~+r4g37T12)oMjw0=c5=kWq}BnxOuoqxi>8E)9}GpM-Z;M9
zz*{k+SC2(sbIr6g7tip-$l46>#Ln0ip0pL5K9&l^%^aPA`YcZhM0I6{PxEG+5XgFF
zuP_jiG5YXKIPrqM-E#)AnBDF;4z}~Pm^7%5i0(P8MCB19d1A@`Rmfe{WC0Z0wu}DV
zJ9|U@`vShb;!d1ALaMd(aZC;i^J>?|e1WAkK}ifqy*2gp(!};ij@bceHBQ!%dUPEn
oR^0Yj&*8Y8nDMop#N~?)VmHV^FLCPRdo9EQY?PN9$fXaz0DjEgJOBUy
diff --git a/apps/dashboard/js/dashboard.js.map b/apps/dashboard/js/dashboard.js.map
index e3003a3083e1fb44db64e71db72eead6443d6b1b..5a9b66e4c4e7f428ec1f4a532584c2bfc52d3a81 100644
GIT binary patch
delta 4614
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
delta 4511
zcmaJ_3ve6d5gy_9Q?_MG@+0y&jvxP8k|jHqZJC%j#DO$5A(Zf{lFZ3ETW8BUSvotm
z6JP=zGNmmH4b9F_T44I5lT1VDAYkZ}X=mDDAV3HvG$BtyLqc#K3^Q$Mp?fFYoov#M
zXJzgF`|s|*`|bX}{nBf{GaVs1&}YsH3Y~kdtb&{ydV(QgPkCX}o~K)iepr(G{Ljoi
zZP_C}U(cRRs|K?LU#~Bv*V`5Jq`nOYJ<4L^^UwBuYRVP_Z|9yTR_)L7c6BS#2PgV>
zPxPCJt|Q7K$|lMo$|cGp$|ouyDkLf*Do#%Hm-KyDIy<*vV8AoC!MR~zFzQXd&`>&O
z_DeSntRHZSYX)u{aPrE>rh#<>&N~Ng8gP!^sPN*TqOfUT=4M5_UHv4nXAN%jmU78m
z-qQN(vZvMz%E>=<mR`-mp1x8`@*mx$hl@>fyWdz_N@OM~BPu7VNWQVwvTk4AaB!us
zYlO!y-)7axjw=?6DZit0r7t9e_~g)4%XdvB-exhhs<XSRtJf!l@c1#(`}b#-GE;uH
zu(GG8R~SaptJ&@T+(J}IR7GSZvJu&ds)>~KTB16lWke35dLoXffoM5VBhd<?CZcAd
zmZbah*4K_{Atour$4nZh28_Rbhh5Mmhc2>8{QY6}4Na2Fd6(sx^3zA$g3ldcc683O
z4Ti{cgf-yP^Q?S{=;%B%Yi96}%~6Yw{G~1z%im*OU3}mKt4B|+BM+tb*lmjpfUfi}
z+F{lr@Q+BtQ;8k;lXuxNJU9vYxa|n@8atn~K{XzDpS9roM_6*PJW29jUb7lIkFwjZ
zvGC7)t!T*;AFvja&LRbVD{eVKdC)Wz(L)6qw*{{pt+U{(rH*3UdXn8^sJ(iU{isP-
zbGl=EREQ+{L*n$eL%htprd`@1&Yfag@zg2SitVS_X2ZnyPqUSUn%0(7F81DEmxl|d
znZr=4Ji}HP-0Cx|EhD_Xv#ilreCiCl%iz8`!|IE5`y2<TX#da6yFO&UF*bLeWo-sG
za+dWh-dJ0~@n1XXyJwl(*i`rtYtgx6??<dMBl894Sd+ep5B#0oZ*Ys(eCIN=5qsHD
ziLrAmWT<~|j&)=N$B)%n(e*KVu~9#})18occ`6|!z83Q33(Sg+^Q^+Kx9bz;$M|{X
zQ;OD%|2fa9jK!J@tj^&2i38n@pC6XRY2p8Sv*C{~Fq>h50<htsrJ{C2fx_v-;3t`T
zNOap01?xpNWQfKuvaJS3<KO{<YuN6vCljACYeqF5TVQt>8furT?flXLtEdQfel2TV
zmzc}YAG^c`mloj7OKhc~QFxj48Qjq2Owi6;W_KHFf4j{13|pr=9CrLP0mV3ah1oN^
z<&S@LRN+srWIzn*oV}QPm38apl7m;-`sLYyXh6ot-eXmmH43%nk%%zk+8*a)eopzs
zumsE7NF^Y<gZ%LLXk40#hPWNdF6C#t7?Q(&&fD#a&Gf0JN~^$z_83^PON4T~xr*ZR
z+o1%vRe=K=LQsnbV$g*<W8lN*$Dk6;R>;8$D^%eZgQWbL4NCC_D=fo11GG)B0^r?~
zP>1_QXmxV{%z4f3VJRZT@yZ~%IT<7ym#pOLaDr@@L&PdO-OcVa=Coj&{b6ZZh&v5l
zowTXb;9WN8Ou2mA25ovQfG;Z1e`$l7)HgaunW+yC*vZ*y5pr>e)+++?uoRVrsO;xj
zT2h%fD$yApw9~MD!VVlZS;@i?8<=xE9uL8`VKZ3p;2n^kr^It_Ae#Kr4qYYso#1bV
z^E#tkym(^^oYf>rcPk7QB!BLOHV4j7-aP9k_))=clt!GG5JDm^lT40J3HqtSd^8jh
z;;s1H?O@3b3w%h3<D+{xt8dNh`cP|2O47o#ECuA0gyzI-M94sa>X2K7CF`KRK-0b#
z`64>k{6=u$^|!(ccxMTeCGXe-O=b*KQt`)lC@JnI_2~8Oszuz&L*sP>!d*O6mKc!o
zc$&~t1w;6m4I1%=<BVoe5Q^|{kdjIDHsh~{>6;v+EI%5A=Hh_d7?eV@E}CU=eA*6n
zoDV{mYWX<LD$g)f7O9C&#fp!dX7zc^>FOT}LT_4?+k2AL;Sa(D*ZBmUMMabf+;d?l
zDd_Cbpngk;P&p$KD&-JV+?BGeR8nz}zV)<vq#K2wk|h-#0eOOtkBU)0w@5_2m+q)8
zk4N+KwgTx1i4MD2A`ICDs9P40mvpLXHSHTW2vFOjr?Rs{Go^SnTu_FW#Nt)j7~cxQ
z3UnT;E5ch(up)e0fLtXtCj@Zf<5kd}qc;EI{5?DZZrqlD+$>teKa4;Pg~&-Uepr-e
z{hY_`O}o-UTo|F`JsYNi9t%N%Lm4J>E-@MsW@wzGbpx_2(ID#bpd?Z`zY?LkM)e(#
zo1L8BKkW($LX3lS4QEGbR6H|E!T))bAaiyU8ZawNX=?~m+SF;XHVhSbdzgAsVe|O(
z&R4>O%)0|nRM^jjJJLe6e_svLIGYbcrIj*H9qvkqbJS6KM)3>9!R1NP@`yCY)L}tm
z!J-d~LJW)KlyK5)QF=)n4bzb5(g)^#5tid~V`ShAsg%+nnTjW*xSt!1^Fh3Kl44yq
zP8eS^2KBgYj3!=U3|6Z<3UoN*!7;d5DN^0bj%sv|gT0n=#PxG27`j~P>6AX&mT{=2
zlq<EMysN*`b#aeKk}Slz9k?t+{(dzMy=4J8C{ZOQsElf1@FLm2hwQsY#CU>+OEhIx
zu@#dNqAW^;>x3*0kI(9r)J%8{EH3g(vr2ZQUW)io999&i`$K6D9I7I)U<Asl$paq>
ziP2F)2{j_8B33yDz7nBK5j>mlsgGH%dav!B02_@39fe-33xUI~9W}$HIvsK21hgqh
zq~G;;;S<(|2WhZeyA|5dPgjD;iT&Z!q;cTBC|Dbpq;o<F@sVxY7N`Gs6sqaQP<m0r
zL$_x-tVGA*atW%kDd-436DAlb-GQ4V8b;~__#S=h)05!Rv#P;KFKR?IiW1?2LL?K_
zpG%ac#ww^R&%DHaN@-FT+o>SAR?eebiz{$TyQ4hyQrH)R9v$SlIUOtYEp#uIqhpfp
zN}82+d%8~vC8=9iiw5^kLOZr>COxI$EMhb^C8z%6;o3MgQrtKRH|2*r(-ALB(%}o^
z(4eMF8JaG2EcnQGsy}XtgO_^29h@SVMpJpiIGsQl&iM*VlsNHC>ie>E@hOFA^T*@r
ztklM_M<2-P6Yxu34SYJ-9V+Tt6VQv_nS=_9dpNEDD&cYo+6xKqOAwIgSpub+v9!~-
z65s{BR*M>8BqGLK5iudVCg`=2*5_pK*i-ssNq@4ZSJeyRTN3yyuXQQlD>BrXQ{#aC
z221a0r~+%g<{0Ve;l%w%SqYZZ(CEDHGt1E4?NEkqRD<_g^7u4-Q-4V!Jylw9VH!qE
xUaZ+pt$N=(tmqp55>Q?+Yw_V0c+%KQ@0edC+h-w?wfps*K-89eeW!Dw<-Z*cA|C(%
diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index 807b5cc2d83..aea3dabc577 100644
--- a/apps/dashboard/src/App.vue
+++ b/apps/dashboard/src/App.vue
@@ -370,243 +370,242 @@ export default {
</script>
<style lang="scss" scoped>
- #app-dashboard {
- width: 100%;
- background-size: cover;
- background-position: center center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- background-color: var(--color-primary);
- --color-background-translucent: rgba(255, 255, 255, 0.8);
- --background-blur: blur(10px);
-
- #body-user.theme--dark & {
- background-color: var(--color-main-background);
- --color-background-translucent: rgba(24, 24, 24, 0.8);
- }
-
- #body-user.theme--highcontrast & {
- background-color: var(--color-main-background);
- --color-background-translucent: var(--color-main-background);
- }
-
- > h2 {
- color: var(--color-primary-text);
- text-align: center;
- font-size: 32px;
- line-height: 130%;
- padding: 120px 16px 0px;
- }
+#app-dashboard {
+ width: 100%;
+ background-size: cover;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ background-color: var(--color-primary);
+ --color-background-translucent: rgba(255, 255, 255, 0.8);
+ --background-blur: blur(10px);
+
+ #body-user.theme--dark & {
+ background-color: var(--color-main-background);
+ --color-background-translucent: rgba(24, 24, 24, 0.8);
}
- .panels {
- width: auto;
- margin: auto;
- max-width: 1500px;
- display: flex;
- justify-content: center;
- flex-direction: row;
- align-items: flex-start;
- flex-wrap: wrap;
+ #body-user.theme--highcontrast & {
+ background-color: var(--color-main-background);
+ --color-background-translucent: var(--color-main-background);
}
- .panel, .panels > div {
- width: 320px;
- max-width: 100%;
- margin: 16px;
- background-color: var(--color-background-translucent);
- -webkit-backdrop-filter: var(--background-blur);
- backdrop-filter: var(--background-blur);
- border-radius: var(--border-radius-large);
-
- #body-user.theme--highcontrast & {
- border: 2px solid var(--color-border);
- }
-
- &.sortable-ghost {
- opacity: 0.1;
- }
+ > h2 {
+ color: var(--color-primary-text);
+ text-align: center;
+ font-size: 32px;
+ line-height: 130%;
+ padding: 120px 16px 0px;
+ }
+}
- & > .panel--header {
- display: flex;
- z-index: 1;
- top: 50px;
- padding: 16px;
- cursor: grab;
+.panels {
+ width: auto;
+ margin: auto;
+ max-width: 1500px;
+ display: flex;
+ justify-content: center;
+ flex-direction: row;
+ align-items: flex-start;
+ flex-wrap: wrap;
+}
- &, ::v-deep * {
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
+.panel, .panels > div {
+ width: 320px;
+ max-width: 100%;
+ margin: 16px;
+ background-color: var(--color-background-translucent);
+ -webkit-backdrop-filter: var(--background-blur);
+ backdrop-filter: var(--background-blur);
+ border-radius: var(--border-radius-large);
+
+ #body-user.theme--highcontrast & {
+ border: 2px solid var(--color-border);
+ }
- &:active {
- cursor: grabbing;
- }
+ &.sortable-ghost {
+ opacity: 0.1;
+ }
- a {
- flex-grow: 1;
- }
+ & > .panel--header {
+ display: flex;
+ z-index: 1;
+ top: 50px;
+ padding: 16px;
+ cursor: grab;
+
+ &, ::v-deep * {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
- > h2 {
- display: block;
- flex-grow: 1;
- margin: 0;
- font-size: 20px;
- line-height: 24px;
- font-weight: bold;
- background-size: 32px;
- background-position: 14px 12px;
- padding: 16px 8px 16px 60px;
- height: 56px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- cursor: grab;
- }
+ &:active {
+ cursor: grabbing;
}
- & > .panel--content {
- margin: 0 16px 16px 16px;
- height: 420px;
- // We specifically do not want scrollbars inside widgets
- overflow: hidden;
+ a {
+ flex-grow: 1;
}
- // No need to extend height of widgets if only one column is shown
- @media only screen and (max-width: 709px) {
- & > .panel--content {
- height: auto;
- }
+ > h2 {
+ display: block;
+ flex-grow: 1;
+ margin: 0;
+ font-size: 20px;
+ line-height: 24px;
+ font-weight: bold;
+ background-size: 32px;
+ background-position: 14px 12px;
+ padding: 16px 8px 16px 60px;
+ height: 56px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ cursor: grab;
}
}
- .footer {
- text-align: center;
- transition: bottom var(--animation-slow) ease-in-out;
- bottom: 0;
- padding: 44px 0;
+ & > .panel--content {
+ margin: 0 16px 16px 16px;
+ height: 420px;
+ // We specifically do not want scrollbars inside widgets
+ overflow: hidden;
+ }
- &.firstrun {
- position: sticky;
- bottom: 10px;
+ // No need to extend height of widgets if only one column is shown
+ @media only screen and (max-width: 709px) {
+ & > .panel--content {
+ height: auto;
}
}
+}
- .edit-panels {
- display: inline-block;
- margin:auto;
- background-position: 16px center;
- padding: 12px 16px;
- padding-left: 36px;
- border-radius: var(--border-radius-pill);
- max-width: 200px;
- opacity: 1;
- text-align: center;
+.footer {
+ text-align: center;
+ transition: bottom var(--animation-slow) ease-in-out;
+ bottom: 0;
+ padding: 44px 0;
+
+ &.firstrun {
+ position: sticky;
+ bottom: 10px;
}
+}
- .edit-panels,
- .statuses ::v-deep .action-item > button,
- .statuses ::v-deep .action-item.action-item--open .action-item__menutoggle {
- background-color: var(--color-background-translucent);
- -webkit-backdrop-filter: var(--background-blur);
- backdrop-filter: var(--background-blur);
+.edit-panels {
+ display: inline-block;
+ margin:auto;
+ background-position: 16px center;
+ padding: 12px 16px;
+ padding-left: 36px;
+ border-radius: var(--border-radius-pill);
+ max-width: 200px;
+ opacity: 1;
+ text-align: center;
+}
- &:hover,
- &:focus,
- &:active {
- background-color: var(--color-background-hover);
- }
+.edit-panels,
+.statuses ::v-deep .action-item > button,
+.statuses ::v-deep .action-item.action-item--open .action-item__menutoggle {
+ background-color: var(--color-background-translucent);
+ -webkit-backdrop-filter: var(--background-blur);
+ backdrop-filter: var(--background-blur);
+
+ &:hover,
+ &:focus,
+ &:active {
+ background-color: var(--color-background-hover);
}
+}
- .modal__content {
- padding: 32px 16px;
- max-height: 70vh;
- text-align: center;
- overflow: auto;
-
- ol {
- display: flex;
- flex-direction: row;
- justify-content: center;
- list-style-type: none;
- padding-bottom: 16px;
- }
- li {
- label {
- display: block;
- padding: 48px 8px 16px 8px;
- margin: 8px;
- width: 160px;
- background-color: var(--color-background-hover);
- border: 2px solid var(--color-main-background);
- border-radius: var(--border-radius-large);
- background-size: 24px;
- background-position: center 16px;
- text-align: center;
-
- &:hover {
- border-color: var(--color-primary);
- }
- }
+.modal__content {
+ padding: 32px 16px;
+ max-height: 70vh;
+ text-align: center;
+ overflow: auto;
- input:focus + label {
+ ol {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ list-style-type: none;
+ padding-bottom: 16px;
+ }
+ li {
+ label {
+ display: block;
+ padding: 48px 8px 16px 8px;
+ margin: 8px;
+ width: 160px;
+ background-color: var(--color-background-hover);
+ border: 2px solid var(--color-main-background);
+ border-radius: var(--border-radius-large);
+ background-size: 24px;
+ background-position: center 16px;
+ text-align: center;
+
+ &:hover {
border-color: var(--color-primary);
}
}
- h3 {
- font-weight: bold;
-
- &:not(:first-of-type) {
- margin-top: 64px;
- }
+ input:focus + label {
+ border-color: var(--color-primary);
}
+ }
- // Adjust design of 'Get more widgets' button
- .button {
- display: inline-block;
- padding: 12px 24px;
- margin: 0;
+ h3 {
+ font-weight: bold;
+
+ &:not(:first-of-type) {
+ margin-top: 64px;
}
+ }
- p {
- max-width: 650px;
- margin: 0 auto;
+ // Adjust design of 'Get more widgets' button
+ .button {
+ display: inline-block;
+ padding: 12px 24px;
+ margin: 0;
+ }
- a:hover,
- a:focus {
- border-bottom: 2px solid var(--color-border);
- }
+ p {
+ max-width: 650px;
+ margin: 0 auto;
+
+ a:hover,
+ a:focus {
+ border-bottom: 2px solid var(--color-border);
}
+ }
- .credits--end {
- padding-bottom: 32px;
- color: var(--color-text-maxcontrast);
+ .credits--end {
+ padding-bottom: 32px;
+ color: var(--color-text-maxcontrast);
- a {
- color: var(--color-text-maxcontrast);
- }
+ a {
+ color: var(--color-text-maxcontrast);
}
}
+}
- .flip-list-move {
- transition: transform var(--animation-slow);
- }
+.flip-list-move {
+ transition: transform var(--animation-slow);
+}
- .statuses {
- display: flex;
- flex-direction: row;
- justify-content: center;
- flex-wrap: wrap;
- margin-bottom: 36px;
+.statuses {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ flex-wrap: wrap;
+ margin-bottom: 36px;
- & > div {
- margin: 8px;
- }
+ & > div {
+ margin: 8px;
}
-
+}
</style>
diff --git a/apps/dashboard/src/components/BackgroundSettings.vue b/apps/dashboard/src/components/BackgroundSettings.vue
index 1adf8b0bdfe..be94737fdad 100644
--- a/apps/dashboard/src/components/BackgroundSettings.vue
+++ b/apps/dashboard/src/components/BackgroundSettings.vue
@@ -134,56 +134,54 @@ export default {
</script>
<style scoped lang="scss">
+.background-selector {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
- .background-selector {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
+ .background {
+ width: 176px;
+ height: 96px;
+ margin: 8px;
+ background-size: cover;
+ background-position: center center;
+ text-align: center;
+ border-radius: var(--border-radius-large);
+ border: 2px solid var(--color-main-background);
+ overflow: hidden;
- .background {
- width: 176px;
- height: 96px;
- margin: 8px;
- background-size: cover;
- background-position: center center;
- text-align: center;
- border-radius: var(--border-radius-large);
- border: 2px solid var(--color-main-background);
- overflow: hidden;
-
- &.current {
- background-image: var(--color-background-dark);
- }
+ &.current {
+ background-image: var(--color-background-dark);
+ }
- &.filepicker, &.default, &.color {
- border-color: var(--color-border);
- }
+ &.filepicker, &.default, &.color {
+ border-color: var(--color-border);
+ }
- &.color {
- background-color: var(--color-primary);
- color: var(--color-primary-text);
- }
+ &.color {
+ background-color: var(--color-primary);
+ color: var(--color-primary-text);
+ }
- &.active,
- &:hover,
- &:focus {
- border: 2px solid var(--color-primary);
- }
+ &.active,
+ &:hover,
+ &:focus {
+ border: 2px solid var(--color-primary);
+ }
- &.active:not(.icon-loading):after {
- background-image: var(--icon-checkmark-fff);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 44px;
- content: '';
- display: block;
- height: 100%;
+ &.active:not(.icon-loading):after {
+ background-image: var(--icon-checkmark-fff);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 44px;
+ content: '';
+ display: block;
+ height: 100%;
- body.theme--dark & {
- background-image: var(--icon-checkmark-000);
- }
+ body.theme--dark & {
+ background-image: var(--icon-checkmark-000);
}
}
}
-
+}
</style>
--
GitLab