xevion/rdap
1
0
Fork 0
mirror of https://github.com/Xevion/rdap.git synced 2025-12-14 10:12:45 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add thin scrollbar for AbstractCard raw JSON visual

Browse Source
This commit is contained in:
Xevion
2023-08-25 23:51:13 -05:00
parent 050fab7a6a
commit 116821aaf0
2 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/AbstractCard.tsx
View File

@@ -34,7 +34,7 @@ const AbstractCard: FunctionComponent<AbstractCardProps> = ({
) : null} ) : null}
<div className="max-w-full p-2 px-4"> <div className="max-w-full p-2 px-4">
{showRaw ? ( {showRaw ? (
<pre className="m-2 max-h-[40rem] max-w-full overflow-y-auto whitespace-pre-wrap rounded"> <pre className="scrollbar-thin m-2 max-h-[40rem] max-w-full overflow-y-auto whitespace-pre-wrap rounded">
{JSON.stringify(data, null, 4)} {JSON.stringify(data, null, 4)}
</pre> </pre>
) : ( ) : (

28
src/styles/globals.scss
View File

@@ -3,11 +3,11 @@
@tailwind utilities; @tailwind utilities;
dd { dd {
margin: 0.5em 0 1em 2em; margin: 0.5em 0 1em 2em;
} }
[title]:not(.no-title) { [title]:not(.no-title) {
border-bottom: 1px dashed silver; border-bottom: 1px dashed silver;
} }
body { body {
@@ -16,25 +16,33 @@ body {
} }
dd, dl { dd, dl {
white-space: nowrap; white-space: nowrap;
} }
dl { dl {
margin: 0; margin: 0;
} }
.rdap-status-code, .rdap-event-time { .rdap-status-code, .rdap-event-time {
border-bottom: 1px dashed silver; border-bottom: 1px dashed silver;
} }
#object { #object {
text-transform: lowercase; text-transform: lowercase;
} }
#spinner-msg { #spinner-msg {
height: 2em; height: 2em;
display: inline-block; display: inline-block;
margin: -0.25em 0 0 0; margin: -0.25em 0 0 0;
padding: 0.25em 0 0 0; padding: 0.25em 0 0 0;
}
.custom-select {
background: #fffff00 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
}
.scrollbar-thin {
scrollbar-width: thin;
} }