You've already forked Tricky-Addon-Update-Target-List
mirror of
https://github.com/KOWX712/Tricky-Addon-Update-Target-List.git
synced 2025-09-06 06:37:09 +00:00
slightly adjust ui on large screen display
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user