diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css index 067c5e0f..a7a404c9 100644 --- a/src/renderer/components/ft-select/ft-select.css +++ b/src/renderer/components/ft-select/ft-select.css @@ -38,7 +38,7 @@ font-family: inherit; background-color: transparent; color: var(--primary-text-color); - width: 200px; + width: 240px; padding: 10px 10px 10px 0; font-size: 18px; border-radius: 0; @@ -143,3 +143,26 @@ pointer-events: none; opacity: 0.5; } + +@media only screen and (max-width: 1000px) { + .select .select-text { + max-width: 240px; + } +} + +@media only screen and (max-width: 800px) { + .select { + width: 100%; + } + .select .select-text { + display:block; + max-width: 95%; + } +} + +@media only screen and (max-width: 680px) { + .select { + padding: 0px; + margin-right: -15px; + } +} diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.sass b/src/renderer/components/ft-settings-section/ft-settings-section.sass index 7f1afebd..c41023fa 100644 --- a/src/renderer/components/ft-settings-section/ft-settings-section.sass +++ b/src/renderer/components/ft-settings-section/ft-settings-section.sass @@ -2,12 +2,19 @@ background-color: var(--card-bg-color) width: 85% margin: 0 auto + @media only screen and (max-width: 800px) + width: 100% &[open] padding-bottom: 15px - @media only screen and (max-width: 680px) - width: 90% + > div + width: 100% + padding: 0px 20px + box-sizing: border-box + > div:not(:last-child):not(.ft-flex-box) + @media only screen and (max-width: 800px) + margin-bottom: 20px .sectionLine width: 100% @@ -52,3 +59,24 @@ @media only screen and (max-width: 500px) :deep(.settingsFlexStart500px) justify-content: flex-start + +@media only screen and (max-width: 680px) + .settingsSection + > div + :deep(.text.bottom) + left: -85px + :deep(.switch-ctn.containsTooltip) + left: -10px + margin-right: 5px + padding: 0px 10px 0px 10px + :not(.select) + > :deep(.tooltip) + display: inline-block + position: absolute + right: -25px + top: 12px + .settingsFlexStart460px :deep(.tooltip) + right: 0px + top: -2px + :deep(.switch-ctn) + margin: 10px 7px diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css index bc91c097..b4169819 100644 --- a/src/renderer/components/ft-slider/ft-slider.css +++ b/src/renderer/components/ft-slider/ft-slider.css @@ -242,3 +242,9 @@ box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important; transform: scale(4, 4); } + +@media only screen and (max-width: 680px) { + .pure-material-slider { + width: 100%; + } +} diff --git a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.sass b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.sass index 66a10f1c..5eab71ed 100644 --- a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.sass +++ b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.sass @@ -1,5 +1,7 @@ .sponsorBlockCategory margin-top: 30px padding: 0 10px + @media only screen and (max-width: 680px) + width: 100% .sponsorTitle font-size: x-large diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass index 74584998..d33e7f66 100644 --- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass +++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass @@ -76,4 +76,6 @@ .switch-input:disabled + & background-color: #BDBDBD - + + @media (max-width: 680px) + max-width: 250px diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue index 03d8d078..e5d910e2 100644 --- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue +++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue @@ -3,7 +3,8 @@ class="switch-ctn" :class="{ compact, - disabled: disabled + disabled: disabled, + containsTooltip: tooltip.length > 0 }" >