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

Implemented first fully functional popup.

Browse Source 
Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>
This commit is contained in:
Joshua Sigona 2021-08-08 03:13:56 +09:00
parent 4c84d65ab3
commit 1f5677f8b6
1 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/style.css
View File

@ -569,7 +569,7 @@ li.r4 {
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 wrap; flex-flow: row nowrap;
} }
.boxmenu li { .boxmenu li {
background-color: rgba(245, 245, 245,0.66); background-color: rgba(245, 245, 245,0.66);
@ -578,7 +578,7 @@ li.r4 {
margin: 10px 5px 0 0; margin: 10px 5px 0 0;
padding: 5px; padding: 5px;
text-align: center; text-align: center;
flex-basis: 57px; flex-basis: 27px;
white-space: nowrap; white-space: nowrap;
} }
.boxmenu img { .boxmenu img {
@ -588,12 +588,18 @@ li.r4 {
background: linear-gradient(135deg,#60461b,#b0a34e); background: linear-gradient(135deg,#60461b,#b0a34e);
border-bottom: 4px solid #ffd602; border-bottom: 4px solid #ffd602;
} }
.boxmenu li:hover { .unselected:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
border-bottom: 0; border-bottom: 0;
padding-bottom: 9px; padding-bottom: 9px;
outline: 2px solid hsl(180, 78%, 50%); outline: 2px solid hsl(180, 78%, 50%);
} }
li.selected:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
border-bottom: 0;
background: linear-gradient(135deg,#60461b,#b0a34e);
border-bottom: 4px solid #ffd602;
}
.itemBar { .itemBar {
justify-content: center; justify-content: center;
display: flex; display: flex;
@ -955,21 +961,17 @@ button{
display: grid; display: grid;
justify-items: stretch; justify-items: stretch;
justify-content: stretch; justify-content: stretch;
grid-template-columns: 10px auto 10px; grid-template-columns: 10px 1fr 10px;
grid-template-rows: 10px auto 10px; grid-template-rows: 10px minmax(0, 1fr) 10px;
grid-template-areas:
". . ."
". main ."
". . .";
} }
.modal { .modal {
background-color: purple;
max-width: 580px;
outline: 0; outline: 0;
grid-area: main; grid-column: 2;
grid-row: 2;
} }
.boxModal { .boxModal {
max-width: 580px;
margin: 0 auto;
} }
.modalItemListContainer { .modalItemListContainer {
overflow-y: auto; overflow-y: auto;