mirror of
https://github.com/cliffe/HacktivityLabSheets.git
synced 2026-02-20 13:50:46 +00:00
966a7e2d81
- Added new sections on image caption formatting and C code formatting to improve clarity and consistency in lab documentation. - Introduced specific formatting examples for image captions and C code blocks, emphasizing proper syntax and readability. - Updated existing image captions across multiple labs to follow the new italicized format for better presentation.
1426 lines
28 KiB
SCSS
1426 lines
28 KiB
SCSS
---
|
|
---
|
|
|
|
// Hacktivity Theme CSS Variables and Styles
|
|
|
|
// Set default font family
|
|
// use color emoji
|
|
body {
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
|
|
}
|
|
|
|
// Limit image width within lab content
|
|
.lab-content img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
margin: 1rem auto;
|
|
}
|
|
|
|
// Enhanced syntax highlighting for code blocks
|
|
.highlight pre {
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 6px;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
overflow-x: auto;
|
|
position: relative;
|
|
|
|
// General light theme colors for all languages
|
|
.c1, .c { color: #718096; font-style: italic; } // Comments
|
|
.nb { color: #63b3ed; font-weight: bold; } // Built-in commands
|
|
.s2, .s { color: #68d391; } // Strings
|
|
.o { color: #f56565; } // Operators
|
|
.nv { color: #b794f6; } // Variables
|
|
.k { color: #f56565; } // Keywords
|
|
.nt { color: #f6ad55; } // Command line options
|
|
.na { color: #63b3ed; } // Command names
|
|
.se { color: #68d391; } // String escapes
|
|
|
|
|
|
// Edit highlights within code blocks - light theme
|
|
.edit-highlight {
|
|
background-color: #fff3cd !important;
|
|
color: #856404 !important;
|
|
border-left: 3px solid #ffc107 !important;
|
|
padding: 0.1rem 0.3rem !important;
|
|
border-radius: 3px !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
// Copy button styling (handled by JavaScript)
|
|
.copy-btn {
|
|
&:hover {
|
|
background: #0056b3 !important;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Dark theme support
|
|
[data-theme="dark"] .highlight pre {
|
|
background-color: #1a202c;
|
|
border-color: #2d3748;
|
|
color: #e2e8f0;
|
|
|
|
// General dark theme colors for all languages
|
|
.c1, .c { color: #718096; font-style: italic; } // Comments
|
|
.nb { color: #63b3ed; font-weight: bold; } // Built-in commands
|
|
.s2, .s { color: #68d391; } // Strings
|
|
.o { color: #f56565; } // Operators
|
|
.nv { color: #b794f6; } // Variables
|
|
.k { color: #f56565; } // Keywords
|
|
.nt { color: #f6ad55; } // Command line options
|
|
.na { color: #63b3ed; } // Command names
|
|
.se { color: #68d391; } // String escapes
|
|
|
|
// Edit highlights within code blocks - dark theme
|
|
.edit-highlight {
|
|
background-color: #664d03 !important;
|
|
color: #ffda6a !important;
|
|
border-left: 3px solid #ffc107 !important;
|
|
padding: 0.1rem 0.3rem !important;
|
|
border-radius: 3px !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
// Dark theme copy button styling
|
|
.copy-btn {
|
|
background: #4a5568 !important;
|
|
color: #e2e8f0 !important;
|
|
|
|
&:hover {
|
|
background: #2d3748 !important;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: "Do Hyeon", "Source Code Pro", Monaco, monospace;
|
|
font-weight: normal;
|
|
}
|
|
|
|
code, pre, .highlight {
|
|
font-family: "Source Code Pro", Monaco, monospace;
|
|
}
|
|
|
|
// Dark mode as default
|
|
:root {
|
|
--navbg-color: #503883;
|
|
--navfg-color: whitesmoke;
|
|
--link-color: plum;
|
|
--challenge-link-color: whitesmoke;
|
|
--highlight-color: black;
|
|
--scoreboard-highlight-color: #503883;
|
|
--default-btnbg-color: none;
|
|
--default-btnfg-color: whitesmoke;
|
|
--default-btnfghov-color: plum;
|
|
--default-btnbghov-color: none;
|
|
--default-btnborder-color: #555;
|
|
--default-btnborderhov-color: plum;
|
|
--primary-btnbg-color: #503883;
|
|
--primary-btnhov-color: #271753;
|
|
--panelbg-color: black;
|
|
--panelborder-color: #555;
|
|
--panel-primary-border-color: plum;
|
|
--panel-headbg-color: black;
|
|
--panel-headfg-color: whitesmoke;
|
|
--panel-info-color: #333;
|
|
--panel-infoborder-color: #333;
|
|
|
|
--alert-infobg-color: #31708f;
|
|
--alert-infofg-color: #d9edf7;
|
|
--alert-infoborder-color: none;
|
|
--alert-warningbg-color: #8a6d3b;
|
|
--alert-warningfg-color: #fcf8e3;
|
|
--alert-warningborder-color: none;
|
|
--alert-dangerbg-color: #a94442;
|
|
--alert-dangerfg-color: #f2dede;
|
|
--alert-dangerborder-color: none;
|
|
--alert-successbg-color: #3c763d;
|
|
--alert-successfg-color: #dff0d8;
|
|
--alert-successborder-color: none;
|
|
--close-color: #171717;
|
|
|
|
--vmfg-color: #333333;
|
|
|
|
--bg-color: #171717;
|
|
--fg-color: whitesmoke;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--navbg-color: #1a1d22;
|
|
--navfg-color: whitesmoke;
|
|
--link-color: #503883;
|
|
--challenge-link-color: #333333;
|
|
--highlight-color: #f9f9f9;
|
|
--scoreboard-highlight-color: plum;
|
|
--default-btnbg-color: none;
|
|
--default-btnfg-color: #333;
|
|
--default-btnborder-color: #adadad;
|
|
--default-btnfghov-color: #333;
|
|
--default-btnbghov-color: #e6e6e6;
|
|
--default-btnborderhov-color: #adadad;
|
|
--primary-btnbg-color: #503883;
|
|
--primary-btnhov-color: #271753;
|
|
--panelbg-color: #fff;
|
|
--panelborder-color: #ddd;
|
|
--panel-primary-border-color: plum;
|
|
--panel-headbg-color: #f5f5f5;
|
|
--panel-headfg-color: #333333;
|
|
--panel-info-color: #fff;
|
|
--panel-infoborder-color: #bce8f1;
|
|
|
|
--alert-infobg-color: #d9edf7;
|
|
--alert-infofg-color: #31708f;
|
|
--alert-infoborder-color: #bce8f1;
|
|
--alert-warningbg-color: #fcf8e3;
|
|
--alert-warningfg-color: #8a6d3b;
|
|
--alert-warningborder-color: #faebcc;
|
|
--alert-dangerbg-color: #f2dede;
|
|
--alert-dangerfg-color: #a94442;
|
|
--alert-dangerborder-color: #ebccd1;
|
|
--alert-successbg-color: #dff0d8;
|
|
--alert-successfg-color: #3c763d;
|
|
--alert-successborder-color: #d6e9c6;
|
|
--close-color: #333333;
|
|
|
|
--vmfg-color: #333333;
|
|
|
|
--bg-color: white;
|
|
--fg-color: #333333;
|
|
}
|
|
|
|
// Base styles
|
|
body {
|
|
background: var(--bg-color);
|
|
color: var(--fg-color);
|
|
font-size: 16px;
|
|
scroll-behavior: smooth;
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
// Embedded mode styles
|
|
.embedded-mode .site-header,
|
|
.embedded-mode .site-footer,
|
|
.embedded-mode .lab-footer {
|
|
display: none !important;
|
|
}
|
|
|
|
.embedded-mode main {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// Site header styles
|
|
.site-header {
|
|
background-color: var(--navbg-color);
|
|
border-bottom: 1px solid var(--panelborder-color);
|
|
}
|
|
|
|
.site-header .wrapper {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.site-title {
|
|
color: var(--navfg-color);
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
font-family: "Do Hyeon", "Source Code Pro", Monaco, monospace;
|
|
}
|
|
|
|
.site-title:hover {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.site-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.menu-icon {
|
|
display: none;
|
|
color: var(--navfg-color);
|
|
font-size: 1.2rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.trigger {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.page-link {
|
|
color: var(--navfg-color);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.page-link:hover {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
// Site footer styles
|
|
.site-footer {
|
|
background-color: var(--panelbg-color);
|
|
border-top: 1px solid var(--panelborder-color);
|
|
padding: 2rem 0;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.site-footer .wrapper {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-text {
|
|
color: var(--fg-color);
|
|
opacity: 0.8;
|
|
margin: 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.footer-text a {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer-text a:hover {
|
|
color: var(--primary-btnhov-color);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
// Navigation styles
|
|
.navbar {
|
|
background-color: var(--navbg-color) !important;
|
|
border-color: var(--navbg-color);
|
|
}
|
|
|
|
.navbar-brand,
|
|
.navbar-nav > li > a {
|
|
color: var(--navfg-color) !important;
|
|
}
|
|
|
|
.navbar-nav > li > a:hover,
|
|
.navbar-nav > li > a:focus {
|
|
color: var(--link-color) !important;
|
|
}
|
|
|
|
// Link styles
|
|
a {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover,
|
|
a:focus {
|
|
color: var(--primary-btnhov-color);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
// Button styles
|
|
.btn {
|
|
background-color: var(--default-btnbg-color);
|
|
color: var(--default-btnfg-color);
|
|
border-color: var(--default-btnborder-color);
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: var(--default-btnbghov-color);
|
|
color: var(--default-btnfghov-color);
|
|
border-color: var(--default-btnborderhov-color);
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--primary-btnbg-color);
|
|
border-color: var(--primary-btnbg-color);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: var(--primary-btnhov-color);
|
|
border-color: var(--primary-btnhov-color);
|
|
}
|
|
|
|
// Panel styles
|
|
.panel {
|
|
background-color: var(--panelbg-color);
|
|
border-color: var(--panelborder-color);
|
|
}
|
|
|
|
.panel-default > .panel-heading {
|
|
background-color: var(--panel-headbg-color);
|
|
color: var(--panel-headfg-color);
|
|
border-color: var(--panelborder-color);
|
|
}
|
|
|
|
// Lab list styles
|
|
.lab-list {
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.category-heading {
|
|
color: var(--fg-color);
|
|
border-bottom: 2px solid var(--primary-btnbg-color);
|
|
padding-bottom: 0.5rem;
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
font-size: 1.5rem;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.category-labs {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
// Additional Hacktivity styling
|
|
h2 a {
|
|
color: inherit;
|
|
}
|
|
|
|
h2 a:hover {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.challenge_link {
|
|
color: whitesmoke;
|
|
position: absolute;
|
|
right: 0;
|
|
left: 0;
|
|
height: 180px;
|
|
display: flex;
|
|
justify-content: center; /* Align horizontal */
|
|
align-items: center; /* Align vertical */
|
|
}
|
|
|
|
.challenge_link h2 {
|
|
margin: 0 0 0 0;
|
|
}
|
|
|
|
a:active, .challenge_link:active {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover, a:focus, button {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
outline: none !important;
|
|
}
|
|
|
|
.challenge_link:hover {
|
|
color: plum;
|
|
}
|
|
|
|
.to_bottom {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.to_bottom p {
|
|
text-align: center;
|
|
margin: 0 0 0 0;
|
|
}
|
|
|
|
.db_challenge_link {
|
|
color: var(--challenge-link-color);
|
|
}
|
|
|
|
.tiny {
|
|
font-size: small;
|
|
}
|
|
|
|
.attribution a {
|
|
color: dimgrey;
|
|
}
|
|
|
|
.attribution {
|
|
font-size: small;
|
|
color: dimgrey;
|
|
}
|
|
|
|
.brand-name {
|
|
font-family: "Do Hyeon", "Source Code Pro", Monaco, monospace;
|
|
font-size: 100px;
|
|
color: plum !important;
|
|
margin-bottom: -46px;
|
|
}
|
|
|
|
.brand-after {
|
|
letter-spacing: 3px;
|
|
font-family: "Do Hyeon", "Source Code Pro", Monaco, monospace;
|
|
font-size: 30px;
|
|
}
|
|
|
|
h1.user_handle, h1.team_name {
|
|
font-size: 50px;
|
|
}
|
|
|
|
.user_handle, .team_name {
|
|
font-family: "Cute Font", "Source Code Pro", Monaco, monospace;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.lab-item {
|
|
border: 1px solid var(--panelborder-color);
|
|
border-radius: 6px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
background-color: var(--panelbg-color);
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.lab-item:hover {
|
|
background-color: var(--highlight-color);
|
|
border-radius: 2px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.lab-item h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.lab-item h3 a {
|
|
text-decoration: none;
|
|
color: var(--link-color);
|
|
font-weight: normal;
|
|
}
|
|
|
|
.lab-item h3 a:hover {
|
|
text-decoration: underline;
|
|
color: var(--primary-btnhov-color);
|
|
}
|
|
|
|
.lab-description {
|
|
margin-bottom: 1rem;
|
|
color: var(--fg-color);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.lab-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.author, .license {
|
|
margin-bottom: 0.5rem;
|
|
color: var(--fg-color);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.author strong, .license strong {
|
|
color: var(--fg-color);
|
|
font-weight: 600;
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.cybok {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.cybok strong {
|
|
color: var(--fg-color);
|
|
font-weight: 600;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.cybok-ka {
|
|
display: inline-block;
|
|
// background-color: var(--primary-btnhov-color);
|
|
// color: white;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 100px;
|
|
font-size: 0.5rem;
|
|
font-weight: 500;
|
|
margin: 0.125rem 0.25rem 0.125rem 0;
|
|
border: 1px solid var(--primary-btnbg-color);
|
|
}
|
|
|
|
.cybok-keyword {
|
|
display: inline-block;
|
|
// background-color: var(--primary-btnbg-color);
|
|
// color: white;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 100px;
|
|
font-size: 0.5rem;
|
|
font-weight: 500;
|
|
margin: 0.125rem 0.25rem 0.125rem 0;
|
|
border: 1px solid var(--primary-btnbg-color);
|
|
}
|
|
|
|
|
|
.tags {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tag {
|
|
// background-color: var(--primary-btnbg-color);
|
|
// color: white;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 12px;
|
|
font-size: 0.5rem;
|
|
border: 1px solid var(--primary-btnbg-color);
|
|
}
|
|
|
|
.no-labs {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
background-color: var(--panelbg-color);
|
|
border: 1px solid var(--panelborder-color);
|
|
border-radius: 6px;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.no-labs p {
|
|
margin: 0.5rem 0;
|
|
color: var(--fg-color);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
// Alert styles
|
|
.alert-info {
|
|
background-color: var(--alert-infobg-color);
|
|
color: var(--alert-infofg-color);
|
|
border-color: var(--alert-infoborder-color);
|
|
}
|
|
|
|
.alert-warning {
|
|
background-color: var(--alert-warningbg-color);
|
|
color: var(--alert-warningfg-color);
|
|
border-color: var(--alert-warningborder-color);
|
|
}
|
|
|
|
.alert-danger {
|
|
background-color: var(--alert-dangerbg-color);
|
|
color: var(--alert-dangerfg-color);
|
|
border-color: var(--alert-dangerborder-color);
|
|
}
|
|
|
|
.alert-success {
|
|
background-color: var(--alert-successbg-color);
|
|
color: var(--alert-successfg-color);
|
|
border-color: var(--alert-successborder-color);
|
|
}
|
|
|
|
// Close button
|
|
.close {
|
|
color: var(--close-color);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.close:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
// Dark theme specific adjustments
|
|
[data-theme="dark"] {
|
|
.chartjs-render-monitor {
|
|
filter: invert(1) hue-rotate(199deg) saturate(1);
|
|
}
|
|
|
|
.scoreboard img {
|
|
filter: invert(1);
|
|
}
|
|
|
|
.avatar_user_list,
|
|
.avatar_user_hero,
|
|
.avatar_view,
|
|
.scoreboard img,
|
|
.avatar_user_small {
|
|
filter: none !important;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
// Mobile responsive styles
|
|
@media (max-width: 767px) {
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
max-width: 100vw;
|
|
}
|
|
|
|
.content {
|
|
min-height: calc(100vh - 100px);
|
|
width: 100%;
|
|
right: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.container, main {
|
|
padding-right: 0px !important;
|
|
padding-left: 5px !important;
|
|
margin-right: 0 !important;
|
|
margin-left: 0 !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.content > div {
|
|
width: 100%;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.btn-lg, .submit, .btn-group-lg > .btn, .btn-group-lg > .button-xs,
|
|
.authform .btn-group-lg > .button, .btn-group-lg > .submit {
|
|
padding: 10px 12px !important;
|
|
line-height: 1.2 !important;
|
|
}
|
|
|
|
.navbar, .navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.row {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.lab-item {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.lab-meta {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
// Mobile header styles
|
|
.site-header .wrapper {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.site-title {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.menu-icon {
|
|
display: block;
|
|
}
|
|
|
|
.trigger {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.page-link {
|
|
padding: 0.5rem;
|
|
border-radius: 4px;
|
|
background-color: var(--panelbg-color);
|
|
}
|
|
|
|
// Mobile footer styles
|
|
.site-footer {
|
|
padding: 1.5rem 0;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.footer-text {
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
// Print styles
|
|
@media print {
|
|
* {
|
|
overflow: visible !important;
|
|
}
|
|
.footer-dark {
|
|
display: none !important;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
// Animations
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes scale {
|
|
from { transform: scale(1); }
|
|
to { transform: scale(1.1); }
|
|
}
|
|
|
|
a.spin_on_click:focus .fa-solid, .working {
|
|
animation-name: spin;
|
|
animation-duration: 4000ms;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
a.scale_on_click:focus .fa-solid {
|
|
animation: scale 1000ms ease-in-out infinite alternate;
|
|
}
|
|
|
|
// Utility classes
|
|
.clear-both {
|
|
clear: both;
|
|
}
|
|
|
|
.transparent_bg {
|
|
background: transparent !important;
|
|
}
|
|
|
|
// Typography improvements
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: var(--fg-color);
|
|
font-weight: normal;
|
|
}
|
|
|
|
|
|
code {
|
|
padding: 0.125rem 0.25rem;
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
pre {
|
|
border: 1px solid var(--panelborder-color);
|
|
border-radius: 4px;
|
|
padding: 1rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
// Table styles
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: 1.5rem 0;
|
|
background-color: var(--panelbg-color);
|
|
border: 1px solid var(--panelborder-color);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
th, td {
|
|
border: 1px solid var(--panelborder-color);
|
|
padding: 0.75rem 1rem;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
th {
|
|
background-color: var(--primary-btnbg-color);
|
|
color: white;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
border-bottom: 2px solid var(--primary-btnbg-color);
|
|
}
|
|
|
|
td {
|
|
background-color: var(--panelbg-color);
|
|
color: var(--fg-color);
|
|
font-size: 0.9rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
// Alternating row colors for better readability
|
|
tbody tr:nth-child(even) td {
|
|
background-color: var(--highlight-color);
|
|
}
|
|
|
|
tbody tr:nth-child(odd) td {
|
|
background-color: var(--panelbg-color);
|
|
}
|
|
|
|
// Hover effects
|
|
tbody tr:hover td {
|
|
background-color: var(--primary-btnbg-color);
|
|
color: white;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
// Dark mode specific table adjustments
|
|
[data-theme="dark"] table {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] tbody tr:nth-child(even) td {
|
|
background-color: #2a2a2a;
|
|
}
|
|
|
|
[data-theme="dark"] tbody tr:nth-child(odd) td {
|
|
background-color: var(--panelbg-color);
|
|
}
|
|
|
|
[data-theme="dark"] tbody tr:hover td {
|
|
background-color: var(--primary-btnbg-color);
|
|
color: white;
|
|
}
|
|
|
|
// Light mode specific table adjustments
|
|
[data-theme="light"] table {
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
[data-theme="light"] tbody tr:nth-child(even) td {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
[data-theme="light"] tbody tr:nth-child(odd) td {
|
|
background-color: white;
|
|
}
|
|
|
|
[data-theme="light"] tbody tr:hover td {
|
|
background-color: var(--primary-btnbg-color);
|
|
color: white;
|
|
}
|
|
|
|
// Responsive table styling
|
|
@media (max-width: 767px) {
|
|
table {
|
|
font-size: 0.8rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
th, td {
|
|
padding: 0.5rem 0.75rem;
|
|
}
|
|
|
|
th {
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
// Blockquote styles
|
|
blockquote {
|
|
border-left: 4px solid var(--primary-btnbg-color);
|
|
margin: 1rem 0;
|
|
padding: 0.5rem 1rem;
|
|
background-color: var(--highlight-color);
|
|
font-style: italic;
|
|
}
|
|
|
|
// Action item styles for lab sheets
|
|
.action-item {
|
|
background-color: var(--alert-infobg-color);
|
|
border: 1px solid var(--alert-infoborder-color);
|
|
border-left: 4px solid var(--primary-btnbg-color);
|
|
border-radius: 4px;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
color: var(--alert-infofg-color);
|
|
}
|
|
|
|
.action-item h1, .action-item h2, .action-item h3, .action-item h4, .action-item h5, .action-item h6 {
|
|
color: var(--alert-infofg-color);
|
|
margin-top: 0;
|
|
}
|
|
|
|
.action-item::before {
|
|
content: "⚡ ";
|
|
font-weight: bold;
|
|
}
|
|
|
|
.warning-item {
|
|
background-color: var(--alert-warningbg-color);
|
|
border: 1px solid var(--alert-warningborder-color);
|
|
border-left: 4px solid #f0ad4e;
|
|
border-radius: 4px;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
color: var(--alert-warningfg-color);
|
|
}
|
|
|
|
.warning-item h1, .warning-item h2, .warning-item h3, .warning-item h4, .warning-item h5, .warning-item h6 {
|
|
color: var(--alert-warningfg-color);
|
|
margin-top: 0;
|
|
}
|
|
|
|
.warning-item::before {
|
|
content: "⚠️ ";
|
|
font-weight: bold;
|
|
}
|
|
|
|
.danger-item {
|
|
background-color: var(--alert-dangerbg-color);
|
|
border: 1px solid var(--alert-dangerborder-color);
|
|
border-left: 4px solid #d9534f;
|
|
border-radius: 4px;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
color: var(--alert-dangerfg-color);
|
|
}
|
|
|
|
.danger-item h1, .danger-item h2, .danger-item h3, .danger-item h4, .danger-item h5, .danger-item h6 {
|
|
color: var(--alert-dangerfg-color);
|
|
margin-top: 0;
|
|
}
|
|
|
|
.danger-item::before {
|
|
content: "🚨 ";
|
|
font-weight: bold;
|
|
}
|
|
|
|
.success-item {
|
|
background-color: var(--alert-successbg-color);
|
|
border: 1px solid var(--alert-successborder-color);
|
|
border-left: 4px solid #5cb85c;
|
|
border-radius: 4px;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
color: var(--alert-successfg-color);
|
|
}
|
|
|
|
.success-item h1, .success-item h2, .success-item h3, .success-item h4, .success-item h5, .success-item h6 {
|
|
color: var(--alert-successfg-color);
|
|
margin-top: 0;
|
|
}
|
|
|
|
.success-item::before {
|
|
content: "✅ ";
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tip-item {
|
|
// background-color: var(--alert-infobg-color);
|
|
border: 1px solid var(--alert-infoborder-color);
|
|
border-left: 4px solid #17a2b8;
|
|
border-radius: 4px;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
color: var(--alert-infofg-color);
|
|
}
|
|
|
|
.tip-item h1, .tip-item h2, .tip-item h3, .tip-item h4, .tip-item h5, .tip-item h6 {
|
|
color: var(--alert-infofg-color);
|
|
margin-top: 0;
|
|
}
|
|
|
|
.tip-item::before {
|
|
content: "💡 ";
|
|
font-weight: bold;
|
|
}
|
|
|
|
.note-item {
|
|
// border: 1px solid #dee2e6;
|
|
border-left: 4px solid var(--primary-btnbg-color);
|
|
border-radius: 4px;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
color: #495057;
|
|
}
|
|
|
|
.note-item h1, .note-item h2, .note-item h3, .note-item h4, .note-item h5, .note-item h6 {
|
|
color: #495057;
|
|
margin-top: 0;
|
|
}
|
|
|
|
// .note-item::before {
|
|
// content: "📝 ";
|
|
// font-weight: bold;
|
|
// }
|
|
|
|
[data-theme="dark"] .note-item {
|
|
border-color: #495057;
|
|
border-left-color: var(--primary-btnbg-color);;
|
|
color: #e9ecef;
|
|
}
|
|
|
|
[data-theme="dark"] .note-item h1,
|
|
[data-theme="dark"] .note-item h2,
|
|
[data-theme="dark"] .note-item h3,
|
|
[data-theme="dark"] .note-item h4,
|
|
[data-theme="dark"] .note-item h5,
|
|
[data-theme="dark"] .note-item h6 {
|
|
color: #e9ecef;
|
|
}
|
|
|
|
.hint-item {
|
|
background-color: #d4edda;
|
|
border: 1px solid #c3e6cb;
|
|
border-left: 4px solid #28a745;
|
|
border-radius: 4px;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
color: #155724;
|
|
}
|
|
|
|
.hint-item h1, .hint-item h2, .hint-item h3, .hint-item h4, .hint-item h5, .hint-item h6 {
|
|
color: #155724;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.hint-item::before {
|
|
content: "💭 ";
|
|
font-weight: bold;
|
|
}
|
|
|
|
[data-theme="dark"] .hint-item {
|
|
background-color: #1e7e34;
|
|
border-color: #28a745;
|
|
border-left-color: #28a745;
|
|
color: #d4edda;
|
|
}
|
|
|
|
[data-theme="dark"] .hint-item h1,
|
|
[data-theme="dark"] .hint-item h2,
|
|
[data-theme="dark"] .hint-item h3,
|
|
[data-theme="dark"] .hint-item h4,
|
|
[data-theme="dark"] .hint-item h5,
|
|
[data-theme="dark"] .hint-item h6 {
|
|
color: #d4edda;
|
|
}
|
|
|
|
.question-item {
|
|
background-color: #e0f2f1;
|
|
border: 1px solid #4db6ac;
|
|
border-left: 4px solid #009688;
|
|
border-radius: 4px;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
color: #00695c;
|
|
}
|
|
|
|
.question-item h1, .question-item h2, .question-item h3, .question-item h4, .question-item h5, .question-item h6 {
|
|
color: #00695c;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.question-item::before {
|
|
content: "❓ ";
|
|
font-weight: bold;
|
|
}
|
|
|
|
[data-theme="dark"] .question-item {
|
|
background-color: #004d40;
|
|
border-color: #26a69a;
|
|
border-left-color: #26a69a;
|
|
color: #4db6ac;
|
|
}
|
|
|
|
[data-theme="dark"] .question-item h1,
|
|
[data-theme="dark"] .question-item h2,
|
|
[data-theme="dark"] .question-item h3,
|
|
[data-theme="dark"] .question-item h4,
|
|
[data-theme="dark"] .question-item h5,
|
|
[data-theme="dark"] .question-item h6 {
|
|
color: #4db6ac;
|
|
}
|
|
|
|
.flag-item {
|
|
background: linear-gradient(135deg, #e1bee7 0%, #f3e5f5 100%);
|
|
border: 1px solid #ea75ff;
|
|
border-left: 6px solid #503883;
|
|
border-radius: 8px;
|
|
padding: 1.25rem;
|
|
margin: 1.25rem 0;
|
|
color: #2e1065;
|
|
box-shadow: 0 4px 12px rgba(80, 56, 131, 0.15);
|
|
position: relative;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.flag-item h1, .flag-item h2, .flag-item h3, .flag-item h4, .flag-item h5, .flag-item h6 {
|
|
color: #2e1065;
|
|
margin-top: 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.flag-item::before {
|
|
content: "🏳️ ";
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
// .flag-item::after {
|
|
// content: "";
|
|
// position: absolute;
|
|
// top: 0;
|
|
// right: 0;
|
|
// width: 0;
|
|
// height: 0;
|
|
// border-left: 20px solid transparent;
|
|
// border-top: 20px solid #9c27b0;
|
|
// }
|
|
|
|
[data-theme="dark"] .flag-item {
|
|
background: linear-gradient(135deg, #2d1b69 0%, #4a148c 100%);
|
|
border-color: plum;
|
|
border-left-color: #ea75ff;
|
|
color: #f3e5f5;
|
|
box-shadow: 0 4px 12px rgba(80, 56, 131, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .flag-item h1,
|
|
[data-theme="dark"] .flag-item h2,
|
|
[data-theme="dark"] .flag-item h3,
|
|
[data-theme="dark"] .flag-item h4,
|
|
[data-theme="dark"] .flag-item h5,
|
|
[data-theme="dark"] .flag-item h6 {
|
|
color: #f3e5f5;
|
|
}
|
|
|
|
[data-theme="dark"] .flag-item::after {
|
|
border-top-color: #9c27b0;
|
|
}
|
|
|
|
// Inline action styling
|
|
.action-text {
|
|
background-color: var(--primary-btnbg-color);
|
|
color: white;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 3px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.action-text::before {
|
|
content: "→ ";
|
|
}
|
|
|
|
// Markdown highlight syntax support
|
|
mark, .highlight-text{
|
|
background-color: #f0ad4e;
|
|
color: #000;
|
|
padding: 0.1rem 0.2rem;
|
|
border-radius: 2px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
[data-theme="dark"] mark,
|
|
[data-theme="dark"] .highlight-text {
|
|
background-color: #f0ad4e;
|
|
color: #000;
|
|
}
|
|
|
|
// Specific highlight types
|
|
.action-highlight {
|
|
background-color: #e3f2fd;
|
|
color: #1565c0;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 4px;
|
|
border-left: 3px solid #2196f3;
|
|
font-weight: 500;
|
|
margin: 0.1rem 0;
|
|
display: inline;
|
|
}
|
|
|
|
[data-theme="dark"] .action-highlight {
|
|
background-color: #1a237e;
|
|
color: #90caf9;
|
|
border-left-color: #64b5f6;
|
|
}
|
|
|
|
.tip-highlight {
|
|
background-color: #f3e5f5;
|
|
color: #7b1fa2;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 4px;
|
|
border-left: 3px solid #9c27b0;
|
|
font-weight: 500;
|
|
display: inline;
|
|
margin: 0.1rem 0;
|
|
}
|
|
|
|
[data-theme="dark"] .tip-highlight {
|
|
background-color: #4a148c;
|
|
color: #ce93d8;
|
|
border-left-color: #ba68c8;
|
|
}
|
|
|
|
.hint-highlight {
|
|
background-color: #e8f5e8;
|
|
color: #2e7d32;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 4px;
|
|
border-left: 3px solid #4caf50;
|
|
font-weight: 500;
|
|
display: inline;
|
|
margin: 0.1rem 0;
|
|
}
|
|
|
|
[data-theme="dark"] .hint-highlight {
|
|
background-color: #1b5e20;
|
|
color: #a5d6a7;
|
|
border-left-color: #81c784;
|
|
}
|
|
|
|
.note-highlight {
|
|
background-color: #f5f5f5;
|
|
color: #424242;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 4px;
|
|
border-left: 3px solid #9e9e9e;
|
|
font-weight: 500;
|
|
display: inline;
|
|
margin: 0.1rem 0;
|
|
}
|
|
|
|
[data-theme="dark"] .note-highlight {
|
|
background-color: #424242;
|
|
color: #e0e0e0;
|
|
border-left-color: #9e9e9e;
|
|
}
|
|
|
|
.warning-highlight {
|
|
background-color: #fff3e0;
|
|
color: #ef6c00;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 4px;
|
|
border-left: 3px solid #ff9800;
|
|
font-weight: 500;
|
|
display: inline;
|
|
margin: 0.1rem 0;
|
|
}
|
|
|
|
[data-theme="dark"] .warning-highlight {
|
|
background-color: #e65100;
|
|
color: #ffb74d;
|
|
border-left-color: #ffb74d;
|
|
}
|
|
|
|
.vm-highlight {
|
|
background-color: #e1f5fe;
|
|
color: #0277bd;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 4px;
|
|
border-left: 3px solid #0288d1;
|
|
font-weight: 500;
|
|
display: inline-block;
|
|
margin: 0.1rem 0;
|
|
}
|
|
|
|
[data-theme="dark"] .vm-highlight {
|
|
background-color: #01579b;
|
|
color: #81d4fa;
|
|
border-left-color: #29b6f6;
|
|
}
|
|
|
|
.question-highlight {
|
|
background-color: #e0f2f1;
|
|
color: #00695c;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 4px;
|
|
border-left: 3px solid #009688;
|
|
font-weight: 500;
|
|
display: inline-block;
|
|
margin: 0.1rem 0;
|
|
}
|
|
|
|
[data-theme="dark"] .question-highlight {
|
|
background-color: #004d40;
|
|
color: #4db6ac;
|
|
border-left-color: #26a69a;
|
|
}
|
|
|
|
.edit-highlight {
|
|
background-color: #fff3cd;
|
|
color: #856404;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 4px;
|
|
border-left: 3px solid #ffc107;
|
|
font-weight: 500;
|
|
display: inline-block;
|
|
margin: 0.1rem 0;
|
|
}
|
|
|
|
[data-theme="dark"] .edit-highlight {
|
|
background-color: #664d03;
|
|
color: #ffda6a;
|
|
border-left-color: #ffc107;
|
|
}
|
|
|
|
.language-bash {
|
|
font-family: "Source Code Pro", Monaco, monospace !important;
|
|
// background-color: #f0ad4e;
|
|
color: var(--fg-color);
|
|
padding: 0.1rem 0.2rem;
|
|
// border-radius: 2px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
// Add terminal icon above bash code blocks
|
|
.language-bash::before {
|
|
content: ">_ ";
|
|
font-size: 1em;
|
|
margin-right: 0.5rem;
|
|
float: left;
|
|
}
|
|
|
|
.nav-link {
|
|
font-family: "Cute Font", "Source Code Pro", Monaco, monospace;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
margin: 1rem;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: var(--primary-btnhov-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
// Add a small caption below images
|
|
img + em,
|
|
a:has(img) + em {
|
|
font-size: 0.8em;
|
|
font-style: italic;
|
|
display: block;
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
text-align: center;
|
|
}
|
|
|