mirror of
https://github.com/LBRYFoundation/Watch-on-LBRY.git
synced 2025-08-23 17:47:26 +00:00
Updated styles to use em instead of px
This commit is contained in:
parent
4220ea11c7
commit
63d91a2ee1
4 changed files with 34 additions and 21 deletions
|
@ -3,10 +3,11 @@
|
||||||
.ButtonRadio
|
.ButtonRadio
|
||||||
display: flex
|
display: flex
|
||||||
justify-content: center
|
justify-content: center
|
||||||
|
flex-wrap: wrap
|
||||||
|
gap: .25em
|
||||||
|
|
||||||
.radio-button
|
.radio-button
|
||||||
@extend .button
|
@extend .button
|
||||||
margin: 6px
|
|
||||||
|
|
||||||
.radio-button.checked
|
.radio-button.checked
|
||||||
@extend .button.active
|
@extend .button.active
|
||||||
|
|
|
@ -5,30 +5,29 @@ $btn-color: #075656 !default
|
||||||
$btn-select: teal !default
|
$btn-select: teal !default
|
||||||
|
|
||||||
body
|
body
|
||||||
width: 400px
|
width: 30em
|
||||||
text-align: center
|
text-align: center
|
||||||
background-color: $background-color
|
background-color: $background-color
|
||||||
color: $text-color
|
color: $text-color
|
||||||
font-family: sans-serif
|
font-family: sans-serif
|
||||||
|
padding: 1em
|
||||||
|
|
||||||
.container
|
.container
|
||||||
display: block
|
display: block
|
||||||
text-align: center
|
text-align: center
|
||||||
margin: 0 32px
|
|
||||||
margin-bottom: 15px
|
|
||||||
|
|
||||||
.button
|
.button
|
||||||
border-radius: 5px
|
border-radius: .5em
|
||||||
background-color: $btn-color
|
background-color: $btn-color
|
||||||
border: 4px solid $btn-color
|
border: .2em solid $btn-color
|
||||||
color: $text-color
|
color: $text-color
|
||||||
font-size: 0.8rem
|
font-size: 0.8rem
|
||||||
font-weight: 400
|
font-weight: 400
|
||||||
padding: 4px 15px
|
padding: .5em
|
||||||
text-align: center
|
text-align: center
|
||||||
|
|
||||||
&.active
|
&.active
|
||||||
border: 4px solid $btn-select
|
border-color: $btn-select
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
outline: none
|
outline: none
|
||||||
|
|
|
@ -1,4 +1,13 @@
|
||||||
.radio-label
|
.radio-label
|
||||||
font-size: 1.1rem
|
font-size: 1.1rem
|
||||||
margin: 15px auto
|
|
||||||
display: block
|
display: block
|
||||||
|
|
||||||
|
.container
|
||||||
|
display: grid
|
||||||
|
grid-auto-flow: row
|
||||||
|
gap: 1.5em
|
||||||
|
|
||||||
|
.container > section
|
||||||
|
display: grid
|
||||||
|
grid-auto-flow: row
|
||||||
|
gap: 1em
|
|
@ -4,8 +4,6 @@ import { getTargetPlatfromSettingsEntiries, ExtensionSettings, TargetPlatformNam
|
||||||
import { useLbrySettings } from '../common/useSettings'
|
import { useLbrySettings } from '../common/useSettings'
|
||||||
import './popup.sass'
|
import './popup.sass'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/** Utilty to set a setting in the browser */
|
/** Utilty to set a setting in the browser */
|
||||||
const setSetting = <K extends keyof ExtensionSettings>(setting: K, value: ExtensionSettings[K]) => chrome.storage.local.set({ [setting]: value });
|
const setSetting = <K extends keyof ExtensionSettings>(setting: K, value: ExtensionSettings[K]) => chrome.storage.local.set({ [setting]: value });
|
||||||
|
|
||||||
|
@ -17,16 +15,22 @@ function WatchOnLbryPopup() {
|
||||||
const { redirect, targetPlatform } = useLbrySettings();
|
const { redirect, targetPlatform } = useLbrySettings();
|
||||||
|
|
||||||
return <div className='container'>
|
return <div className='container'>
|
||||||
|
<section>
|
||||||
<label className='radio-label'>Enable Redirection:</label>
|
<label className='radio-label'>Enable Redirection:</label>
|
||||||
<ButtonRadio value={redirect ? 'YES' : 'NO'} options={['YES', 'NO']}
|
<ButtonRadio value={redirect ? 'YES' : 'NO'} options={['YES', 'NO']}
|
||||||
onChange={redirect => setSetting('redirect', redirect.toLowerCase() === 'yes')} />
|
onChange={redirect => setSetting('redirect', redirect.toLowerCase() === 'yes')} />
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
<label className='radio-label'>Where would you like to redirect?</label>
|
<label className='radio-label'>Where would you like to redirect?</label>
|
||||||
<ButtonRadio value={targetPlatform} options={platformOptions}
|
<ButtonRadio value={targetPlatform} options={platformOptions}
|
||||||
onChange={(platform: TargetPlatformName) => setSetting('targetPlatform', platform)} />
|
onChange={(platform: TargetPlatformName) => setSetting('targetPlatform', platform)} />
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
<label className='radio-label'>Other useful tools:</label>
|
<label className='radio-label'>Other useful tools:</label>
|
||||||
<a href='/tools/YTtoLBRY.html' target='_blank'>
|
<a href='/tools/YTtoLBRY.html' target='_blank'>
|
||||||
<button type='button' className='btn1 button is-primary'>Subscriptions Converter</button>
|
<button type='button' className='btn1 button is-primary'>Subscriptions Converter</button>
|
||||||
</a>
|
</a>
|
||||||
|
</section>
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue