Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix options menu size #2673

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Fix options menu size #2673

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
fd05b18
Fix menu size
4yman-0 Nov 12, 2024
9388443
satus - Use grid for section
4yman-0 Nov 15, 2024
e313e06
satus - Attempt fixing
4yman-0 Nov 15, 2024
6abc84e
satus - Attempt fixing (again)
4yman-0 Nov 15, 2024
2a4ae1b
Add margin to grid
4yman-0 Nov 15, 2024
a9fff72
Go back to flex (w/ %)
4yman-0 Nov 18, 2024
7ac6299
Merge branch 'master' into options-max-size
4yman-0 Dec 1, 2024
632cead
Merge branch 'master' into options-max-size
4yman-0 Dec 5, 2024
631a229
Merge branch 'code-charity:master' into options-max-size
4yman-0 Dec 12, 2024
6b9e14c
Merge branch 'master' into options-max-size
4yman-0 Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion menu/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">
<title>ImprovedTube</title><style>body{width:320px;max-width:320px; margin:0; min-height:522 !important;height:584px;max-height:584px;}</style>
<title>ImprovedTube</title><style>body{min-width:320px; margin:0; min-height:586px;"}</style>
<script src="satus.js"></script>
<script src="skeleton.js"></script>
<script src="functions.js"></script>
Expand Down
81 changes: 19 additions & 62 deletions menu/satus.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,8 @@
.satus-section--card, .satus-select, .satus-switch, .satus-switch__content {transition: background-color 0.8s ease-out !important;}
.satus-section--card, .satus-select, .satus-switch, .satus-switch__content {transition: background-color 0.8s ease-out;}
.satus-section--card:hover, .satus-select:hover, .satus-switch:hover, .satus-switch__content:hover {transition: background-color 0.08s ease-out !important;}

*[data-value][data-value="false"] {margin-bottom: 0; margin-top: 0; transition: margin 0.14s linear !important;}
*[data-value][data-value="true"] {margin-bottom: -4.5px !important; margin-top: -3.5px; transition: margin 0.2s linear !important;}

.satus-button--general, .satus-button--appearance, .satus-button--player {
margin-left: 9px !important;
margin-right: -18px !important;
max-width: 272px !important;
}
div:not([home-style="list"]) .satus-button--themes, div:not([home-style="list"]) .satus-button--playlist,div:not([home-style="list"]) .satus-button--channel, div:not([home-style="list"]) .satus-button--shortcuts {
transform: scale(0.91);
margin-top: -10px !important;
margin-left: -5px !important;
margin-right: -28px !important;
}
div:not([home-style="list"]) .satus-button--blocklist, div:not([home-style="list"]) .satus-button--analyzer {
transform: scale(0.78);
margin-top: -22px !important;
margin-left: 110px !important;
margin-right: -150px !important;
}

div[home-style="list"] .satus-button--themes, div[home-style="list"] .satus-button--playlist,div[home-style="list"] .satus-button--channel, div[home-style="list"] .satus-button--shortcuts {
transform: scale(0.92);
margin-bottom: -17px !important;
margin-left:3px !important;
max-width: 197px !important;
margin-top:2px !important;
}
div[home-style="list"] .satus-button--blocklist, div[home-style="list"] .satus-button--analyzer {
transform: scale(0.75);
margin-left: 165px !important;
max-width: 141px !important;
margin-top: -72px !important;
}
div[home-style="list"] .satus-button--analyzer {margin-top: -16px !important;}

*[data-value][data-value="false"] {margin-bottom: 0; margin-top: 0; transition: margin 0.14s linear;}
*[data-value][data-value="true"] {margin-bottom: -4.5px !important; margin-top: -3.5px; transition: margin 0.2s linear;}

/*--------------------------------------------------------------
# SCROLLBAR
Expand Down Expand Up @@ -714,9 +680,8 @@ As our Syntax markup isnt read for <textarea>, is it?
--------------------------------------------------------------*/

.satus-section {
display: flex;

flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}


Expand Down Expand Up @@ -794,13 +759,11 @@ As our Syntax markup isnt read for <textarea>, is it?
}

.satus-section--card>[class^='satus']:not(.satus-list):not(.satus-section) {
display: flex;

min-height: 48px;
padding: 8px 12px;

transition: background-color .18s cubic-bezier(.25, .8, .5, 1);
text-align: left;
padding: 8px 12px;

border-radius: 0;

Expand Down Expand Up @@ -860,8 +823,7 @@ As our Syntax markup isnt read for <textarea>, is it?
display: flex;
flex-direction: column;

width: 100%;
height: 100%;
min-height: inherit;

color: var(--satus-base-foreground);
background: var(--satus-base-background);
Expand Down Expand Up @@ -1182,26 +1144,21 @@ As our Syntax markup isnt read for <textarea>, is it?
--------------------------------------------------------------*/

.satus-button {
font: inherit;

position: relative;

font: inherit;
display: inline-flex;
overflow: hidden;

height: 36px;
padding: 8px;
align-items: center;
overflow: hidden;
height: 36px;
padding: 8px;

transition: background-color .3s cubic-bezier(.25, .8, .5, 1);
transition: background-color .3s cubic-bezier(.25, .8, .5, 1);

color: inherit;
border: none;
border-radius: 6px;
outline: none;
background: transparent;

appearance: none;
align-items: center;
color: inherit;
border: none;
border-radius: 6px;
outline: none;
background: transparent;
appearance: none;
}

.satus-button:hover {
Expand Down
44 changes: 34 additions & 10 deletions menu/styles/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,52 @@
/*--------------------------------------------------------------
>>> HOME:
----------------------------------------------------------------
# Section
# Buttons
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# SECTION
--------------------------------------------------------------*/

.satus-section--home {
display: flex/*grid*/;
flex-wrap: wrap;
padding: 8px;

/*grid-template-columns: repeat(3, 1fr);
grid-row-gap: 8px;*/
}

/*--------------------------------------------------------------
# BUTTONS
--------------------------------------------------------------*/

.satus-button--general,
.satus-button--player,
.satus-button--appearance {
width: 33%;
}

.satus-button--shortcuts,
.satus-button--channel,
.satus-button--playlist,
.satus-button--themes {
width: 25%;
}

.satus-button--blocklist,
.satus-button--analyzer {
width: 50%;
transform: scale(.9);
}

.satus-section--home .satus-button {
display: flex;
flex-direction: column;
align-items: center;

width: calc(100% / 3);
height: unset;
margin: 8px 0 0;
padding: 8px 0;
}

.satus-base:not([improvedtube-home='list'])[page] .satus-section--home .satus-button {
width: 96px;
}

.satus-section--home .satus-button:focus,
Expand Down Expand Up @@ -55,10 +82,7 @@
}

.satus-section--home .satus-button> :nth-child(2) {
overflow: hidden;

width: 100%;
padding: 0 8px;

text-align: center;
white-space: nowrap;
Expand Down
Loading