elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-24 20:08:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Control Bar Mobile Sizing

Browse Source
This commit is contained in:
lindenkron 2023-04-08 23:52:19 +02:00
parent 6e5052f7e6
commit ffc478bed5
1 changed files with 26 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
main.css
View File

@ -1166,12 +1166,12 @@ button.glyphicon-button.active.focus {
position: fixed; position: fixed;
z-index: 995; z-index: 995;
bottom: 0px; bottom: 0px;
border: 0;
pointer-events: none;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 60px; transform-origin: bottom; /* Keeps it at bottom even if scaled */
border: 0;
pointer-events: none;
} }
#controlButtons:empty { #controlButtons:empty {
display: none; display: none;
@ -1179,14 +1179,16 @@ button.glyphicon-button.active.focus {
#subControlButtons { #subControlButtons {
display: flex; display: flex;
border-radius: 38px;
background-color: var(--discord-grey-0); background-color: var(--discord-grey-0);
box-shadow: 0px 0px 10px rgba(0,0,0,1); box-shadow: 0px 0px 10px rgba(0,0,0,1);
top: -10px; margin: 5px;
position: absolute;
pointer-events: auto; pointer-events: auto;
border: #cccccc22 1px solid; border: #cccccc22 1px solid;
border-radius: 10px; border-radius: 10px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
min-width: 0%;
} }
#subControlButtons:empty{ #subControlButtons:empty{
@ -1234,8 +1236,8 @@ button.glyphicon-button.active.focus {
} }
@media only screen and (max-width: 640px){ @media only screen and (max-width: 640px){
#subControlButtons { #controlButtons {
transform: scale(0.9) translateY(10%); transform: scale(0.9);
} }
.labelSmall { .labelSmall {
@ -1263,16 +1265,16 @@ button.glyphicon-button.active.focus {
} }
} }
@media only screen and (max-width: 400px){ @media only screen and (max-width: 400px){
#subControlButtons { #controlButtons {
transform: scale(0.8) translateY(20%); transform: scale(0.8);
}
}
@media only screen and (max-width: 300px){
#subControlButtons {
padding: 0px;
} }
} }
@media only screen and (max-width: 300px){
#controlButtons {
transform: scale(0.7);
}
}
.orange{ .orange{
background-color: #8d5e1a background-color: #8d5e1a
@ -1317,34 +1319,19 @@ button.btnArmTransferRoom.selected{
} }
@media only screen and (max-height: 540px){ @media only screen and (max-height: 540px){
#subControlButtons {
transform: scale(0.88);
}
#gridlayout>#container.vidcon { #gridlayout>#container.vidcon {
height:88% height:88%
} }
#controlButtons {
height:54px;
}
#copythisurl { #copythisurl {
font-size:80%; font-size:80%;
} }
} }
@media only screen and (max-height: 500px){ @media only screen and (max-height: 500px){
#subControlButtons {
transform: scale(0.87);
}
#gridlayout>#container.vidcon { #gridlayout>#container.vidcon {
height:87% height:87%
} }
#controlButtons {
height:54px;
}
} }
@media only screen and (max-height: 400px){ @media only screen and (max-height: 400px){
#subControlButtons {
transform: scale(0.85);
}
#logoname{ #logoname{
display:none; display:none;
} }
@ -1358,7 +1345,7 @@ button.btnArmTransferRoom.selected{
height:85% height:85%
} }
#controlButtons { #controlButtons {
height:50px; transform: scale(0.9);
} }
#header{ #header{
min-height:0px; min-height:0px;
@ -1368,12 +1355,6 @@ button.btnArmTransferRoom.selected{
#gridlayout>#container.vidcon { #gridlayout>#container.vidcon {
height:81% height:81%
} }
#subControlButtons {
transform: scale(0.81);
}
#controlButtons {
height:46.2px;
}
#head2 { #head2 {
display:none !important; display:none !important;
} }
@ -1383,45 +1364,27 @@ button.btnArmTransferRoom.selected{
#gridlayout>#container.vidcon { #gridlayout>#container.vidcon {
height:78% height:78%
} }
#subControlButtons {
transform: scale(0.77);
}
#controlButtons { #controlButtons {
height:46.2px; transform: scale(0.8);
} }
} }
@media only screen and (max-height: 190px){ @media only screen and (max-height: 190px){
#gridlayout>#container.vidcon { #gridlayout>#container.vidcon {
height:75% height:75%
} }
#subControlButtons {
transform: scale(0.73);
}
#controlButtons {
height:42px
}
} }
@media only screen and (max-height: 160px){ @media only screen and (max-height: 160px){
#gridlayout>#container.vidcon { #gridlayout>#container.vidcon {
height:70% height:70%
} }
#subControlButtons {
transform: scale(0.65);
}
#controlButtons { #controlButtons {
height:38px transform: scale(0.7);
} }
} }
@media only screen and (max-height: 120px){ @media only screen and (max-height: 120px){
#gridlayout>#container.vidcon { #gridlayout>#container.vidcon {
height:70% height:70%
} }
#subControlButtons {
transform: scale(0.52);
}
#controlButtons {
height:30px
}
} }
#header:empty{ #header:empty{
@ -2317,7 +2280,8 @@ span[data-action-type="stats-graphs-details-container"]>span{
.float { .float {
opacity: 0.8; opacity: 0.8;
min-width: 45px; min-width: 45px;
height: 45px; min-height: 45px;
height: 100%;
background-color: #66b16a66; background-color: #66b16a66;
box-shadow: 1px 1px 3px rgba(0,0,0,0.75); box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
color: #FFF; color: #FFF;
@ -2326,11 +2290,13 @@ span[data-action-type="stats-graphs-details-container"]>span{
margin: 5px; margin: 5px;
pointer-events: auto; pointer-events: auto;
outline:none; outline:none;
padding: 5px 5px;
} }
.float2 { .float2 {
opacity: 0.8; opacity: 0.8;
min-width: 45px; min-width: 45px;
height: 45px; min-height: 45px;
height: 100%;
background-color: #8888; background-color: #8888;
box-shadow: 1px 1px 3px rgba(0,0,0,0.75); box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
color: #FFF; color: #FFF;
@ -2340,6 +2306,7 @@ span[data-action-type="stats-graphs-details-container"]>span{
margin: 5px; margin: 5px;
pointer-events: auto; pointer-events: auto;
outline:none; outline:none;
padding: 5px 5px;
} }
.rotate225 { .rotate225 {