sigonasr2/ngsplanner
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css improvements

Browse Source
This commit is contained in:
dudleycu 2021-08-12 23:29:50 +09:00
parent c47a25371d
commit cb61884817
2 changed files with 23 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/TestPanel.js
View File

@ -302,7 +302,7 @@ useEffect(()=>{
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Equipped Weapon</h1></div> <h1>Equipped Weapon</h1></div>
<h2 className="rifle">{GetSpecialWeaponName(selectedWeapon)}+40</h2> <h2 className="rifle">{GetSpecialWeaponName(selectedWeapon)}+40</h2>
<div><PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage} /><div></div></div> <PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}>Q for Details</PageControl>
{weaponPage === 1 ? {weaponPage === 1 ?
<> <>

48
src/style.css
View File

@ -34,7 +34,7 @@ hr {
} }
img { img {
vertical-align: middle; vertical-align: middle;
} }/*
body { body {
background-image: url("./icons/d_global_bg_header.png"),url("./icons/gl_main_bg.jpg"); background-image: url("./icons/d_global_bg_header.png"),url("./icons/gl_main_bg.jpg");
background-size: 1903px,2560px; background-size: 1903px,2560px;
@ -47,12 +47,12 @@ body {
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }*/
/*body { body {
background-image: url("https://i.imgur.com/3OizLd8.jpg"); background-image: url("https://i.imgur.com/3OizLd8.jpg");
background-color: #e8ecf4; background-color: #e8ecf4;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center;
background-attachment: fixed; background-attachment: fixed;
color: black; color: black;
font-family: ngs,Arial,sans-serif; font-family: ngs,Arial,sans-serif;
@ -60,7 +60,7 @@ body {
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
}*/ }
table td { table td {
vertical-align: top; vertical-align: top;
} }
@ -131,39 +131,32 @@ em {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: center; justify-content: center;
width: 100%;
}
.container {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
max-width: 500px;
margin: 10px;
} }
.containerA, .containerC { .containerA, .containerC {
flex-grow: 1; flex-grow: 1;
/* flex-shrink: 1; flex-shrink: 1;
flex-basis: 200px;*/ flex-basis: 240px;
max-width: 360px; max-width: 360px;
margin: 10px; margin: 0 5px;
} }
.containerB { .containerB {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: auto;
flex-basis: 200px; flex-basis: auto;
max-width: 480px; max-width: 480px;
margin: 10px; margin: 0 5px;
} }
.box { .box {
color: #97e2fc; color: #97e2fc;
background-clip: padding-box; background-clip: padding-box;
background-color: rgba(38,53,63,0.80); background-color: rgba(24, 36, 48, 0.66);
margin: 10px auto; margin: 10px 0 0 0;
text-align: left; text-align: left;
text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66); text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66);
padding-bottom:10px; padding-bottom:10px;
/*filter: drop-shadow(0 5px 5px rgba(0,0,0,0.8));*/ /*filter: drop-shadow(0 5px 5px rgba(0,0,0,0.8));*/
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important; /*box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important;*/
backdrop-filter: blur(10px);
} }
.box table { .box table {
@ -217,7 +210,7 @@ em {
}*/ }*/
.boxTitleBar { .boxTitleBar {
/* background-color: #495a61; */ /* background-color: #495a61; */
background-color: rgba(128,128,128,0.50); background-color: rgba(124, 144, 148, 0.66);
color: white; color: white;
font-weight: normal; font-weight: normal;
font-size: 13pt; font-size: 13pt;
@ -568,14 +561,14 @@ li.r4 {
outline: 2px solid rgba(54,255,255,0.66); outline: 2px solid rgba(54,255,255,0.66);
} }
.boxmenu { .boxmenu {
font-size: 10pt; font-size: 12pt;
margin: 0 10px 0 10px; margin: 0 10px 0 10px;
justify-content: flex-start; justify-content: flex-start;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
} }
.boxmenu li { .boxmenu li {
background-color: rgba(245, 245, 245,0.66); background-color: rgba(115, 120, 125,0.66);
color: white; color: white;
display: inline-block; display: inline-block;
margin: 10px 5px 0 0; margin: 10px 5px 0 0;
@ -588,6 +581,9 @@ li.r4 {
.boxmenu img { .boxmenu img {
vertical-align: middle; vertical-align: middle;
} }
.pageControlDetails {
background-color: rgba(24, 36, 48, 0.66) !important;
}
.selected { .selected {
background: linear-gradient(135deg,#60461b,#b0a34e); background: linear-gradient(135deg,#60461b,#b0a34e);
border-bottom: 4px solid #ffd602; border-bottom: 4px solid #ffd602;
@ -1000,7 +996,7 @@ button{
100% {opacity:1;margin-bottom:0;} 100% {opacity:1;margin-bottom:0;}
} }
.boxModal .boxTitleBar { .boxModal .boxTitleBar {
background: linear-gradient(45deg, rgba(47,153,193,1),rgba(46,94,137,1) 30%,rgba(46,94,137,1) 70%, rgba(47,153,193,1)); background: linear-gradient(45deg, rgba(47,153,193,0.66),rgba(46,94,137,0.66) 30%,rgba(46,94,137,0.66) 70%, rgba(47,153,193,1));
} }
.modalItemListContainer { .modalItemListContainer {
overflow-y: auto; overflow-y: auto;