slightly adjust ui on large screen display

This commit is contained in:
KOWX712
2024-12-03 19:13:36 +08:00
parent 31a229e52b
commit 6a21702f25
2 changed files with 44 additions and 12 deletions

View File

@@ -72,10 +72,12 @@
<!-- Applist Display --> <!-- Applist Display -->
<div id="apps-list"></div> <div id="apps-list"></div>
<template id="app-template"> <template id="app-template">
<div class="card"> <div class="card-box">
<div class="content" data-package=""> <div class="card">
<p class="name"></p> <div class="content" data-package="">
<input type="checkbox" class="checkbox"> <p class="name"></p>
<input type="checkbox" class="checkbox">
</div>
</div> </div>
</div> </div>
</template> </template>

View File

@@ -13,13 +13,19 @@ body {
position: fixed; position: fixed;
top: 0; top: 0;
height: 40px; height: 40px;
width: 100%; width: calc(100% - 10px);
max-width: 1100px;
background-color: #F5F5F5; background-color: #F5F5F5;
transition: transform 0.3s ease; transition: transform 0.3s ease;
z-index: 1100; z-index: 1100;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
} }
#title { #title {
padding-left: 5px;
font-size: 16.5px; font-size: 16.5px;
font-weight: bold; font-weight: bold;
} }
@@ -41,7 +47,6 @@ body {
.language-dropdown { .language-dropdown {
position: relative; position: relative;
display: inline-block; display: inline-block;
margin-right: 15px;
} }
.language-button { .language-button {
@@ -84,7 +89,7 @@ body {
color: #333; color: #333;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
.language-option:last-child { .language-option:last-child {
@@ -340,9 +345,14 @@ body {
position: fixed; position: fixed;
top: 40px; top: 40px;
height: 50px; height: 50px;
width: calc(100% - 17px); width: calc(100% - 20px);
max-width: 1100px;
z-index: 1000; z-index: 1000;
transition: transform 0.3s ease; transition: transform 0.3s ease;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
} }
.search-card { .search-card {
@@ -379,6 +389,7 @@ body {
.clear-btn { .clear-btn {
position: absolute; position: absolute;
color: #ccc; color: #ccc;
padding-bottom: 3px;
right: 10px; right: 10px;
border: none; border: none;
background: none; background: none;
@@ -469,13 +480,22 @@ body {
border-bottom: none; border-bottom: none;
} }
.card-box {
display: flex;
justify-content: center;
align-items: center;
width: cacl(100% - 30px);
}
.card { .card {
background-color: white; background-color: white;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
margin-bottom: 10px; margin-bottom: 10px;
outline: none; outline: none;
padding: 13px; padding: 12px;
width: calc(100% - 30px);
max-width: 900px;
} }
.content { .content {
@@ -487,6 +507,7 @@ body {
.name { .name {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
font-size: 15.5px;
max-width: calc(100% - 30px); max-width: calc(100% - 30px);
overflow-wrap: break-word; overflow-wrap: break-word;
word-break: break-word; word-break: break-word;
@@ -494,6 +515,7 @@ body {
.checkbox { .checkbox {
margin-left: auto; margin-left: auto;
transform: scale(1.15);
} }
.prompt { .prompt {
@@ -600,20 +622,28 @@ body {
} }
.footer { .footer {
padding: 25px; display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - 10px);
max-width: 1100px;
padding: 25px 0;
position: relative; position: relative;
margin-left: auto;
margin-right: auto;
} }
.uninstall-container { .uninstall-container {
padding: 10px 10px; padding: 10px 10px;
position: absolute; position: absolute;
right: 15px; right: 0;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 8px; border-radius: 8px;
background-color: #CE0000; background-color: #CE0000;
white-space: nowrap;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }
@@ -678,7 +708,7 @@ body {
background-color: #343434; background-color: #343434;
border: 1px solid #6E6E6E; border: 1px solid #6E6E6E;
} }
.language-option, .language-option,
.menu-options li { .menu-options li {
border-bottom: 1px solid #6E6E6E; border-bottom: 1px solid #6E6E6E;