modal css fixes

This commit is contained in:
Robin Appelman 2024-12-02 23:27:12 +01:00
commit af40ad1aba
3 changed files with 49 additions and 27 deletions

View file

@ -234,7 +234,7 @@ export const Analyser = (props: AnalyseProps) => {
disabled={inShared}/> disabled={inShared}/>
</div> </div>
<Modal class="help" isOpen={helpOpen()} onCloseRequest={() => setHelpOpen(false)} <Modal class="help" isOpen={helpOpen()} onCloseRequest={() => setHelpOpen(false)}
closeOnOutsideClick={true}> closeOnOutsideClick={true} overlayClass="modal-overlay" contentClass="modal-content">
<h4>Keyboard Shortcuts</h4> <h4>Keyboard Shortcuts</h4>
<table class="shortcuts"> <table class="shortcuts">
<tbody> <tbody>

View file

@ -87,29 +87,3 @@
} }
} }
} }
.solid-modal-content h4 {
margin-top: 0;
}
kbd {
background-color: #eee;
border-radius: 3px;
border: 1px solid #b4b4b4;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
color: #333;
display: inline-block;
font-size: 1.4em;
font-weight: 700;
line-height: 1;
padding: 2px 4px;
white-space: nowrap;
min-width: 1.5em;
text-align: center;
}
.shortcuts {
td:first-child {
text-align: center;
}
}

View file

@ -81,3 +81,51 @@
} }
} }
} }
.modal-content h4 {
margin-top: 0;
}
kbd {
background-color: rgb(34, 36, 38);
border-radius: 3px;
border: 1px solid rgb(69, 75, 78);
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 1px, rgba(24, 26, 27, 0.7) 0 2px inset;
color: rgb(200, 195, 188);;
display: inline-block;
font-size: 1.4em;
font-weight: 700;
line-height: 1;
padding: 2px 4px;
white-space: nowrap;
min-width: 1.5em;
text-align: center;
}
.shortcuts {
td:first-child {
text-align: center;
}
}
.modal-overlay {
position: fixed;
inset: 0 0 0 0;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 1rem;
padding: 1rem;
border: 1px solid rgba(200, 200, 200, 0.5);
background-color: #181a1b;
color: #cfcbc5;
overflow: auto;
max-height: 90%;
max-width: 90%;
}