br0kenpixel/ReZygisk
1
0
Fork 0
mirror of https://github.com/PerformanC/ReZygisk.git synced 2025-09-06 06:37:01 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

add: initial support for tablet/desktop mode

Browse Source 
This commit will add initial support for tablet/desktop mode by trick the navbar a bit
This commit is contained in:
RainyXeon
2024-08-09 17:33:56 +07:00
committed by ThePedroo
parent 6a0f5aaad2
commit fbed1e5633
4 changed files with 132 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
webroot/css/index.css
View File

@@ -10,6 +10,8 @@
--icon-bc: #2b3338;
--small-card: var(--icon-bc);
--button: var(--background);
--desktop-navbar: #252b31;
--desktop-navicon: #333d42;
/* Locked Color */
--lock-desc: #c9c9c9;
--lock: #fff;
@@ -270,6 +272,11 @@ a {
word-break: break-word;
}
.nav_dimc {
background: var(--dim);
word-break: break-word;
}
/* Locked */
.lock {
color: var(--lock);
@@ -358,6 +365,40 @@ input:checked + .slider:before {
animation: openNav 0.15s;
}
@media only screen and (min-width: 600px) {
.navbar {
background-color: var(--desktop-navbar);
transform: scale(0.9);
left: auto;
right: auto;
margin-bottom: 15px;
border-radius: 60px;
padding: 10px 10px;
}
.navtitle {
display: none;
}
.navicon_support {
border-radius: 60px;
}
#navbar_support_div {
display: flex;
align-items: center;
justify-content: center;
}
.navicon {
background: var(--desktop-navicon);
height: 65px;
animation: closeNavDesktop 0.15s;
}
.navicon.show {
animation: openNavDesktop 0.15s;
}
.nav_dimc {
background: var(--desktop-navbar);
}
}
/* Animation KeyFrames */
@keyframes fade-in {
from {
@@ -404,4 +445,27 @@ input:checked + .slider:before {
100% {
width: 65px;
}
}
@keyframes closeNavDesktop {
0% {
transform: scale(1);
}
75% {
opacity: 0;
}
100% {
transform: scale(0);
}
}
@keyframes openNavDesktop {
0% {
transform: scale(0);
}
75% {
opacity: 1;
}
100% {
transform: scale(1);
}
}

124
webroot/index.html
View File

@@ -264,7 +264,7 @@
<!-- INFO: System theme small page -->
<div id="small_panel_theme" class="panel">
<div class="header" style="display: flex; align-items: center; justify-content: initial;">
<div class="header" style="padding-left: 20px; display: flex; align-items: center; justify-content: initial;">
<div id="sp_theme_close" style="width: 36px; height: 36px; margin-right: 6px;">
<img src="./assets/back.svg"/>
</div>
@@ -286,7 +286,7 @@
<!-- INFO: Language small page -->
<div id="small_panel_language" class="panel">
<div class="header" style="display: flex; align-items: center; justify-content: initial;">
<div class="header" style="padding-left: 20px; display: flex; align-items: center; justify-content: initial;">
<div id="sp_lang_close" style="width: 36px; height: 36px; margin-right: 6px;">
<img src="./assets/back.svg"/>
</div>
@@ -299,68 +299,70 @@
</div>
<!-- INFO: Bottom navbar -->
<div id="navbar" class="navbar radios">
<div class="dimc">
<input id="n_home" type="radio" name="navbutton" value="home" checked/>
<label class="radio dimc" for="n_home">
<div class="dimc" style="display: grid; place-items: center;">
<div class="dimc" style="display: grid; place-items: center; width: 65px;">
<div style="grid-area: 1 / 1;" id="ni_home"></div>
<div style="grid-area: 1 / 1;" id="nibg_home" class="navicon"></div>
<div id="navbar_support_div">
<div id="navbar" class="navbar radios">
<div class="navicon_support nav_dimc">
<input id="n_home" type="radio" name="navbutton" value="home" checked/>
<label class="navicon_support radio nav_dimc" for="n_home">
<div class="navicon_support nav_dimc" style="display: grid; place-items: center;">
<div class="navicon_support nav_dimc" style="display: grid; place-items: center; width: 65px;">
<div style="grid-area: 1 / 1;" id="ni_home"></div>
<div style="grid-area: 1 / 1;" id="nibg_home" class="navicon"></div>
</div>
<div id="nav_home_title" class="navtitle nav_dimc">Home</div>
</div>
<div id="nav_home_title" class="navtitle dimc">Home</div>
</div>
</label>
</label>
</div>
<div class="nav_dimc">
<input id="n_modules" type="radio" name="navbutton" value="modules"/>
<label class="radio nav_dimc" for="n_modules">
<div class="nav_dimc" style="display: grid; place-items: center;">
<div class="nav_dimc" style="display: grid; place-items: center; width: 65px;">
<div style="grid-area: 1 / 1;" id="ni_modules"></div>
<div style="grid-area: 1 / 1;" id="nibg_modules" class="navicon"></div>
</div>
<div id="nav_modules_title" class="navtitle nav_dimc">Modules</div>
</div>
</label>
</div>
<div class="nav_dimc">
<input id="n_actions" type="radio" name="navbutton" value="actions"/>
<label class="radio nav_dimc" for="n_actions">
<div class="nav_dimc" style="display: grid; place-items: center;">
<div class="nav_dimc" style="display: grid; place-items: center; width: 65px;">
<div style="grid-area: 1 / 1;" id="ni_actions"></div>
<div style="grid-area: 1 / 1;" id="nibg_actions" class="navicon"></div>
</div>
<div id="nav_actions_title" class="navtitle nav_dimc">Actions</div>
</div>
</label>
</div>
<div class="navicon_support nav_dimc">
<input id="n_settings" type="radio" name="navbutton" value="settings"/>
<label class="navicon_support radio nav_dimc" for="n_settings">
<div class="navicon_support nav_dimc" style="display: grid; place-items: center;">
<div class="navicon_support nav_dimc" style="display: grid; place-items: center; width: 65px;">
<div style="grid-area: 1 / 1;" id="ni_settings"></div>
<div style="grid-area: 1 / 1;" id="nibg_settings" class="navicon"></div>
</div>
<div id="nav_settings_title" class="navtitle nav_dimc">Settings</div>
</div>
</label>
</div>
</div>
<div class="dimc">
<input id="n_modules" type="radio" name="navbutton" value="modules"/>
<label class="radio dimc" for="n_modules">
<div class="dimc" style="display: grid; place-items: center;">
<div class="dimc" style="display: grid; place-items: center; width: 65px;">
<div style="grid-area: 1 / 1;" id="ni_modules"></div>
<div style="grid-area: 1 / 1;" id="nibg_modules" class="navicon"></div>
</div>
<div id="nav_modules_title" class="navtitle dimc">Modules</div>
</div>
</label>
</div>
<div class="dimc">
<input id="n_actions" type="radio" name="navbutton" value="actions"/>
<label class="radio dimc" for="n_actions">
<div class="dimc" style="display: grid; place-items: center;">
<div class="dimc" style="display: grid; place-items: center; width: 65px;">
<div style="grid-area: 1 / 1;" id="ni_actions"></div>
<div style="grid-area: 1 / 1;" id="nibg_actions" class="navicon"></div>
</div>
<div id="nav_actions_title" class="navtitle dimc">Actions</div>
</div>
</label>
</div>
<div class="dimc">
<input id="n_settings" type="radio" name="navbutton" value="settings"/>
<label class="radio dimc" for="n_settings">
<div class="dimc" style="display: grid; place-items: center;">
<div class="dimc" style="display: grid; place-items: center; width: 65px;">
<div style="grid-area: 1 / 1;" id="ni_settings"></div>
<div style="grid-area: 1 / 1;" id="nibg_settings" class="navicon"></div>
</div>
<div id="nav_settings_title" class="navtitle dimc">Settings</div>
</div>
</label>
</div>
</div>
</body>
</html>

2
webroot/js/themes/dark.js
View File

@@ -18,6 +18,8 @@ export function setDark(chooseSet) {
rootCss.style.setProperty('--dim', '#1d2327')
rootCss.style.setProperty('--icon', '#48565e')
rootCss.style.setProperty('--icon-bc', '#313a3f')
rootCss.style.setProperty('--desktop-navbar', '#252b31')
rootCss.style.setProperty('--desktop-navicon', '#333d42')
rootCss.style.setProperty('--button', 'var(--background)')
if (chooseSet) setData('dark')

4
webroot/js/themes/light.js
View File

@@ -18,12 +18,14 @@ const sp_lang_close = document.getElementById('sp_lang_close')
const sp_theme_close = document.getElementById('sp_theme_close')
export function setLight(chooseSet) {
rootCss.style.setProperty('--background', '#eff1f6')
rootCss.style.setProperty('--background', '#f2f2f2')
rootCss.style.setProperty('--font', '#181c20')
rootCss.style.setProperty('--desc', '#484d53')
rootCss.style.setProperty('--spliter', '#4f6069')
rootCss.style.setProperty('--dim', '#e0e0e0')
rootCss.style.setProperty('--icon', '#acacac')
rootCss.style.setProperty('--desktop-navbar', '#fefefe')
rootCss.style.setProperty('--desktop-navicon', '#eeeeee')
rootCss.style.setProperty('--icon-bc', '#c9c9c9')
rootCss.style.setProperty('--button', '#b3b3b3')