X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fmodal%2Fwelcome-modal.component.scss;h=242a498d046f61e75852d9ec4ad1be9bb7836805;hb=8cbc40b2fe9d36ef0505b9441276ca561342e9e9;hp=c04772546102ffd7addbafa340242bdde8e9c0bb;hpb=80c7779efeab644410dee2f21428322b1f0e3500;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss index c04772546..242a498d0 100644 --- a/client/src/app/modal/welcome-modal.component.scss +++ b/client/src/app/modal/welcome-modal.component.scss @@ -1,5 +1,5 @@ -@import '_mixins'; -@import '_variables'; +@use '_mixins' as *; +@use '_variables' as *; .modal-body { font-size: 15px; @@ -17,9 +17,10 @@ } .mascot { + @include margin-right(2rem); + display: block; min-width: 170px; - margin-right: 2rem; } .subtitle { @@ -42,48 +43,35 @@ li { text-align: center; font-weight: 600; font-size: 18px; - margin: 20px 0 40px 0; + margin: 20px 0 40px; } .columns { display: flex; +} - .link-block { - @include disable-default-a-behaviour; - - color: var(--mainForegroundColor); - padding: 10px; - transition: background-color 0.2s ease-in; - flex-basis: 33%; - - &:hover { - background-color: rgba(0, 0, 0, 0.05); - } +.link-block { + @include disable-default-a-behaviour; - .link-title { - font-size: 16px; - font-weight: $font-semibold; - display: flex; - justify-content: center; - margin-bottom: 5px; - } + color: pvar(--mainForegroundColor); + padding: 10px; + transition: background-color 0.2s ease-in; + flex-basis: 33%; - .link-title, - div { - text-align: center; - } + &:hover { + background-color: rgba(0, 0, 0, 0.05); } -} -.configure-instance-button { - @include peertube-button; - @include orange-button; - @include disable-default-a-behaviour; - - display: inline-block; -} + .link-title { + font-size: 16px; + font-weight: $font-semibold; + display: flex; + justify-content: center; + margin-bottom: 5px; + } -.action-button-understood { - @include peertube-button; - @include grey-button; + .link-title, + div { + text-align: center; + } }