RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve mobile style

Browse Source
This commit is contained in:
SrGooglo 2023-06-13 22:53:14 +00:00
parent 68b877cd6b
commit 2780f17531
1 changed files with 81 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
packages/app/src/theme/mobile.less
View File

@ -12,8 +12,6 @@
width: 100%;
overflow-y: scroll;
//padding-top: 20px;
}
.content_layout {
@ -26,10 +24,70 @@
width: 100%;
padding: 7px;
padding-bottom: 0px;
box-sizing: border-box;
}
.pagePanels {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
overflow-x: visible;
width: 100%;
height: 100%;
.panel {
width: 100%;
//height: 100%;
&.left {
z-index: 310;
top: 0;
left: 0;
overflow: visible;
overflow-x: visible;
}
&.center {
z-index: 300;
overflow: visible;
overflow-x: visible;
height: calc(100vh - @app_bottomBar_height - @app_topBar_height);
-webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10px, rgb(0, 0, 0) calc(100% - 10px), rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10px, rgb(0, 0, 0) calc(100% - 10px), rgba(0, 0, 0, 0) 100%);
}
}
.card {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
padding: 5px;
justify-content: space-evenly;
box-shadow: @card-shadow;
border-radius: 12px;
isolation: unset;
overflow: visible;
}
}
.playlist_view {
display: flex;
flex-direction: column;
@ -52,95 +110,6 @@
}
}
.pagePanels {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow-x: visible;
width: 100%;
height: 100%;
.panel {
width: 100%;
//height: 100%;
&.left {
z-index: 500;
overflow: visible;
overflow-x: visible;
}
&.right {
z-index: 400;
overflow-x: visible;
}
}
.card {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
padding: 5px;
justify-content: space-between;
box-shadow: @card-shadow;
border-radius: 12px;
isolation: unset;
overflow: visible;
.item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 5px 10px;
border-radius: 8px;
color: var(--text-color);
.icon {
svg {
margin: 0 !important;
font-size: 1rem;
}
}
.label {
font-size: 0.6rem;
}
&.active {
.icon {
svg {
color: var(--colorPrimary);
}
}
.label {
color: var(--colorPrimary);
}
background-color: var(--background-color-primary);
}
}
}
}
.post-list_wrapper {
.post-list {
padding-top: 10px;
@ -164,5 +133,26 @@
}
}
}
.livestream {
flex-direction: column;
height: 100%;
}
.livestream_panel {
position: absolute;
bottom: 0;
height: 20%;
}
.livestream_player {
height: 100%;
width: 100%;
.plyr {
width: 100%;
height: 100%;
}
}
}
}