mirror of
https://github.com/HackTricks-wiki/hacktricks-cloud.git
synced 2026-03-12 21:22:57 -07:00
fix ui
This commit is contained in:
Carlos Polop
@@ -4,6 +4,10 @@
|
||||
|
||||
|
||||
(() => {
|
||||
try {
|
||||
const host = window.location.hostname;
|
||||
if (host === "localhost" || host === "127.0.0.1") return;
|
||||
} catch (e) {}
|
||||
const KEY = 'htSummerDiscountsDismissed';
|
||||
const IMG = '/ima * HackTricks AI Chat Widget v1.17 – enhanced resizable sidebar
|
||||
* ---------------------------------------------------
|
||||
|
||||
@@ -140,13 +140,45 @@ body.sidebar-visible #menu-bar {
|
||||
}
|
||||
|
||||
#menubar-collapse-toggle {
|
||||
display: block !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid var(--table-border-color);
|
||||
border-radius: 6px;
|
||||
background: color-mix(in srgb, var(--bg) 85%, transparent);
|
||||
color: var(--fg);
|
||||
}
|
||||
#menubar-collapse-toggle i {
|
||||
font-size: 16px;
|
||||
}
|
||||
#search-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Collapse Menu Popup */
|
||||
|
||||
#menubar-collapse-toggle {
|
||||
position: relative;
|
||||
gap: 6px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--fg);
|
||||
}
|
||||
.menu-hamburger {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
#menubar-collapse-popup {
|
||||
position: absolute;
|
||||
@@ -164,6 +196,54 @@ body.sidebar-visible #menu-bar {
|
||||
flex-direction: column;
|
||||
/* Don't let the children's background extend past the rounded corners. */
|
||||
overflow: hidden;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#menubar-collapse-popup .menu-theme-toggle {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border-top: 1px solid var(--table-border-color);
|
||||
}
|
||||
#menubar-collapse-popup .menu-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
#menubar-collapse-popup .menu-action i {
|
||||
font-size: 14px;
|
||||
}
|
||||
.menu-icon {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
#menubar-collapse-popup .menu-theme-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--table-border-color);
|
||||
background: color-mix(in srgb, var(--bg) 85%, transparent);
|
||||
color: var(--fg);
|
||||
cursor: pointer;
|
||||
}
|
||||
#menubar-collapse-popup .menu-theme-btn:hover {
|
||||
color: var(--sidebar-active);
|
||||
background: color-mix(in srgb, var(--links) 16%, transparent);
|
||||
}
|
||||
|
||||
#menubar-collapse-popup.show-translations #menubar-languages-popup {
|
||||
position: static;
|
||||
display: flex !important;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--table-border-color);
|
||||
width: 100%;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
background: transparent;
|
||||
}
|
||||
#menubar-collapse-popup .menu-bar-link {
|
||||
border: 0;
|
||||
@@ -188,10 +268,24 @@ body.sidebar-visible #menu-bar {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width:799px) {
|
||||
#theme-wrapper.theme-wrapper--menubar {
|
||||
display: none;
|
||||
}
|
||||
#menubar-languages-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#menubar-languages-toggle {
|
||||
position: relative;
|
||||
}
|
||||
.translations-caret {
|
||||
margin-left: 6px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
#menubar-languages-popup {
|
||||
position: absolute;
|
||||
@@ -237,22 +331,34 @@ html:not(.js) .left-buttons button {
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 2rem;
|
||||
line-height: var(--menu-bar-height);
|
||||
font-size: 1.7rem;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
height: var(--menu-bar-height);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
color: var(--fg);
|
||||
}
|
||||
.menu-title-logo {
|
||||
width: auto;
|
||||
height: 26px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@media only screen and (max-width:799px) {
|
||||
.menu-title {
|
||||
font-size: 1.4rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.menu-title-logo {
|
||||
height: 22px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -629,6 +735,93 @@ ul#searchresults li a span.teaser em {
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:550px) {
|
||||
.sidebar-float-toggle {
|
||||
position: fixed;
|
||||
top: calc(var(--menu-bar-height) + 90px);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid color-mix(in srgb, var(--sidebar-active) 50%, var(--table-border-color));
|
||||
background: color-mix(in srgb, var(--bg) 60%, transparent);
|
||||
color: var(--sidebar-active);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 12;
|
||||
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
.sidebar-float-toggle .toggle-chevron {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.08em;
|
||||
text-shadow: 0 0 8px color-mix(in srgb, var(--sidebar-active) 60%, transparent);
|
||||
}
|
||||
.sidebar-float-toggle:hover {
|
||||
background-color: color-mix(in srgb, var(--sidebar-active) 12%, transparent);
|
||||
color: var(--sidebar-active);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
#sidebar-toggle-anchor:not(:checked) ~ .page-wrapper .page #container .sidebar-float-toggle {
|
||||
transform: translateX(-6px);
|
||||
}
|
||||
#sidebar-toggle-anchor:not(:checked) ~ .page-wrapper .page #container .sidebar-float-toggle .toggle-chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-toggle-anchor:not(:checked) ~ .page-wrapper .page #container {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#sidebar-toggle-anchor:not(:checked) ~ .page-wrapper .page #container .content {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#sidebar-toggle-anchor:not(:checked) ~ .page-wrapper .page #container .sidetoc {
|
||||
position: fixed;
|
||||
right: max(var(--page-padding), calc((100vw - var(--container-max-width)) / 2));
|
||||
top: 0;
|
||||
width: 250px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width:549px) {
|
||||
.sidebar-float-toggle {
|
||||
position: fixed;
|
||||
top: calc(var(--menu-bar-height) + 10px);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid color-mix(in srgb, var(--sidebar-active) 50%, var(--table-border-color));
|
||||
background: color-mix(in srgb, var(--bg) 60%, transparent);
|
||||
color: var(--sidebar-active);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 110;
|
||||
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
.sidebar-float-toggle .toggle-chevron {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.08em;
|
||||
text-shadow: 0 0 8px color-mix(in srgb, var(--sidebar-active) 60%, transparent);
|
||||
}
|
||||
#sidebar-toggle-anchor:not(:checked) ~ .page-wrapper .page #container .sidebar-float-toggle .toggle-chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:549px) {
|
||||
#sidebar-toggle-anchor:checked ~ .page-wrapper .page #container .sidebar-float-toggle {
|
||||
left: calc(100vw - 34px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
@media only screen and (min-width:550px) {
|
||||
.sidebar {
|
||||
@@ -640,7 +833,7 @@ ul#searchresults li a span.teaser em {
|
||||
box-sizing: border-box;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
background-color: var(--sidebar-bg);
|
||||
background-color: transparent;
|
||||
color: var(--sidebar-fg);
|
||||
}
|
||||
}
|
||||
@@ -660,13 +853,24 @@ ul#searchresults li a span.teaser em {
|
||||
box-sizing: border-box;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
background-color: var(--sidebar-bg);
|
||||
background-color: transparent;
|
||||
color: var(--sidebar-fg);
|
||||
z-index: 105;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width:549px) {
|
||||
#sidebar {
|
||||
display: none !important;
|
||||
}
|
||||
#sidebar-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
.sidebar-float-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.sidebar-iframe-inner {
|
||||
background-color: var(--sidebar-bg);
|
||||
background-color: transparent;
|
||||
color: var(--sidebar-fg);
|
||||
padding: 10px 10px;
|
||||
margin: 0;
|
||||
@@ -703,6 +907,7 @@ html:not(.sidebar-resizing) .sidebar {
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 10px 10px;
|
||||
background-color: transparent;
|
||||
}
|
||||
.sidebar .sidebar-resize-handle {
|
||||
position: absolute;
|
||||
@@ -739,7 +944,7 @@ html:not(.sidebar-resizing) .sidebar {
|
||||
display: block;
|
||||
}
|
||||
.sidebar::-webkit-scrollbar {
|
||||
background: var(--sidebar-bg);
|
||||
background: transparent;
|
||||
}
|
||||
.sidebar::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar);
|
||||
@@ -768,31 +973,82 @@ html:not(.sidebar-resizing) .sidebar {
|
||||
|
||||
.chapter li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--fg);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.chapter li > ol.section {
|
||||
width: 100%;
|
||||
margin-left: 16px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.chapter li a {
|
||||
display: block;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
color: var(--sidebar-fg);
|
||||
color: color-mix(in srgb, var(--fg) 70%, var(--links));
|
||||
transition: color 0.2s ease, background-color 0.2s ease;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.chapter-link-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.chapter-fold-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
text-decoration: none;
|
||||
border-radius: 9999px;
|
||||
color: var(--sidebar-active);
|
||||
opacity: 0.8;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.chapter-fold-toggle::before {
|
||||
content: "❱❱";
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.chapter-fold-toggle div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chapter-fold-toggle:hover {
|
||||
background: color-mix(in srgb, var(--links) 16%, transparent);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.chapter li a:hover {
|
||||
color: var(--fg);
|
||||
color: color-mix(in srgb, var(--sidebar-active) 85%, var(--fg));
|
||||
}
|
||||
|
||||
.chapter li a.active {
|
||||
color: var(--sidebar-active);
|
||||
font-weight: 600;
|
||||
background: linear-gradient(90deg, color-mix(in srgb, var(--links) 24%, transparent), transparent);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.chapter li > a.toggle {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin-inline-start: auto;
|
||||
padding: 0 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-inline-start: 6px;
|
||||
padding: 0 8px;
|
||||
user-select: none;
|
||||
opacity: 0.68;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.chapter li > a.toggle div {
|
||||
@@ -800,23 +1056,23 @@ html:not(.sidebar-resizing) .sidebar {
|
||||
}
|
||||
|
||||
/* collapse the section */
|
||||
.chapter li:not(.expanded) + li > ol {
|
||||
.chapter li:not(.expanded) > ol {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chapter li.chapter-item {
|
||||
line-height: 1.5em;
|
||||
margin-block-start: 0.6em;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.35rem;
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
padding-top: .375rem;
|
||||
padding-bottom: .375rem;
|
||||
border-radius: 5px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.chapter li.chapter-item:hover {
|
||||
background-color: var(--sidebar-bg-hover);
|
||||
background: linear-gradient(90deg, color-mix(in srgb, var(--links) 16%, transparent), transparent);
|
||||
color: var(--fg)
|
||||
}
|
||||
|
||||
@@ -851,46 +1107,86 @@ html:not(.sidebar-resizing) .sidebar {
|
||||
border-top: 1px solid var(--table-border-color);
|
||||
margin-top: 1rem;
|
||||
align-content: center;
|
||||
z-index: 101;
|
||||
z-index: 106;
|
||||
}
|
||||
.footer .theme-wrapper {
|
||||
max-width: var(--container-max-width);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
.theme-wrapper--menubar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.footer .theme-wrapper .theme-btns {
|
||||
|
||||
.theme-wrapper--menubar .theme-btns {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-radius: 9999px;
|
||||
background-color: var(--bg);
|
||||
border: 1px solid var(--table-border-color);
|
||||
padding-right: .2rem;
|
||||
padding-left: .2rem;
|
||||
|
||||
padding: 0.2rem 0.3rem;
|
||||
box-shadow: 0 6px 18px color-mix(in srgb, var(--fg) 12%, transparent);
|
||||
}
|
||||
|
||||
.footer .theme-wrapper .theme-btns button {
|
||||
padding: .3rem;
|
||||
margin-top: .3rem;
|
||||
margin-bottom: .3rem;
|
||||
margin-right: .5rem;
|
||||
margin-left: .5rem;
|
||||
.theme-wrapper--menubar .theme-btns button {
|
||||
padding: 0.35rem 0.45rem;
|
||||
margin: 0 0.2rem;
|
||||
color: var(--icons);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
border-radius: 9999px;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer .theme-wrapper .theme-btns button.theme-selected {
|
||||
.theme-wrapper--menubar .theme-btns button.theme-selected {
|
||||
color: var(--links);
|
||||
background-color: color-mix(in srgb, var(--links) 12%, transparent);
|
||||
}
|
||||
|
||||
.footer .theme-wrapper .theme-btns button:hover {
|
||||
.theme-wrapper--menubar .theme-btns button:hover {
|
||||
color: var(--icons-hover);
|
||||
background-color: var(--theme-hover);
|
||||
}
|
||||
|
||||
.theme-wrapper--menubar .theme-orb {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 9999px;
|
||||
background: radial-gradient(circle at 30% 30%, #ffffff, color-mix(in srgb, var(--links) 70%, transparent));
|
||||
opacity: 0.7;
|
||||
transform: translateY(10px);
|
||||
filter: blur(0.2px);
|
||||
pointer-events: none;
|
||||
animation: theme-orb-rise 4.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.theme-wrapper--menubar .theme-side-icon {
|
||||
font-size: 16px;
|
||||
color: var(--icons);
|
||||
opacity: 0.9;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@keyframes theme-orb-rise {
|
||||
0% {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
35% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
70% {
|
||||
transform: translateY(-22px);
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-30px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Details/Summary */
|
||||
@@ -1146,4 +1442,4 @@ li.chapter-item a.external-link::after {
|
||||
/* font-size: 15px; */
|
||||
margin-left: 15px;
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: __Inter_a4efb0, __Inter_Fallback_a4efb0, system-ui, arial;
|
||||
font-family: var(--body-font);
|
||||
color: var(--fg);
|
||||
background-color: var(--bg);
|
||||
text-size-adjust: none;
|
||||
@@ -16,10 +16,77 @@ html {
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 1.6rem;
|
||||
font-size: 1.7rem;
|
||||
line-height: 1.7;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#body-container {
|
||||
position: relative;
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
.bg-animation {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 20%, var(--bg-effect-primary) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 80%, var(--bg-effect-secondary) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 50% 50%, var(--bg-effect-tertiary) 0%, transparent 70%);
|
||||
animation: bg-drift 28s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.grid-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
background-image:
|
||||
linear-gradient(var(--grid-overlay-color) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--grid-overlay-color) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
opacity: 0.7;
|
||||
animation: grid-float 40s linear infinite;
|
||||
}
|
||||
|
||||
.particles {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: var(--particle-color);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
filter: blur(0.2px);
|
||||
animation: float-particle 16s infinite;
|
||||
}
|
||||
|
||||
@keyframes bg-drift {
|
||||
0% { transform: translate3d(0, 0, 0) scale(1); }
|
||||
100% { transform: translate3d(-2%, 1%, 0) scale(1.04); }
|
||||
}
|
||||
|
||||
@keyframes grid-float {
|
||||
0% { background-position: 0 0, 0 0; }
|
||||
100% { background-position: 60px 30px, 30px 60px; }
|
||||
}
|
||||
|
||||
@keyframes float-particle {
|
||||
0% { transform: translate3d(var(--particle-x), 100vh, 0) rotate(0deg); opacity: 0; }
|
||||
10% { opacity: 0.6; }
|
||||
90% { opacity: 0.6; }
|
||||
100% { transform: translate3d(calc(var(--particle-x) * 1.5), -120vh, 0) rotate(720deg); opacity: 0; }
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--mono-font) !important;
|
||||
font-size: var(--code-font-size);
|
||||
@@ -56,6 +123,18 @@ h4, h5 { margin-block-start: 2em; }
|
||||
margin-block-start: 1em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--heading-font);
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h1 { font-size: clamp(2.6rem, 2.2rem + 1.5vw, 3.6rem); }
|
||||
h2 { font-size: clamp(2.1rem, 1.8rem + 1vw, 2.8rem); }
|
||||
h3 { font-size: clamp(1.8rem, 1.6rem + 0.6vw, 2.2rem); }
|
||||
h4 { font-size: 1.7rem; }
|
||||
h5 { font-size: 1.5rem; }
|
||||
|
||||
h1:target::before,
|
||||
h2:target::before,
|
||||
h3:target::before,
|
||||
@@ -84,7 +163,9 @@ h6:target::before {
|
||||
}
|
||||
.page-wrapper {
|
||||
box-sizing: border-box;
|
||||
background-color: var(--bg);
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
.no-js .page-wrapper,
|
||||
.js:not(.sidebar-resizing) .page-wrapper {
|
||||
@@ -96,7 +177,7 @@ h6:target::before {
|
||||
|
||||
.content {
|
||||
overflow-y: auto;
|
||||
padding: 0 5px 50px 5px;
|
||||
padding: 10px 10px 60px 10px;
|
||||
}
|
||||
.content main {
|
||||
margin-inline-start: auto;
|
||||
@@ -107,11 +188,16 @@ h6:target::before {
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
max-width: var(--content-max-width);
|
||||
margin-top: 20px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.content p,
|
||||
.content ol,
|
||||
.content ul {
|
||||
line-height: 1.7;
|
||||
}
|
||||
.content p {
|
||||
margin: 0 0 1.2em 0;
|
||||
}
|
||||
.content p { line-height: 1.45em; }
|
||||
.content ol { line-height: 1.45em; }
|
||||
.content ul { line-height: 1.45em; }
|
||||
.content a { text-decoration: none; }
|
||||
.content a:hover { text-decoration: underline; }
|
||||
.content img, .content video { max-width: 100%; }
|
||||
@@ -127,9 +213,10 @@ h6:target::before {
|
||||
table {
|
||||
margin: 0 auto;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
table td {
|
||||
padding: 3px 20px;
|
||||
padding: 6px 18px;
|
||||
border: 1px var(--table-border-color) solid;
|
||||
}
|
||||
table thead {
|
||||
@@ -239,4 +326,4 @@ sup {
|
||||
|
||||
.result-no-output {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,12 +5,19 @@
|
||||
--sidebar-width: 300px;
|
||||
--sidebar-resize-indicator-width: 8px;
|
||||
--sidebar-resize-indicator-space: 2px;
|
||||
--page-padding: 15px;
|
||||
--content-max-width: 750px;
|
||||
--container-max-width: 1500px;
|
||||
--menu-bar-height: 64px;
|
||||
--page-padding: 20px;
|
||||
--content-max-width: 880px;
|
||||
--container-max-width: 1600px;
|
||||
--menu-bar-height: 52px;
|
||||
--footer-height: 75px;
|
||||
--body-font: "Open Sans", "Segoe UI", system-ui, sans-serif;
|
||||
--heading-font: "Open Sans", "Segoe UI", system-ui, sans-serif;
|
||||
--mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
|
||||
--bg-effect-primary: rgba(43, 121, 255, 0.10);
|
||||
--bg-effect-secondary: rgba(93, 167, 255, 0.08);
|
||||
--bg-effect-tertiary: rgba(43, 121, 255, 0.04);
|
||||
--grid-overlay-color: rgba(43, 121, 255, 0.035);
|
||||
--particle-color: #2b79ff;
|
||||
--code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */
|
||||
}
|
||||
|
||||
@@ -18,7 +25,7 @@
|
||||
|
||||
.ayu {
|
||||
--bg: hsl(210, 25%, 8%);
|
||||
--fg: #c5c5c5;
|
||||
--fg: #a9a9a9;
|
||||
|
||||
--sidebar-bg: #14191f;
|
||||
--sidebar-fg: #c8c9db;
|
||||
@@ -67,7 +74,7 @@
|
||||
|
||||
.coal {
|
||||
--bg: hsl(200, 7%, 8%);
|
||||
--fg: #98a3ad;
|
||||
--fg: #7c8790;
|
||||
|
||||
--sidebar-bg: #292c2f;
|
||||
--sidebar-fg: #a1adb8;
|
||||
@@ -116,7 +123,7 @@
|
||||
|
||||
.light, html:not(.js) {
|
||||
--bg: hsl(0, 0%, 100%);
|
||||
--fg: hsl(0, 0%, 0%);
|
||||
--fg: hsl(0, 0%, 24%);
|
||||
|
||||
--sidebar-bg: #fafafa;
|
||||
--sidebar-fg: hsl(0, 0%, 0%);
|
||||
@@ -165,7 +172,7 @@
|
||||
|
||||
.navy {
|
||||
--bg: hsl(226, 23%, 11%);
|
||||
--fg: #bcbdd0;
|
||||
--fg: #9fa1ad;
|
||||
|
||||
--sidebar-bg: #282d3f;
|
||||
--sidebar-fg: #c8c9db;
|
||||
@@ -343,8 +350,8 @@
|
||||
--warning-border: #ff8e00;
|
||||
|
||||
--table-border-color: #2f2f2f;
|
||||
--table-header-bg: hsl(226, 23%, 31%);
|
||||
--table-alternate-bg: hsl(226, 23%, 14%);
|
||||
--table-header-bg: #2f2f2f;
|
||||
--table-alternate-bg: #222222;
|
||||
|
||||
--searchbar-border-color: #2f2f2f;
|
||||
--searchbar-bg: hsl(0, 0%, 11%);
|
||||
@@ -355,7 +362,7 @@
|
||||
--searchresults-li-bg: hsl(0, 0%, 11%);
|
||||
--search-mark-bg: #a2cff5;
|
||||
|
||||
--sponsor-fg: #cfcdcd;
|
||||
--sponsor-fg: var(--fg);
|
||||
|
||||
--color-scheme: dark;
|
||||
|
||||
@@ -429,7 +436,7 @@
|
||||
--warning-border: #ff8e00;
|
||||
|
||||
--table-border-color: hsl(0, 0%, 95%);
|
||||
--table-header-bg: hsl(0, 0%, 80%);
|
||||
--table-header-bg: hsl(0, 0%, 95%);
|
||||
--table-alternate-bg: hsl(0, 0%, 97%);
|
||||
|
||||
--searchbar-border-color: #aaa;
|
||||
@@ -441,7 +448,7 @@
|
||||
--searchresults-li-bg: #e4f2fe;
|
||||
--search-mark-bg: #a2cff5;
|
||||
|
||||
--sponsor-fg: #333333;
|
||||
--sponsor-fg: var(--fg);
|
||||
|
||||
--color-scheme: light;
|
||||
|
||||
@@ -481,4 +488,4 @@
|
||||
--mdbook-alerts-color-link: rgb(153 27 27) !important;
|
||||
--mdbook-alerts-color-link-hover: rgb(127 29 29) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
196
theme/index.hbs
196
theme/index.hbs
@@ -63,6 +63,9 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="body-container">
|
||||
<div class="bg-animation" aria-hidden="true"></div>
|
||||
<div class="grid-overlay" aria-hidden="true"></div>
|
||||
<div class="particles" aria-hidden="true"></div>
|
||||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
||||
<script>
|
||||
try {
|
||||
@@ -137,7 +140,10 @@
|
||||
<i class="fa fa-bars"></i>
|
||||
</label>
|
||||
<a href="/">
|
||||
<h1 class="menu-title"><img src="../../../../../images/CLOUD-web-logo.png" alt="" style="width:auto;height:30px;vertical-align:middle;margin-right:5px;">{{ book_title }}</h1>
|
||||
<h1 class="menu-title">
|
||||
<img class="menu-title-logo" src="../../../../../images/CLOUD-logo-letters.svg" alt="" aria-hidden="true">
|
||||
{{ book_title }}
|
||||
</h1>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
@@ -163,13 +169,30 @@
|
||||
</div>
|
||||
<div class="icons">
|
||||
<div id="menubar-collapse-toggle" class="icon-button" type="button" title="Toggle menu bar" aria-label="Toggle Menu bar" aria-expanded="false" aria-controls="collapse">
|
||||
<i class="fa fa-ellipsis-h"></i>
|
||||
<span class="menu-hamburger" aria-hidden="true">≡</span>
|
||||
<div id="menubar-collapse-popup" class="menubar-collapse-popup" aria-label="Menu" role="menu">
|
||||
<a href="https://training.hacktricks.xyz" target="_blank" role="menuitem" class="menu-bar-link">Hacktricks Training</a>
|
||||
<a href="https://twitter.com/hacktricks_live" target="_blank" role="menuitem" class="menu-bar-link">Twitter</a>
|
||||
<a href="https://www.linkedin.com/company/hacktricks" target="_blank" role="menuitem" class="menu-bar-link">Linkedin</a>
|
||||
<a href="https://tools.hacktricks.wiki/" target="_blank" role="menuitem" class="menu-bar-link">HT Tools</a>
|
||||
<a href="https://github.com/sponsors/carlospolop" target="_blank" role="menuitem" class="menu-bar-link">Sponsor</a>
|
||||
{{#if search_enabled}}
|
||||
<button type="button" role="menuitem" class="menu-bar-link menu-action" data-toggle-search="true">
|
||||
<span class="menu-icon" aria-hidden="true">🔍</span>
|
||||
<span>Search</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
<div class="menu-theme-toggle" role="group" aria-label="Theme toggle">
|
||||
<button type="button" class="menu-theme-btn" data-theme-toggle="hacktricks-light" aria-label="Light theme">
|
||||
<span class="menu-icon" aria-hidden="true">☀</span>
|
||||
</button>
|
||||
<button type="button" class="menu-theme-btn" data-theme-toggle="hacktricks-dark" aria-label="Dark theme">
|
||||
<span class="menu-icon" aria-hidden="true">☾</span>
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" role="menuitem" class="menu-bar-link menu-action" data-toggle-translations="true">
|
||||
<span>Translations</span> ▾
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -182,6 +205,7 @@
|
||||
<div id="menubar-languages-toggle" class="icon-button" type="button" title="Translations" aria-label="Toggle Tanslations" aria-expanded="false" aria-controls="translations">
|
||||
<i class="fa fa-globe"></i>
|
||||
<span class="menu-bar-link">Translations</span>
|
||||
<span class="translations-caret" aria-hidden="true">▾</span>
|
||||
|
||||
<div id="menubar-languages-popup" class="menubar-languages-popup" aria-label="Language menu" role="language menu">
|
||||
<button id="af" role="menuitem" class="menu-bar-link">Afrikaans</button>
|
||||
@@ -204,6 +228,22 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="theme-wrapper" class="theme-wrapper theme-wrapper--menubar">
|
||||
<span class="theme-side-icon" aria-hidden="true">☀</span>
|
||||
<div id="theme-btns" class="theme-btns">
|
||||
<button id="hacktricks-light" type="button" role="radio" aria-label="Switch to light theme" aria-checked="false" class="theme">
|
||||
<i class="fa fa-sun-o"></i>
|
||||
</button>
|
||||
{{!-- <button id="default_theme" type="button" role="radio" aria-label="Switch to system theme" aria-checked="true" class="theme">
|
||||
<i class="fa fa-laptop"></i>
|
||||
</button> --}}
|
||||
<button id="hacktricks-dark" type="button" role="radio" aria-label="Switch to dark theme" aria-checked="false" class="theme theme-selected">
|
||||
<i class="fa fa-moon-o"></i>
|
||||
</button>
|
||||
</div>
|
||||
<span class="theme-side-icon" aria-hidden="true">☾</span>
|
||||
<span class="theme-orb" aria-hidden="true"></span>
|
||||
</div>
|
||||
|
||||
{{#if print_enable}}
|
||||
<a href="{{ path_to_root }}print.html" title="Print this book" aria-label="Print this book">
|
||||
@@ -225,6 +265,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="container" class="container">
|
||||
<label id="sidebar-float-toggle" class="sidebar-float-toggle" for="sidebar-toggle-anchor" title="Toggle book table of contents" aria-label="Toggle book table of contents">
|
||||
<span class="toggle-chevron" aria-hidden="true"><<</span>
|
||||
</label>
|
||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
||||
<!-- populated by js -->
|
||||
<mdbook-sidebar-scrollbox class="sidebar-scrollbox"></mdbook-sidebar-scrollbox>
|
||||
@@ -290,7 +333,10 @@
|
||||
</div>
|
||||
|
||||
<div class="sidetoc">
|
||||
<div class="sidetoc-wrapper">
|
||||
<button id="sidetoc-toggle" class="sidetoc-toggle" type="button" title="Toggle page table of contents" aria-label="Toggle page table of contents" aria-pressed="false">
|
||||
<span class="toggle-chevron" aria-hidden="true">>></span>
|
||||
</button>
|
||||
<div id="sidetoc-wrapper" class="sidetoc-wrapper">
|
||||
<nav class="pagetoc"></nav>
|
||||
<a class="sidesponsor" href="" target="_blank">
|
||||
<img src="" alt="" srcset="">
|
||||
@@ -304,23 +350,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div id="theme-wrapper" class="theme-wrapper">
|
||||
<div id="theme-btns" class="theme-btns">
|
||||
<button id="hacktricks-light" type="button" role="radio" aria-label="Switch to light theme" aria-checked="false" class="theme">
|
||||
<i class="fa fa-sun-o"></i>
|
||||
</button>
|
||||
{{!-- <button id="default_theme" type="button" role="radio" aria-label="Switch to system theme" aria-checked="true" class="theme">
|
||||
<i class="fa fa-laptop"></i>
|
||||
</button> --}}
|
||||
<button id="hacktricks-dark" type="button" role="radio" aria-label="Switch to dark theme" aria-checked="false" class="theme theme-selected">
|
||||
<i class="fa fa-moon-o"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{{#if live_reload_endpoint}}
|
||||
@@ -347,11 +381,11 @@
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'G-DSTYJWERH0');
|
||||
gtag('config', 'G-8QHENNPT4B');
|
||||
|
||||
var gtagScript = document.createElement('script');
|
||||
gtagScript.async = true;
|
||||
gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-DSTYJWERH0';
|
||||
gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-8QHENNPT4B';
|
||||
document.head.appendChild(gtagScript);
|
||||
</script>
|
||||
|
||||
@@ -384,6 +418,110 @@
|
||||
<script src="{{ path_to_root }}clipboard.min.js"></script>
|
||||
<script src="{{ path_to_root }}highlight.js"></script>
|
||||
<script src="{{ path_to_root }}book.js"></script>
|
||||
<script>
|
||||
(function initSideTocToggle() {
|
||||
var toggle = document.getElementById('sidetoc-toggle');
|
||||
if (!toggle) { return; }
|
||||
var root = document.documentElement;
|
||||
root.classList.remove('sidetoc-hidden');
|
||||
toggle.setAttribute('aria-pressed', 'false');
|
||||
toggle.addEventListener('click', function () {
|
||||
var hidden = root.classList.toggle('sidetoc-hidden');
|
||||
toggle.setAttribute('aria-pressed', hidden ? 'true' : 'false');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
(function initMenuActions() {
|
||||
document.querySelectorAll('[data-theme-toggle]').forEach(function (el) {
|
||||
el.addEventListener('click', function () {
|
||||
var id = el.getAttribute('data-theme-toggle');
|
||||
var btn = document.getElementById(id);
|
||||
if (btn) { btn.click(); }
|
||||
});
|
||||
});
|
||||
var translateBtn = document.querySelector('[data-toggle-translations="true"]');
|
||||
if (translateBtn) {
|
||||
translateBtn.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var popup = document.getElementById('menubar-collapse-popup');
|
||||
var langPopup = document.getElementById('menubar-languages-popup');
|
||||
var langToggle = document.getElementById('menubar-languages-toggle');
|
||||
var collapseToggle = document.getElementById('menubar-collapse-toggle');
|
||||
if (!popup || !langPopup) { return; }
|
||||
popup.classList.toggle('show-translations');
|
||||
popup.style.display = 'flex';
|
||||
if (collapseToggle) { collapseToggle.setAttribute('aria-expanded', true); }
|
||||
if (popup.classList.contains('show-translations')) {
|
||||
popup.appendChild(langPopup);
|
||||
langPopup.style.display = 'flex';
|
||||
} else if (langToggle) {
|
||||
langToggle.appendChild(langPopup);
|
||||
}
|
||||
});
|
||||
}
|
||||
var popupEl = document.getElementById('menubar-collapse-popup');
|
||||
if (popupEl) {
|
||||
popupEl.addEventListener('click', function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
var searchBtn = document.querySelector('[data-toggle-search="true"]');
|
||||
if (searchBtn) {
|
||||
searchBtn.addEventListener('click', function () {
|
||||
var toggle = document.getElementById('search-toggle');
|
||||
if (toggle) { toggle.click(); }
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
(function initTocTogglePositions() {
|
||||
var leftToggle = document.getElementById('sidebar-float-toggle');
|
||||
var rightToggle = document.getElementById('sidetoc-toggle');
|
||||
var sidebar = document.getElementById('sidebar');
|
||||
var sidebarAnchor = document.getElementById('sidebar-toggle-anchor');
|
||||
var sidetoc = document.querySelector('.sidetoc');
|
||||
if (!leftToggle || !rightToggle) { return; }
|
||||
|
||||
function getPagePadding() {
|
||||
var value = getComputedStyle(document.documentElement).getPropertyValue('--page-padding');
|
||||
var parsed = parseFloat(value);
|
||||
return Number.isFinite(parsed) ? parsed : 15;
|
||||
}
|
||||
|
||||
function updatePositions() {
|
||||
var pagePadding = getPagePadding();
|
||||
var sidebarVisible = sidebarAnchor ? sidebarAnchor.checked : true;
|
||||
|
||||
if (!sidebarVisible || !sidebar || sidebar.offsetParent === null) {
|
||||
leftToggle.style.left = Math.max(8, pagePadding) + 'px';
|
||||
} else {
|
||||
var sidebarRect = sidebar.getBoundingClientRect();
|
||||
leftToggle.style.left = Math.round(sidebarRect.right - 14) + 'px';
|
||||
}
|
||||
|
||||
var sidetocHidden = document.documentElement.classList.contains('sidetoc-hidden');
|
||||
if (!sidetoc || sidetoc.offsetParent === null || sidetocHidden) {
|
||||
rightToggle.style.left = Math.round(window.innerWidth - pagePadding - 28) + 'px';
|
||||
} else {
|
||||
var sidetocRect = sidetoc.getBoundingClientRect();
|
||||
rightToggle.style.left = Math.round(sidetocRect.left - 14) + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', updatePositions);
|
||||
window.addEventListener('load', updatePositions);
|
||||
if (sidebarAnchor) {
|
||||
sidebarAnchor.addEventListener('change', function () {
|
||||
window.setTimeout(updatePositions, 260);
|
||||
});
|
||||
}
|
||||
document.addEventListener('transitionend', updatePositions);
|
||||
updatePositions();
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Custom JS scripts -->
|
||||
{{#each additional_js}}
|
||||
@@ -393,6 +531,28 @@
|
||||
<!-- Custom analytics -->
|
||||
<script defer src="https://www.fairanalytics.de/pixel/deXeO7BNBrMuhdG1"></script>
|
||||
|
||||
<script>
|
||||
(function initParticles() {
|
||||
var container = document.querySelector('.particles');
|
||||
if (!container) { return; }
|
||||
var count = 28;
|
||||
for (var i = 0; i < count; i++) {
|
||||
var particle = document.createElement('span');
|
||||
particle.className = 'particle';
|
||||
var size = 2 + Math.random() * 3;
|
||||
var duration = 12 + Math.random() * 14;
|
||||
var delay = -Math.random() * duration;
|
||||
particle.style.width = size + 'px';
|
||||
particle.style.height = size + 'px';
|
||||
particle.style.left = (Math.random() * 100) + '%';
|
||||
particle.style.animationDuration = duration + 's';
|
||||
particle.style.animationDelay = delay + 's';
|
||||
particle.style.setProperty('--particle-x', (-12 + Math.random() * 24).toFixed(2) + 'vw');
|
||||
container.appendChild(particle);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
{{#if is_print}}
|
||||
{{#if mathjax_support}}
|
||||
|
||||
@@ -68,31 +68,39 @@
|
||||
.sidetoc {
|
||||
width: 250px;
|
||||
margin-top: 25px;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
}
|
||||
.sidetoc-wrapper {
|
||||
position: fixed;
|
||||
width: 250px;
|
||||
height: calc(100vh - var(--menu-bar-height) - 25px * 2);
|
||||
height: calc(100vh - var(--menu-bar-height) - 50px * 2);
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap:20px;
|
||||
background-color: transparent;
|
||||
}
|
||||
.pagetoc {
|
||||
max-height: 60%;
|
||||
overflow: auto;
|
||||
border-left: 1px solid var(--table-border-color);
|
||||
border-left: 1px solid color-mix(in srgb, var(--table-border-color) 70%, transparent);
|
||||
border-radius: 12px;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
padding: 4px 4px;
|
||||
}
|
||||
.sidesponsor {
|
||||
max-height: 40%;
|
||||
height: 40%;
|
||||
background-color: var(--bg);
|
||||
border: 1px solid var(--table-border-color);
|
||||
background-color: transparent;
|
||||
border: 1px solid color-mix(in srgb, var(--table-border-color) 70%, transparent);
|
||||
border-radius: 8px;
|
||||
padding: 5px;
|
||||
display: none; /*changed via JS once ad is loaded*/
|
||||
flex-direction: column;
|
||||
text-decoration: none !important;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.sidesponsor img {
|
||||
height: auto;
|
||||
@@ -145,14 +153,56 @@
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sidetoc-toggle {
|
||||
position: fixed;
|
||||
top: calc(var(--menu-bar-height) + 90px);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid color-mix(in srgb, var(--sidebar-active) 50%, var(--table-border-color));
|
||||
background: color-mix(in srgb, var(--bg) 60%, transparent);
|
||||
color: var(--sidebar-active);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 12;
|
||||
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
.sidetoc-toggle .toggle-chevron {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.08em;
|
||||
text-shadow: 0 0 8px color-mix(in srgb, var(--sidebar-active) 60%, transparent);
|
||||
}
|
||||
|
||||
.sidetoc-toggle:hover {
|
||||
background-color: color-mix(in srgb, var(--sidebar-active) 12%, transparent);
|
||||
color: var(--sidebar-active);
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
html.sidetoc-hidden .sidetoc {
|
||||
width: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
html.sidetoc-hidden .sidetoc-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html.sidetoc-hidden .sidetoc-toggle {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.pagetoc a {
|
||||
border-left: 1px solid var(--sidebar-bg);
|
||||
color: var(--fg) !important;
|
||||
border-left: none;
|
||||
color: color-mix(in srgb, var(--fg) 70%, var(--links)) !important;
|
||||
display: block;
|
||||
padding-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
@@ -160,16 +210,17 @@
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
font-size: 1.35rem;
|
||||
transition: color 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
.pagetoc a:hover {
|
||||
background: var(--sidebar-bg-hover);
|
||||
color: var(--sidebar-active) !important;
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(90deg, color-mix(in srgb, var(--links) 16%, transparent), transparent);
|
||||
color: color-mix(in srgb, var(--sidebar-active) 85%, var(--fg)) !important;
|
||||
}
|
||||
.pagetoc a.active {
|
||||
background: var(--sidebar-bg-hover);
|
||||
background: linear-gradient(90deg, color-mix(in srgb, var(--links) 24%, transparent), transparent);
|
||||
color: var(--sidebar-active) !important;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.pagetoc .pagetoc-H2 {
|
||||
padding-left: 20px;
|
||||
|
||||
@@ -62,14 +62,26 @@ class MDBookSidebarScrollbox extends HTMLElement {
|
||||
activeSection.scrollIntoView({ block: 'center' });
|
||||
}
|
||||
}
|
||||
// Toggle buttons
|
||||
var sidebarAnchorToggles = document.querySelectorAll('#sidebar a.toggle');
|
||||
function toggleSection(ev) {
|
||||
ev.currentTarget.parentElement.classList.toggle('expanded');
|
||||
// Toggle buttons (delegate to avoid navigation)
|
||||
var sidebarRoot = document.getElementById('sidebar');
|
||||
if (sidebarRoot) {
|
||||
sidebarRoot.addEventListener('click', function (ev) {
|
||||
var toggle = ev.target.closest('a.chapter-fold-toggle');
|
||||
if (!toggle) { return; }
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
var parentLi = toggle.closest('li.chapter-item');
|
||||
if (parentLi) {
|
||||
parentLi.classList.toggle('expanded');
|
||||
}
|
||||
}, true);
|
||||
sidebarRoot.addEventListener('pointerdown', function (ev) {
|
||||
var toggle = ev.target.closest('a.chapter-fold-toggle');
|
||||
if (!toggle) { return; }
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
}, true);
|
||||
}
|
||||
Array.from(sidebarAnchorToggles).forEach(function (el) {
|
||||
el.addEventListener('click', toggleSection);
|
||||
});
|
||||
}
|
||||
}
|
||||
window.customElements.define("mdbook-sidebar-scrollbox", MDBookSidebarScrollbox);
|
||||
window.customElements.define("mdbook-sidebar-scrollbox", MDBookSidebarScrollbox);
|
||||
|
||||
Reference in New Issue
Block a user