liquidex/rkgk
liquidex/rkgk
1
Fork 0
Code Issues 66 Pull requests Projects 1 Wiki Activity

make code examples horizontally scrollable

Browse source
This commit is contained in:
liquidex 2024-10-23 19:44:42 +02:00
parent fd3f37d744
commit d6bb4e9911
1 changed files with 24 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
static/base.css
View file

@ -36,12 +36,16 @@ body {
font-family: var(--font-body); font-family: var(--font-body);
} }
button, textarea, input { button,
textarea,
input {
font-size: inherit; font-size: inherit;
font-family: inherit; font-family: inherit;
} }
pre, code, textarea { pre,
code,
textarea {
font-family: var(--font-monospace); font-family: var(--font-monospace);
line-height: var(--line-height); line-height: var(--line-height);
} }
@ -81,7 +85,7 @@ dialog::backdrop {
/* Details */ /* Details */
details>summary { details > summary {
cursor: pointer; cursor: pointer;
} }
@ -131,8 +135,7 @@ rkgk-throbber {
background: var(--color-panel-background); background: var(--color-panel-background);
border: none; border: none;
border-radius: var(--panel-border-radius); border-radius: var(--panel-border-radius);
box-shadow: box-shadow: 0 0 0 1px var(--color-panel-border);
0 0 0 1px var(--color-panel-border);
/* 4px 4px 0 0 var(--color-panel-border); */ /* 4px 4px 0 0 var(--color-panel-border); */
box-sizing: border-box; box-sizing: border-box;
} }
@ -146,7 +149,8 @@ hr {
/* Lists */ /* Lists */
ul, ol { ul,
ol {
padding-left: 20px; padding-left: 20px;
} }
@ -156,13 +160,14 @@ pre:has(code) {
background-color: var(--color-shaded-background); background-color: var(--color-shaded-background);
border-radius: 8px; border-radius: 8px;
padding: 1em 1em; padding: 1em 1em;
overflow: auto;
} }
/* Icons */ /* Icons */
:root { :root {
--icon-rkgk-grayscale: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJtMCAwaDE2djE2aC0xNnoiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNhKSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Im0xMiAxNy00LjU1Mjc5LTkuMTA1NTdjLS42NjQ5LTEuMzI5ODEuMzAyMDktMi44OTQ0MyAxLjc4ODg2LTIuODk0NDNoOC43NjM5MyIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxnIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0ibTUuNSAxMi0yLjUgNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii41Ii8+PHBhdGggZD0ibTMgNWgxIi8+PC9nPjwvZz48L3N2Zz4='); --icon-rkgk-grayscale: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJtMCAwaDE2djE2aC0xNnoiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNhKSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Im0xMiAxNy00LjU1Mjc5LTkuMTA1NTdjLS42NjQ5LTEuMzI5ODEuMzAyMDktMi44OTQ0MyAxLjc4ODg2LTIuODk0NDNoOC43NjM5MyIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxnIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0ibTUuNSAxMi0yLjUgNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii41Ii8+PHBhdGggZD0ibTMgNWgxIi8+PC9nPjwvZz48L3N2Zz4=");
--icon-external-link: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiMwMDAiPjxwYXRoIGQ9Im0xMC41IDl2Mi41aC02di02aDIuNSIvPjxwYXRoIGQ9Im03IDkgNC41LTQuNW0wIDBoLTMuNW0zLjUgMHYzLjUiLz48L2c+PC9zdmc+'); --icon-external-link: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiMwMDAiPjxwYXRoIGQ9Im0xMC41IDl2Mi41aC02di02aDIuNSIvPjxwYXRoIGQ9Im03IDkgNC41LTQuNW0wIDBoLTMuNW0zLjUgMHYzLjUiLz48L2c+PC9zdmc+");
} }
.icon { .icon {
@ -174,7 +179,10 @@ pre:has(code) {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50% 50%; background-position: 50% 50%;
&.icon-rkgk-grayscale { background-image: var(--icon-rkgk-grayscale); } &.icon-rkgk-grayscale {
&.icon-external-link { background-image: var(--icon-external-link); } background-image: var(--icon-rkgk-grayscale);
}
&.icon-external-link {
background-image: var(--icon-external-link);
}
} }