Trez/congo-hindi-gujarati
4
0
Fork 0
mirror of https://github.com/TrezOne/congo-hindi-gujarati.git synced 2026-07-19 09:03:02 -04:00
Code Issues Packages Projects Releases Wiki Activity

✨ Add code copy buttons

Browse Source
This commit is contained in:
James Panther
2022-01-26 10:49:30 +11:00
parent 47632533e0
commit add3f764f7
16 changed files with 191 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/compiled/main.css
+62
View File
@@ -1022,11 +1022,73 @@ body a, body button {
margin-right: 0px;
}
/* Code Copy */
.highlight-wrapper {
display: block;
}
.highlight {
position: relative;
z-index: 0;
}
.highlight:hover > .copy-button {
visibility: visible;
}
.copy-button {
visibility: hidden;
position: absolute;
top: 0px;
right: 0px;
z-index: 10;
width: 5rem;
cursor: pointer;
white-space: nowrap;
border-bottom-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
--tw-bg-opacity: 1;
background-color: rgba(var(--color-neutral-200), var(--tw-bg-opacity));
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.875rem;
line-height: 1.25rem;
--tw-text-opacity: 1;
color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
opacity: 0.9;
}
.dark .copy-button {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-neutral-600), var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
}
.copy-button:hover, .copy-button:focus, .copy-button:active, .copy-button:active:hover {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity));
}
.dark .copy-button:hover, .dark .copy-button:focus, .dark .copy-button:active, .dark .copy-button:active:hover {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity));
}
.copy-textarea {
position: absolute;
z-index: -10;
opacity: 0.05;
}
/* -- Chroma Highlight -- */
/* Background */
.prose .chroma {
position: static;
border-radius: 0.375rem;
--tw-bg-opacity: 1;
background-color: rgba(var(--color-neutral-50), var(--tw-bg-opacity));
assets/css/main.css
+24 -1
View File
@@ -77,10 +77,33 @@ body button {
@apply rtl:mr-0;
}
/* Code Copy */
.highlight-wrapper {
@apply block;
}
.highlight {
@apply relative z-0;
}
.highlight:hover > .copy-button {
@apply visible;
}
.copy-button {
@apply absolute top-0 right-0 z-10 invisible w-20 py-1 font-mono text-sm cursor-pointer opacity-90 bg-neutral-200 whitespace-nowrap rounded-bl-md rounded-tr-md text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200;
}
.copy-button:hover,
.copy-button:focus,
.copy-button:active,
.copy-button:active:hover {
@apply bg-primary-100 dark:bg-primary-600;
}
.copy-textarea {
@apply absolute opacity-5 -z-10;
}
/* -- Chroma Highlight -- */
/* Background */
.prose .chroma {
@apply rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
@apply static rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
}
/* LineTableTD */
.chroma .lntd,