diff --git a/docs/Sass.md b/docs/Sass.md index 1915e46..91a685d 100644 --- a/docs/Sass.md +++ b/docs/Sass.md @@ -1,12 +1,23 @@ # Sass -Running Sass +## Docker +There is a dockerfile in the sass directory you can build an image with. + +```bash +cd sass +docker build -t sass-container . ``` + +## Running Sass + +```bash sudo docker run --rm -v $(pwd):/usr/src/app -w /usr/src/app sass-container sass novaconium/sass/project.sass novaconium/public/css/novaconium.css ``` Compressed: -``` -sudo docker run --rm -v $(pwd):/usr/src/app -w /usr/src/app sass-container sass --style=compressed novaconium/sass/project.sass novaconium/public/css/novaconium.css +```bash +# Build Novaconium (compressed) +docker run --rm -v "$(pwd):/usr/src/app" -w /usr/src/app sass-container --style=compressed sass/novaconium.sass skeleton/novaconium/public/css/novaconium.css + ``` \ No newline at end of file diff --git a/sass/Dockerfile b/sass/Dockerfile new file mode 100644 index 0000000..f7cfa23 --- /dev/null +++ b/sass/Dockerfile @@ -0,0 +1,12 @@ +# Use an official Node.js image as a base +FROM node:16-slim + +# Install Sass globally +RUN npm install -g sass \ + && npm cache clean --force + +# Set working directory inside container +WORKDIR /usr/src/app + +# Set entrypoint to Sass CLI +ENTRYPOINT ["sass"] diff --git a/sass/base/_background.sass b/sass/base/_background.sass index 4454b18..378a09e 100644 --- a/sass/base/_background.sass +++ b/sass/base/_background.sass @@ -1,6 +1,6 @@ // base/_background.sass // svg from https://heropatterns.com/ -body +body.novaconium background-color: #000000; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%231f2c17' fill-opacity='0.4' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E") \ No newline at end of file diff --git a/sass/framework/_forms.sass b/sass/framework/_forms.sass index 6960820..8cb500f 100644 --- a/sass/framework/_forms.sass +++ b/sass/framework/_forms.sass @@ -3,59 +3,60 @@ @use '../abstracts' as * @use '../base' as * -#edit-page-form-novaconium - // Form groups: Spacing - .form-group - margin-bottom: space('md') // 1rem +body.novaconium + #edit-page-form-novaconium + // Form groups: Spacing + .form-group + margin-bottom: space('md') // 1rem - &.fullwidth textarea - width: 100% - resize: vertical + &.fullwidth textarea + width: 100% + resize: vertical - .checkbox-group - margin-top: space('lg') // 1.5rem + .checkbox-group + margin-top: space('lg') // 1.5rem - // Inputs: Dark bg, green focus - input[type="text"], - input[type="number"], - textarea, - select - background-color: color('bg-darker') // Deeper green-black - border: 1px solid color('border-light') - color: $text-light - padding: space('sm') - border-radius: 4px - font-family: 'VT323', $mono-font // Matrix monospace + // Inputs: Dark bg, green focus + input[type="text"], + input[type="number"], + textarea, + select + background-color: color('bg-darker') // Deeper green-black + border: 1px solid color('border-light') + color: $text-light + padding: space('sm') + border-radius: 4px + font-family: 'VT323', $mono-font // Matrix monospace - &:focus - border-color: $accent-light // Lime focus - box-shadow: 0 0 0 space('xs') rgba($accent-light, 0.3) // Glow ring - outline: none + &:focus + border-color: $accent-light // Lime focus + box-shadow: 0 0 0 space('xs') rgba($accent-light, 0.3) // Glow ring + outline: none - input[type="checkbox"] - accent-color: $accent-light // Green checkbox + input[type="checkbox"] + accent-color: $accent-light // Green checkbox - // Submit button: Green primary - button[type="submit"] - background-color: $accent-light - color: color('bg-dark') // Dark text on green - border: none - padding: space('sm') space('md') - border-radius: 4px - cursor: pointer - font-family: 'VT323', $mono-font + // Submit button: Green primary + button[type="submit"] + background-color: $accent-light + color: color('bg-dark') // Dark text on green + border: none + padding: space('sm') space('md') + border-radius: 4px + cursor: pointer + font-family: 'VT323', $mono-font - &:hover, &:focus - background-color: hsl(120, 100%, 30%) // Darker green (35% L -5%) - box-shadow: 0 0 4px rgba($accent-light, 0.5) + &:hover, &:focus + background-color: hsl(120, 100%, 30%) // Darker green (35% L -5%) + box-shadow: 0 0 4px rgba($accent-light, 0.5) - // Text/links: Muted with hover - p - color: $text-muted + // Text/links: Muted with hover + p + color: $text-muted - a - color: $accent-light + a + color: $accent-light - &:hover - color: $text-lighter // Brighter green - text-decoration: underline \ No newline at end of file + &:hover + color: $text-lighter // Brighter green + text-decoration: underline \ No newline at end of file diff --git a/sass/framework/_login_form.sass b/sass/framework/_login_form.sass index 8539c11..b88c8b4 100644 --- a/sass/framework/_login_form.sass +++ b/sass/framework/_login_form.sass @@ -2,7 +2,7 @@ @use '../abstracts' as * -#login +body.novaconium #login // No background or border—use parent's ambient styling padding: 0 // Or keep minimal if needed; adjust to 2rem if you want internal space // No centering: left-aligned by default diff --git a/sass/framework/_logo.sass b/sass/framework/_logo.sass index 4ac8955..e112e60 100644 --- a/sass/framework/_logo.sass +++ b/sass/framework/_logo.sass @@ -1,78 +1,79 @@ -#biglogo - position: relative - display: inline-block - padding: 20px 0 - border-radius: 0 // Keep it sharp, no curves - overflow: hidden +body.novaconium + #biglogo + position: relative + display: inline-block + padding: 20px 0 + border-radius: 0 // Keep it sharp, no curves + overflow: hidden - &::before - content: '' - position: absolute - top: 0 - left: 0 - right: 0 - bottom: 0 - background-image: linear-gradient(rgba(0, 255, 0, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 0, 0.02) 1px, transparent 1px) - background-size: 20px 20px - opacity: 0.1 // Subtle grid/matrix rain hint - pointer-events: none + &::before + content: '' + position: absolute + top: 0 + left: 0 + right: 0 + bottom: 0 + background-image: linear-gradient(rgba(0, 255, 0, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 0, 0.02) 1px, transparent 1px) + background-size: 20px 20px + opacity: 0.1 // Subtle grid/matrix rain hint + pointer-events: none - // Scan lines for extra flicker - &::after - content: '' - position: absolute - top: 0 - left: 0 - right: 0 - height: 1px - background: linear-gradient(90deg, transparent, #00ff00, transparent) - opacity: 0.05 - animation: scan 3s linear infinite + // Scan lines for extra flicker + &::after + content: '' + position: absolute + top: 0 + left: 0 + right: 0 + height: 1px + background: linear-gradient(90deg, transparent, #00ff00, transparent) + opacity: 0.05 + animation: scan 3s linear infinite - .main - display: block - font-family: 'Orbitron', sans-serif // Cyberpunk geometric punch - font-size: 4.5rem // Chunky figlet scale - font-weight: 900 // Black weight for max angular depth - color: #fff - letter-spacing: 0.1em // Slightly looser for Orbitron's geometry - line-height: 0.85 // Compact height like figlet blocks - text-transform: uppercase - - // Multi-layer shadow to mimic ansishadow's depth: base shadow + edge glow - text-shadow: 4px 4px 0 #222, 5px 5px 0 #111, -1px -1px 0 #00ff00, 1px 1px 20px rgba(0, 255, 0, 0.3) // Main drop shadow, deeper offset, subtle green edge highlight for cyber pop, glow for security flair - filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8)) // Browser shadow boost - - .sub - display: block - font-family: 'Orbitron', sans-serif // Match for cohesion, or swap to monospace if you want contrast - font-size: 2.5rem - font-weight: 700 // Bold but not overpowering - color: #fff - letter-spacing: 0.15em // Wider for emphasis - margin-top: 0.5rem - text-shadow: 2px 2px 0 #222, -1px -1px 0 #00ff00, 1px 1px 10px rgba(0, 255, 0, 0.2) // Lighter shadow, subtle green edge, glow - filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6)) - - // Optional: Glitch animation on hover for that hacked feel - &:hover .main - animation: glitch 0.3s infinite + display: block + font-family: 'Orbitron', sans-serif // Cyberpunk geometric punch + font-size: 4.5rem // Chunky figlet scale + font-weight: 900 // Black weight for max angular depth + color: #fff + letter-spacing: 0.1em // Slightly looser for Orbitron's geometry + line-height: 0.85 // Compact height like figlet blocks + text-transform: uppercase + + // Multi-layer shadow to mimic ansishadow's depth: base shadow + edge glow + text-shadow: 4px 4px 0 #222, 5px 5px 0 #111, -1px -1px 0 #00ff00, 1px 1px 20px rgba(0, 255, 0, 0.3) // Main drop shadow, deeper offset, subtle green edge highlight for cyber pop, glow for security flair + filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8)) // Browser shadow boost -@keyframes scan - 0% - top: -1px - 100% - top: 100% + .sub + display: block + font-family: 'Orbitron', sans-serif // Match for cohesion, or swap to monospace if you want contrast + font-size: 2.5rem + font-weight: 700 // Bold but not overpowering + color: #fff + letter-spacing: 0.15em // Wider for emphasis + margin-top: 0.5rem + text-shadow: 2px 2px 0 #222, -1px -1px 0 #00ff00, 1px 1px 10px rgba(0, 255, 0, 0.2) // Lighter shadow, subtle green edge, glow + filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6)) -@keyframes glitch - 0%, 100% - transform: translate(0) - 20% - transform: translate(-2px, 2px) - 40% - transform: translate(-2px, -2px) - 60% - transform: translate(2px, 2px) - 80% - transform: translate(2px, -2px) \ No newline at end of file + // Optional: Glitch animation on hover for that hacked feel + &:hover + .main + animation: glitch 0.3s infinite + + @keyframes scan + 0% + top: -1px + 100% + top: 100% + + @keyframes glitch + 0%, 100% + transform: translate(0) + 20% + transform: translate(-2px, 2px) + 40% + transform: translate(-2px, -2px) + 60% + transform: translate(2px, 2px) + 80% + transform: translate(2px, -2px) \ No newline at end of file diff --git a/sass/framework/_main.sass b/sass/framework/_main.sass index 4159cfb..1dcdebb 100644 --- a/sass/framework/_main.sass +++ b/sass/framework/_main.sass @@ -3,59 +3,60 @@ @use '../abstracts' as * @use '../base' as * -// Main page wrapper: Centered flex -#page .container - display: flex - padding: 0 - justify-content: center - align-items: flex-start - padding-top: space('lg') - -// Article content: Fixed width, no shrink -article - width: 1140px - flex-shrink: 0 - padding: 3rem - margin: 0 - background-color: $bg-dark - border: 1px solid $bg-darker - -ul#leftnav - width: 320px - flex-shrink: 0 - list-style: none - padding: 0 - margin: 0 space('xl') 0 0 // Right margin preserved (overrides the 0 for other sides) - background-color: $bg-dark - border: 1px solid $bg-darker - -#leftnav li - border-bottom: 1px solid color('border-light') - - &:last-child - border-bottom: none - -#leftnav a - display: block - padding: space('sm') space('md') // Consistent spacing - text-decoration: none - color: $text-light // Theme text - - &:hover, &:focus - background-color: rgba($accent-light, 0.1) // Green hover tint - color: $accent-light // Accent on hover - border-radius: 4px - -// Responsive: Stack on mobile (add to themes/ for media queries) -@media (max-width: 1280px) // Your xl breakpoint +body.novaconium + // Main page wrapper: Centered flex #page .container - flex-direction: column - align-items: center + display: flex + padding: 0 + justify-content: center + align-items: flex-start + padding-top: space('lg') - article, #leftnav - width: 100% - max-width: 900px - margin: space('md') 0 + // Article content: Fixed width, no shrink + article + width: 1140px + flex-shrink: 0 + padding: 3rem + margin: 0 + background-color: $bg-dark + border: 1px solid $bg-darker - #leftnav - margin-right: 0 \ No newline at end of file + ul#leftnav + width: 320px + flex-shrink: 0 + list-style: none + padding: 0 + margin: 0 space('xl') 0 0 // Right margin preserved (overrides the 0 for other sides) + background-color: $bg-dark + border: 1px solid $bg-darker + + #leftnav li + border-bottom: 1px solid color('border-light') + + &:last-child + border-bottom: none + + #leftnav a + display: block + padding: space('sm') space('md') // Consistent spacing + text-decoration: none + color: $text-light // Theme text + + &:hover, &:focus + background-color: rgba($accent-light, 0.1) // Green hover tint + color: $accent-light // Accent on hover + border-radius: 4px + + // Responsive: Stack on mobile (add to themes/ for media queries) + @media (max-width: 1280px) // Your xl breakpoint + #page .container + flex-direction: column + align-items: center + + article, #leftnav + width: 100% + max-width: 900px + margin: space('md') 0 + + #leftnav + margin-right: 0 \ No newline at end of file diff --git a/sass/framework/_tabs.sass b/sass/framework/_tabs.sass index a2af2f8..6c2bd83 100644 --- a/sass/framework/_tabs.sass +++ b/sass/framework/_tabs.sass @@ -3,46 +3,47 @@ @use '../abstracts' as * @use 'sass:color' // For color.adjust()—non-deprecated color tweaks -// Simplified tab styling: Square borders, no rounds -.tab-container - margin: space('lg') auto - background: $bg-dark +body.novaconium + // Simplified tab styling: Square borders, no rounds + .tab-container + margin: space('lg') auto + background: $bg-dark -.tab-nav - display: flex - background-color: $bg-darker - border-bottom: 1px solid $border-light + .tab-nav + display: flex + background-color: $bg-darker + border-bottom: 1px solid $border-light -.tab-button - padding: space('sm') space('md') - background: $bg-darker - border: 1px solid $border-light - border-bottom: none - cursor: pointer - font-size: 14px - min-width: 120px // Makes them more square/equal - text-align: center - color: $text-light - font-family: $mono-font // From vars + .tab-button + padding: space('sm') space('md') + background: $bg-darker + border: 1px solid $border-light + border-bottom: none + cursor: pointer + font-size: 14px + min-width: 120px // Makes them more square/equal + text-align: center + color: $text-light + font-family: $mono-font // From vars - &:hover - background-color: color.adjust($bg-darker, $lightness: 5%) // Modern, non-deprecated lighten equivalent + &:hover + background-color: color.adjust($bg-darker, $lightness: 5%) // Modern, non-deprecated lighten equivalent - + .tab-button - border-left: none // Shared borders + + .tab-button + border-left: none // Shared borders - &.active + &.active + background-color: $bg-dark + border-bottom: 2px solid $accent-light + color: $accent-light + font-weight: bold + + .tab-content + display: none + padding: space('lg') background-color: $bg-dark - border-bottom: 2px solid $accent-light - color: $accent-light - font-weight: bold + color: $text-light + border: none -.tab-content - display: none - padding: space('lg') - background-color: $bg-dark - color: $text-light - border: none - - &.active - display: block + &.active + display: block diff --git a/sass/framework/_tags.sass b/sass/framework/_tags.sass index 82c6319..3c3b329 100644 --- a/sass/framework/_tags.sass +++ b/sass/framework/_tags.sass @@ -2,107 +2,108 @@ @use 'sass:color' // For color.adjust()—non-deprecated color tweaks @use '../base' as * -// Tags Dropdown -.tags-dropdown - position: absolute - top: 100% - left: 0 - right: 0 - max-height: 200px - overflow-y: auto - background: $bg-darker - border: 1px solid $border-light - border-top: none - border-radius: 0 0 4px 4px - list-style: none - margin: 0 - padding: 0 - z-index: 10 - opacity: 0 - visibility: hidden - transition: opacity 0.2s - - &[aria-expanded="true"] - opacity: 1 - visibility: visible - - li - padding: space('xs') space('sm') - cursor: pointer - color: $text-light - font-size: 14px - border-bottom: 1px solid transparent - - &:hover, - &.selected - background: color.adjust($accent-light, $alpha: -0.1) - color: $accent-light - - &:last-child - border-bottom: none - -.tags-input - position: relative // For absolute dropdown - -// Tags Input -.tags-input - display: flex - flex-wrap: wrap - gap: space('xs') - align-items: center - border: 1px solid $border-light - padding: space('xs') - background: $bg-darker - min-height: 40px - grid-column: 2 // Spans input area in .form-row grid - - input - border: none - background: transparent - color: $text-light - font-family: $mono-font - font-size: 14px - flex: 1 - min-width: 100px - outline: none - - &::placeholder - color: $text-muted - -.tag-chip - display: inline-flex - align-items: center - background: color.adjust($accent-light, $alpha: -0.2) - color: $accent-light - padding: space('xs') space('sm') - border-radius: 4px - font-size: 12px - max-width: 150px - overflow: hidden - text-overflow: ellipsis - white-space: nowrap - - .tag-remove - background: none - border: none - color: inherit - font-size: 16px - margin-left: space('xs') - cursor: pointer +body.novaconium + // Tags Dropdown + .tags-dropdown + position: absolute + top: 100% + left: 0 + right: 0 + max-height: 200px + overflow-y: auto + background: $bg-darker + border: 1px solid $border-light + border-top: none + border-radius: 0 0 4px 4px + list-style: none + margin: 0 padding: 0 - line-height: 1 + z-index: 10 + opacity: 0 + visibility: hidden + transition: opacity 0.2s - &:hover - opacity: 0.7 + &[aria-expanded="true"] + opacity: 1 + visibility: visible -// Tags Autocomplete (native datalist styling) -.tags-input input[list] - // Existing input styles apply... + li + padding: space('xs') space('sm') + cursor: pointer + color: $text-light + font-size: 14px + border-bottom: 1px solid transparent -#tag-suggestions - // Native datalist not directly stylable, but options can be influenced via input focus - // For custom polyfill, add JS-generated