一些CSS调整

This commit is contained in:
枫谷剑仙 2024-07-30 17:20:47 +08:00
parent 16efd2b059
commit f1f3a978d6
7 changed files with 85 additions and 31 deletions

24
images/brown-button.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
<defs>
<style>
.cls-1 {
fill: #000;
}
.cls-1, .cls-2 {
stroke-width: 0px;
}
.cls-2 {
fill: url(#_未命名的渐变_6);
}
</style>
<linearGradient id="_未命名的渐变_6" data-name="未命名的渐变 6" x1="25" y1=".69" x2="25" y2="49.69" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#c38e5f"/>
<stop offset="1" stop-color="#2f2008"/>
</linearGradient>
</defs>
<rect class="cls-2" x=".5" y=".5" width="49" height="49" rx="6.47" ry="6.47"/>
<path class="cls-1" d="M43.03,1c3.29,0,5.97,2.68,5.97,5.97v36.06c0,3.29-2.68,5.97-5.97,5.97H6.97c-3.29,0-5.97-2.68-5.97-5.97V6.97C1,3.68,3.68,1,6.97,1h36.06M43.03,0H6.97C3.12,0,0,3.12,0,6.97v36.06c0,3.85,3.12,6.97,6.97,6.97h36.06c3.85,0,6.97-3.12,6.97-6.97V6.97c0-3.85-3.12-6.97-6.97-6.97h0Z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -1 +0,0 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="qrcode" class="svg-inline--fa fa-qrcode fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="14" height="14"><path fill="currentColor" d="M0 224h192V32H0v192zM64 96h64v64H64V96zm192-64v192h192V32H256zm128 128h-64V96h64v64zM0 480h192V288H0v192zm64-128h64v64H64v-64zm352-64h32v128h-96v-32h-32v96h-64V288h96v32h64v-32zm0 160h32v32h-32v-32zm-64 0h32v32h-32v-32z"></path></svg>

Before

Width:  |  Height:  |  Size: 474 B

View File

@ -1333,12 +1333,12 @@ const teamsCount = 2;
</div> </div>
<div class="id-string-search"> <div class="id-string-search">
<form id="form-id-search"> <form id="form-id-search">
<label for="card-id"></label>
<input type="number" step="1" min="0" max="99999" id="card-id" name="card-id"/> <input type="number" step="1" min="0" max="99999" id="card-id" name="card-id"/>
<label for="card-id"></label>
</form> </form>
<form id="form-string-search"> <form id="form-string-search">
<label for="search-string"></label>
<input type="search" id="search-string" name="search-string" /> <input type="search" id="search-string" name="search-string" />
<label for="search-string"></label>
<button type="sumbit" id="search-by-string"></button> <button type="sumbit" id="search-by-string"></button>
</form> </form>
</div> </div>

View File

@ -32319,7 +32319,7 @@ const cachesMap = new Map([
], ],
[ [
"multi.html", "multi.html",
"bb15813a2d41f033c3fdb7025013c736" "fd2b53625690be01261bfca3d51c8117"
], ],
[ [
"script-custom_elements.js", "script-custom_elements.js",
@ -32343,7 +32343,7 @@ const cachesMap = new Map([
], ],
[ [
"solo.html", "solo.html",
"2dcab635615804115b8e8957b8c08e53" "6b624264a58a0e472b20a16665a52451"
], ],
[ [
"style-fix-html2canvas.css", "style-fix-html2canvas.css",
@ -32355,7 +32355,7 @@ const cachesMap = new Map([
], ],
[ [
"style.css", "style.css",
"0e204f36b14c7bc9f0888332e49de02e" "6e0b1b09be269f87c1f79b9a0055f048"
], ],
[ [
"temp.js", "temp.js",
@ -32363,7 +32363,7 @@ const cachesMap = new Map([
], ],
[ [
"triple.html", "triple.html",
"1e72d25c59a9caedcf697d11b034644b" "3135d15a58be52158f3833aef9bb322a"
], ],
[ [
"languages/en.css", "languages/en.css",
@ -32433,6 +32433,10 @@ const cachesMap = new Map([
"images/badge.png", "images/badge.png",
"e99e7cbd977fce0f5c49339b15e3a25a" "e99e7cbd977fce0f5c49339b15e3a25a"
], ],
[
"images/brown-button.svg",
"ddc77250f71df8f5e7a17e348aa7140f"
],
[ [
"images/card-frame-any.png", "images/card-frame-any.png",
"1f45308d1742b8c2f069fe4f417f5536" "1f45308d1742b8c2f069fe4f417f5536"
@ -32565,10 +32569,6 @@ const cachesMap = new Map([
"images/icon.png", "images/icon.png",
"5e6359d908e471761726c927a8376dbf" "5e6359d908e471761726c927a8376dbf"
], ],
[
"images/qrcode-solid.svg",
"38557995b8cafaf50c16274030c8141d"
],
[ [
"images/slate.svg", "images/slate.svg",
"a849d2c4da127188ce892cea2b60cfee" "a849d2c4da127188ce892cea2b60cfee"

View File

@ -1071,12 +1071,12 @@ const teamsCount = 1;
</div> </div>
<div class="id-string-search"> <div class="id-string-search">
<form id="form-id-search"> <form id="form-id-search">
<label for="card-id"></label>
<input type="number" step="1" min="0" max="99999" id="card-id" name="card-id"/> <input type="number" step="1" min="0" max="99999" id="card-id" name="card-id"/>
<label for="card-id"></label>
</form> </form>
<form id="form-string-search"> <form id="form-string-search">
<label for="search-string"></label>
<input type="search" id="search-string" name="search-string" /> <input type="search" id="search-string" name="search-string" />
<label for="search-string"></label>
<button type="sumbit" id="search-by-string"></button> <button type="sumbit" id="search-by-string"></button>
</form> </form>
</div> </div>

View File

@ -449,21 +449,25 @@ ul{
} }
.brown-button .brown-button
{ {
display: inline-block; display: inline-flex;
align-items: center;
align-content: center;
justify-items: center;
justify-content: center;
box-sizing: border-box; box-sizing: border-box;
min-width: 100px; min-width: 100px;
padding: 5px; padding: 5px;
background-color: #956A42; background-color: #956A42;
background-image: url(images/slate.svg); background-image: url(images/slate.svg);
background-size: 120px 120px; background-size: 120px 120px;
background-clip: padding-box;
border-style: solid; border-style: solid;
border-width: 2px; border-radius: 3px;
border-image: linear-gradient(to bottom,#C38E5F,#2F2008) 1; border-width: 5px;
border-radius: 5px; border-image-source: url(images/brown-button.svg);
clip-path: inset(0 round 5px); border-image-slice: 15%;
font-size: 1.5em; font-size: 1.5em;
line-height: 1em; line-height: 1em;
vertical-align: middle;
color: white; color: white;
font-family: var(--game-font-family); font-family: var(--game-font-family);
text-shadow: black 2px 2px 0; text-shadow: black 2px 2px 0;
@ -1624,8 +1628,8 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
#form-id-search, #form-id-search,
#form-string-search { #form-string-search {
box-sizing: border-box; box-sizing: border-box;
border: #000000AA solid 1px; border: rgba(0,0,0,0.5) solid 1px;
background-color: white; background-color: rgb(255,255,255);
border-radius: 3px; border-radius: 3px;
display: grid; display: grid;
align-items: center; align-items: center;
@ -1651,11 +1655,35 @@ label[for="search-string"]::before {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 100%; height: 100%;
grid-column: 1 / 3;
grid-row: 1;
padding-left: calc(1.5em);
}
label[for="card-id"] {
grid-column: 1;
grid-row: 1;
cursor: default;
} }
#search-string{ #search-string{
background: none; background: none;
border: none; border: none;
box-sizing: border-box; box-sizing: border-box;
grid-column: 1 / 4;
grid-row: 1;
padding: 0 calc(1em + 6px);
}
label[for="search-string"] {
grid-column: 1;
grid-row: 1;
cursor: default;
}
#search-by-string{
grid-column: 3;
grid-row: 1;
border-radius: 3px;
}
#form-string-search:focus {
outline: 4px dashed darkorange;
} }
#search-by-string{ #search-by-string{
background: none; background: none;
@ -2125,9 +2153,6 @@ label[for="search-string"]::before {
vertical-align: bottom; vertical-align: bottom;
grid-gap: 1px; grid-gap: 1px;
} }
.selected-awokens-div .awoken-clear {
font-size: 1em;
}
/*.search-box .awoken-div::before{ /*.search-box .awoken-div::before{
content: "觉醒"; content: "觉醒";
}*/ }*/
@ -2154,15 +2179,18 @@ label[for="search-string"]::before {
background-position-y: 40px; background-position-y: 40px;
padding: 0; padding: 0;
vertical-align: bottom; vertical-align: bottom;
border-width: 3px;
font-size: 1em;
line-height: 1em;
} }
.search-box :where( .search-box :where(
.rare-clear, .rare-clear,
.special-add, .special-add,
.special-clear, .special-clear,
.special-star .special-star,
#attr-clear,
.awoken-clear,
) { ) {
font-size: 1em;
line-height: 1em;
} }
@keyframes awoken-appear { @keyframes awoken-appear {
@ -2355,9 +2383,13 @@ input[disabled]+.awoken-icon:active,
margin-right: 3px; margin-right: 3px;
display: grid; display: grid;
gap: 2px; gap: 2px;
grid-template-columns: minmax(100px, max-content) auto 35px 35px 35px 35px; grid-template-columns: max-content minmax(100px, auto) max-content max-content max-content max-content;
max-width: 100%; max-width: 100%;
} }
.special-filter-list>li:hover {
outline: #FFDA70 solid 2px;
border-radius: 3px;
}
.special-filter-list :where(select, button) { .special-filter-list :where(select, button) {
font-size: 1em; font-size: 1em;
} }
@ -3118,7 +3150,6 @@ a.series-search::before {
.edit-box .button-box .button-done{ .edit-box .button-box .button-done{
box-sizing: border-box; box-sizing: border-box;
font-size: 1.5em; font-size: 1.5em;
border-width: 4px;
} }
.edit-box .button-box .button-cancel{ .edit-box .button-box .button-cancel{
grid-column: 4 / 5; grid-column: 4 / 5;

View File

@ -2016,12 +2016,12 @@ const teamsCount = 3;
</div> </div>
<div class="id-string-search"> <div class="id-string-search">
<form id="form-id-search"> <form id="form-id-search">
<label for="card-id"></label>
<input type="number" step="1" min="0" max="99999" id="card-id" name="card-id"/> <input type="number" step="1" min="0" max="99999" id="card-id" name="card-id"/>
<label for="card-id"></label>
</form> </form>
<form id="form-string-search"> <form id="form-string-search">
<label for="search-string"></label>
<input type="search" id="search-string" name="search-string" /> <input type="search" id="search-string" name="search-string" />
<label for="search-string"></label>
<button type="sumbit" id="search-by-string"></button> <button type="sumbit" id="search-by-string"></button>
</form> </form>
</div> </div>