final checks and fixes for launch
This commit is contained in:
@@ -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
|
||||
&:hover
|
||||
color: $text-lighter // Brighter green
|
||||
text-decoration: underline
|
||||
@@ -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
|
||||
|
||||
@@ -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)
|
||||
// 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)
|
||||
@@ -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
|
||||
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
|
||||
@@ -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
|
||||
|
||||
@@ -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 <ul>, but native is fine for now
|
||||
&:hover,
|
||||
&.selected
|
||||
background: color.adjust($accent-light, $alpha: -0.1)
|
||||
color: $accent-light
|
||||
|
||||
// Browser-specific tweaks (Chrome/Firefox)
|
||||
.tags-input input[list]::-webkit-calendar-picker-indicator
|
||||
display: none // Hide arrow if interfering
|
||||
&: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
|
||||
padding: 0
|
||||
line-height: 1
|
||||
|
||||
&:hover
|
||||
opacity: 0.7
|
||||
|
||||
// Tags Autocomplete (native datalist styling)
|
||||
.tags-input input[list]
|
||||
// Existing input styles apply...
|
||||
|
||||
#tag-suggestions
|
||||
// Native datalist not directly stylable, but options can be influenced via input focus
|
||||
// For custom polyfill, add JS-generated <ul>, but native is fine for now
|
||||
|
||||
// Browser-specific tweaks (Chrome/Firefox)
|
||||
.tags-input input[list]::-webkit-calendar-picker-indicator
|
||||
display: none // Hide arrow if interfering
|
||||
@@ -2,46 +2,47 @@
|
||||
@use '../base' as *
|
||||
@use 'sass:color' // Already there for adjusts
|
||||
|
||||
// Tooltip styling (mouse-follow version)
|
||||
.tooltip
|
||||
position: relative
|
||||
display: inline-block
|
||||
cursor: help
|
||||
font-size: 16px
|
||||
color: $accent-light // Green accent for ?
|
||||
margin-left: space('xs') // 0.25rem
|
||||
top: 2px
|
||||
body.novaconium
|
||||
// Tooltip styling (mouse-follow version)
|
||||
.tooltip
|
||||
position: relative
|
||||
display: inline-block
|
||||
cursor: help
|
||||
font-size: 16px
|
||||
color: $accent-light // Green accent for ?
|
||||
margin-left: space('xs') // 0.25rem
|
||||
top: 2px
|
||||
|
||||
.tooltiptext
|
||||
visibility: hidden
|
||||
width: 200px
|
||||
background-color: $bg-darker // Darker bg
|
||||
color: $text-light // White text
|
||||
text-align: left // Changed to left-align for better readability
|
||||
border-radius: 0 // Square
|
||||
padding: space('sm') // 0.5rem
|
||||
position: fixed // Fixed to viewport, updated by JS
|
||||
z-index: z('dropdown') // High z-index
|
||||
opacity: 0
|
||||
transition: opacity 0.3s
|
||||
font-size: 14px
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) // Subtle shadow
|
||||
pointer-events: none // Prevents mouse interference with tooltip
|
||||
.tooltiptext
|
||||
visibility: hidden
|
||||
width: 200px
|
||||
background-color: $bg-darker // Darker bg
|
||||
color: $text-light // White text
|
||||
text-align: left // Changed to left-align for better readability
|
||||
border-radius: 0 // Square
|
||||
padding: space('sm') // 0.5rem
|
||||
position: fixed // Fixed to viewport, updated by JS
|
||||
z-index: z('dropdown') // High z-index
|
||||
opacity: 0
|
||||
transition: opacity 0.3s
|
||||
font-size: 14px
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) // Subtle shadow
|
||||
pointer-events: none // Prevents mouse interference with tooltip
|
||||
|
||||
&::after
|
||||
content: ""
|
||||
position: absolute
|
||||
top: -5px // Arrow above tooltip (points up to mouse)
|
||||
left: 10px // Slight indent from left edge
|
||||
border-width: 5px
|
||||
border-style: solid
|
||||
border-color: $bg-darker transparent transparent transparent // Upward arrow
|
||||
&::after
|
||||
content: ""
|
||||
position: absolute
|
||||
top: -5px // Arrow above tooltip (points up to mouse)
|
||||
left: 10px // Slight indent from left edge
|
||||
border-width: 5px
|
||||
border-style: solid
|
||||
border-color: $bg-darker transparent transparent transparent // Upward arrow
|
||||
|
||||
&:hover .tooltiptext
|
||||
visibility: visible
|
||||
opacity: 1
|
||||
&:hover .tooltiptext
|
||||
visibility: visible
|
||||
opacity: 1
|
||||
|
||||
// Accessibility: Hidden tooltip text for screen readers
|
||||
.tooltip-desc
|
||||
position: absolute
|
||||
left: -9999px
|
||||
// Accessibility: Hidden tooltip text for screen readers
|
||||
.tooltip-desc
|
||||
position: absolute
|
||||
left: -9999px
|
||||
@@ -3,56 +3,57 @@
|
||||
@use '../abstracts' as *
|
||||
@use '../base' as *
|
||||
|
||||
// Code blocks: Monospace lock-in with darker green tint
|
||||
code
|
||||
font-family: 'VT323', $mono-font // Prioritize Matrix font
|
||||
font-size: 0.875rem // Smaller for inline; reset has base
|
||||
background-color: color('bg-darker') // Deeper green-black
|
||||
color: $text-light // Lighter green text
|
||||
padding: space('xs') space('sm')
|
||||
border-radius: 4px
|
||||
border: 1px solid color('border-light')
|
||||
box-shadow: 0 0 2px rgba($accent-light, 0.1) // Subtle glow
|
||||
|
||||
// Utility: Small text (if still needed; consider rem-based)
|
||||
.small
|
||||
font-size: 0.625rem // 10px equiv; use sparingly
|
||||
|
||||
// Error/notice divs: Centered alerts with theme colors
|
||||
div.error, div.notice, div#debug
|
||||
margin: space('xl') auto // Top/bottom spacing from map
|
||||
width: 900px // Fixed width; add media query for mobile later
|
||||
padding: space('lg') // Generous padding
|
||||
border-radius: 6px
|
||||
border: 1px solid
|
||||
|
||||
div.error
|
||||
background-color: rgba(color('accent-error'), 0.1) // Subtle red tint
|
||||
color: color('accent-error') // Darker red text
|
||||
border-color: color('accent-error')
|
||||
|
||||
div.notice
|
||||
background-color: rgba(color('accent-success'), 0.1) // Green tint
|
||||
color: color('accent-success') // Heavier green text
|
||||
border-color: color('accent-success')
|
||||
|
||||
div#debug
|
||||
background-color: color('bg-darker') // Deeper bg for debug
|
||||
color: $text-muted // Muted green
|
||||
border-color: color('border-light')
|
||||
margin-top: space('2xl')
|
||||
margin-bottom: space('2xl')
|
||||
|
||||
// Tables: Simplified; reset handles collapse/padding
|
||||
.pages-table
|
||||
width: 100%
|
||||
border: 1px solid color('border-light') // Green border
|
||||
|
||||
th, td
|
||||
body.novaconium
|
||||
// Code blocks: Monospace lock-in with darker green tint
|
||||
code
|
||||
font-family: 'VT323', $mono-font // Prioritize Matrix font
|
||||
font-size: 0.875rem // Smaller for inline; reset has base
|
||||
background-color: color('bg-darker') // Deeper green-black
|
||||
color: $text-light // Lighter green text
|
||||
padding: space('xs') space('sm')
|
||||
border-radius: 4px
|
||||
border: 1px solid color('border-light')
|
||||
text-align: left
|
||||
box-shadow: 0 0 2px rgba($accent-light, 0.1) // Subtle glow
|
||||
|
||||
th
|
||||
background-color: rgba($accent-light, 0.05) // Subtle accent bg
|
||||
color: $text-lighter // Header green
|
||||
font-weight: 600 // Semi-bold; no bold in monospace
|
||||
// Utility: Small text (if still needed; consider rem-based)
|
||||
.small
|
||||
font-size: 0.625rem // 10px equiv; use sparingly
|
||||
|
||||
// Error/notice divs: Centered alerts with theme colors
|
||||
div.error, div.notice, div#debug
|
||||
margin: space('xl') auto // Top/bottom spacing from map
|
||||
width: 900px // Fixed width; add media query for mobile later
|
||||
padding: space('lg') // Generous padding
|
||||
border-radius: 6px
|
||||
border: 1px solid
|
||||
|
||||
div.error
|
||||
background-color: rgba(color('accent-error'), 0.1) // Subtle red tint
|
||||
color: color('accent-error') // Darker red text
|
||||
border-color: color('accent-error')
|
||||
|
||||
div.notice
|
||||
background-color: rgba(color('accent-success'), 0.1) // Green tint
|
||||
color: color('accent-success') // Heavier green text
|
||||
border-color: color('accent-success')
|
||||
|
||||
div#debug
|
||||
background-color: color('bg-darker') // Deeper bg for debug
|
||||
color: $text-muted // Muted green
|
||||
border-color: color('border-light')
|
||||
margin-top: space('2xl')
|
||||
margin-bottom: space('2xl')
|
||||
|
||||
// Tables: Simplified; reset handles collapse/padding
|
||||
.pages-table
|
||||
width: 100%
|
||||
border: 1px solid color('border-light') // Green border
|
||||
|
||||
th, td
|
||||
border: 1px solid color('border-light')
|
||||
text-align: left
|
||||
|
||||
th
|
||||
background-color: rgba($accent-light, 0.05) // Subtle accent bg
|
||||
color: $text-lighter // Header green
|
||||
font-weight: 600 // Semi-bold; no bold in monospace
|
||||
Reference in New Issue
Block a user