-
-
-
+
+
+
+
-
-
-
+
diff --git a/src/globals.ts b/src/globals.ts
deleted file mode 100644
index 6b3b364d..00000000
--- a/src/globals.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// AI generated as a solution to cannot find SolidLogic
-// Must be imported BEFORE solid-ui / solid-panes.
-// Their prebuilt bundles treat `solid-logic` (and `rdflib`) as UMD externals
-// with `root: "SolidLogic"` / `root: "$rdf"`, so the globals must exist on
-// `window` at module-evaluation time, not after all imports have run.
-import * as $rdf from 'rdflib'
-import * as SolidLogic from 'solid-logic'
-
-const w: any = window
-w.$rdf = $rdf
-w.SolidLogic = SolidLogic
diff --git a/src/index.ts b/src/index.ts
index 5ce2d05d..d0d11afe 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,56 +1,30 @@
-// IMPORTANT: must be the first import so window.SolidLogic / window.$rdf are
-// defined before solid-ui / solid-panes prebuilt bundles are evaluated
-// (they declare `solid-logic` and `rdflib` as UMD externals with
-// root: "SolidLogic" / "$rdf").
-import './globals'
-
import * as $rdf from 'rdflib'
-import * as SolidLogic from 'solid-logic'
-import type { RenderEnvironment } from 'pane-registry'
-import'solid-ui/components/header'
import * as panes from 'solid-panes'
-import { layout } from './layout'
-import { theme } from './theme'
+import { authn, solidLogicSingleton, authSession, store } from 'solid-logic'
import versionInfo from './versionInfo'
+import { mashStyle } from './styles/mashlib-style'
import './styles/mash.css'
const global: any = window
-global.panes = panes
-global.mashlib = { versionInfo }
-
-layout.init()
-theme.init()
-
-// Build a snapshot of the current render environment
-const buildRenderEnvironment = (): RenderEnvironment => ({
- layout: layout.get(),
- layoutPreference: layout.getPreference(),
- inputMode: layout.getInputMode(),
- theme: theme.get(),
- viewport: layout.getViewport()
-})
-
-// Inject or update the environment on the pane context
-const syncEnvironmentToContext = async (_trigger?: Event | string) => {
- const outliner = panes.getOutliner(document) as any
- if (!outliner) {
- return
- }
-
- if (!outliner.context) {
- outliner.context = {}
- }
-
- panes.updateEnvironment(outliner, buildRenderEnvironment())
- await panes.refreshUI(outliner)
+global.$rdf = $rdf
+global.panes = panes
+global.SolidLogic = {
+ authn,
+ authSession,
+ store,
+ solidLogicSingleton
+}
+global.mashlib = {
+ versionInfo
}
-
-// Keep environment in sync on layout/theme changes
-window.addEventListener('mashlib:layoutchange', syncEnvironmentToContext)
-window.addEventListener('mashlib:themechange', syncEnvironmentToContext)
global.panes.runDataBrowser = function (uri?:string|$rdf.NamedNode|null) {
+ document.getElementById('PageBody')?.setAttribute('style', mashStyle.dbLayout)
+ document.getElementById('PageHeader')?.setAttribute('style', mashStyle.dbLayoutHeader)
+ document.getElementById('PageFooter')?.setAttribute('style', mashStyle.dbLayoutFooter)
+ document.getElementById('DummyUUID')?.setAttribute('style', mashStyle.dbLayoutContent)
+
// Set up cross-site proxy
const fetcher: any = $rdf.Fetcher
fetcher.crossSiteProxyTemplate = window.origin + '/xss/?uri={uri}'
@@ -61,23 +35,15 @@ global.panes.runDataBrowser = function (uri?:string|$rdf.NamedNode|null) {
webMonetizationTag.setAttribute('name', 'monetization')
webMonetizationTag.setAttribute('content', `$${window.location.host}`)
document.head.appendChild(webMonetizationTag)
- } catch {}
-
- window.addEventListener('load', syncEnvironmentToContext)
+ } catch (e) {
+ console.error('Failed to add web monetization tag to page header')
+ }
// Authenticate the user
- SolidLogic.authn.checkUser()
- .then(() => panes.initMainPage(
- SolidLogic.solidLogicSingleton.store,
- uri,
- buildRenderEnvironment()
- ))
- .then(() => {
- // Re-sync in case layout/theme changed between snapshot and outliner init
- syncEnvironmentToContext('initMainPage')
- })
- .catch(() => undefined)
-
+ authn.checkUser().then(function (_profile: any) {
+ const mainPage = panes.initMainPage(solidLogicSingleton.store, uri)
+ return mainPage
+ })
}
window.onpopstate = function (_event: any) {
@@ -90,6 +56,13 @@ window.onpopstate = function (_event: any) {
)
}
+// It's not clear where this function is used, so unfortunately we cannot remove it:
+function dump (msg: string[]) {
+ console.log(msg.slice(0, -1))
+}
+
+global.dump = dump
+
export {
- versionInfo,
+ versionInfo
}
diff --git a/src/layout.ts b/src/layout.ts
deleted file mode 100644
index 6c060fbd..00000000
--- a/src/layout.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/* generated by AI - see readme for details*/
-import type { LayoutMode, LayoutPreference } from 'pane-registry'
-
-const LAYOUT_STORAGE_KEY = 'mashlib-layout'
-const MOBILE_BREAKPOINT_PX = 768
-
-const getStoredLayoutPreference = (): LayoutPreference => {
- const storedLayout = localStorage.getItem(LAYOUT_STORAGE_KEY)
-
- if (storedLayout === 'mobile' || storedLayout === 'desktop' || storedLayout === 'auto') {
- return storedLayout
- }
-
- return 'auto'
-}
-
-const resolveAutomaticLayout = (): LayoutMode => {
- return window.innerWidth <= MOBILE_BREAKPOINT_PX ? 'mobile' : 'desktop'
-}
-
-const applyLayoutAttributes = (layout: LayoutMode, preference: LayoutPreference) => {
- const root = document.documentElement
- const inputMode = window.matchMedia('(pointer: coarse)').matches ? 'touch' : 'pointer'
-
- root.setAttribute('data-layout', layout)
- root.setAttribute('data-layout-preference', preference)
- root.setAttribute('data-input-mode', inputMode)
- root.style.setProperty('--app-height', `${window.innerHeight}px`)
-
- window.dispatchEvent(new CustomEvent('mashlib:layoutchange', {
- detail: {
- inputMode,
- layout,
- preference,
- viewport: {
- height: window.innerHeight,
- width: window.innerWidth
- }
- }
- }))
-}
-
-const updateLayout = (preference: LayoutPreference = getStoredLayoutPreference()): LayoutMode => {
- const layout = preference === 'auto' ? resolveAutomaticLayout() : preference
- applyLayoutAttributes(layout, preference)
- return layout
-}
-
-const setLayoutPreference = (preference: LayoutPreference): LayoutMode => {
- if (preference === 'auto') {
- localStorage.removeItem(LAYOUT_STORAGE_KEY)
- } else {
- localStorage.setItem(LAYOUT_STORAGE_KEY, preference)
- }
-
- return updateLayout(preference)
-}
-
-const getLayoutPreference = (): LayoutPreference => {
- return getStoredLayoutPreference()
-}
-
-const getLayoutMode = (): LayoutMode => {
- return (document.documentElement.getAttribute('data-layout') as LayoutMode) || resolveAutomaticLayout()
-}
-
-const initializeLayout = () => {
- let resizeFrame = 0
- const syncLayout = () => {
- updateLayout()
- }
-
- const onResize = () => {
- if (resizeFrame) {
- window.cancelAnimationFrame(resizeFrame)
- }
-
- resizeFrame = window.requestAnimationFrame(() => {
- resizeFrame = 0
- syncLayout()
- })
- }
-
- syncLayout()
- window.addEventListener('resize', onResize)
-
- window.matchMedia('(pointer: coarse)').addEventListener('change', syncLayout)
- window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT_PX}px)`).addEventListener('change', syncLayout)
-}
-
-const getInputMode = (): 'touch' | 'pointer' => {
- return window.matchMedia('(pointer: coarse)').matches ? 'touch' : 'pointer'
-}
-
-const getViewport = () => ({
- width: window.innerWidth,
- height: window.innerHeight
-})
-
-export const layout = {
- get: getLayoutMode,
- getInputMode,
- getPreference: getLayoutPreference,
- getViewport,
- init: initializeLayout,
- set: setLayoutPreference
-}
diff --git a/src/styles/mash-utilities.css b/src/styles/mash-utilities.css
deleted file mode 100644
index abeffb06..00000000
--- a/src/styles/mash-utilities.css
+++ /dev/null
@@ -1,814 +0,0 @@
-/*
-** ------SolidOS Utility Classes------
-** Reusable utility classes for layout, spacing, accessibility, and components
-*/
-
-/* ===========================================
- ACCESSIBILITY UTILITIES (HIGH PRIORITY)
- =========================================== */
-
-/* Screen reader only content - hidden visually but available to assistive tech */
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-
-/* Visually hidden but can become visible on focus */
-.visually-hidden {
- position: absolute !important;
- width: 1px !important;
- height: 1px !important;
- padding: 0 !important;
- margin: -1px !important;
- overflow: hidden !important;
- clip: rect(0, 0, 0, 0) !important;
- white-space: nowrap !important;
- border: 0 !important;
-}
-
-.visually-hidden.focusable:focus,
-.visually-hidden.focusable:active {
- position: static !important;
- width: auto !important;
- height: auto !important;
- padding: inherit !important;
- margin: inherit !important;
- overflow: visible !important;
- clip: auto !important;
- white-space: inherit !important;
-}
-
-/* Minimum touch target for mobile accessibility (WCAG 2.5.5) */
-.min-touch-target {
- min-height: var(--min-touch-target);
- min-width: var(--min-touch-target);
-}
-
-/* Reduced motion support */
-.reduced-motion {
- animation: none !important;
- transition: none !important;
-}
-
-/* Focus ring utility */
-.focus-ring {
- outline: var(--focus-ring-width) solid var(--color-primary);
- outline-offset: var(--outline-offset-sm);
-}
-
-.no-focus-ring {
- outline: none;
-}
-
-/* Skip links utility */
-
-/* ── Skip link ── */
-.skip-link {
- position: absolute;
- top: -40px; /* was -100% */
- left: 6px; /* was 0 */
- z-index: 1000;
- padding: var(--spacing-sm) var(--spacing-md); /* was padding: 0.5rem 1rem; */
- border-radius: var(--border-radius-base); /* new */
- background: var(--color-primary); /* was background: var( --color-info-bg); */
- color: white; /* was var(--color-text); */
- text-decoration: none;
- font-weight: var(--font-weight-bold, 600);
- display: none;
- font-size: var(--font-size-base); /* new */
- line-height: 1; /* new */
-}
-
-.skip-link:focus {
- top: 6px; /* was top: 0; */
- display: none; /* in contact-pane this isn't there */
- outline: 2px solid white; /* new */
- outline-offset: 2px; /* new */
-}
-
-.skip-links a {
- position: absolute;
- left: 6px;
- top: 6px;
- padding: var(--spacing-sm, 0.938rem);
- background: var(--color-primary, #7C4DFF);
- color: white;
- text-decoration: none;
- border-radius: var(--border-radius-base, 0.3125rem);
-}
-
-.skip-links a:focus {
- top: 6px;
-}
-
-/* ARIA live regions - for dynamic content announcements */
-.live-region {
- position: absolute;
- left: -10000px;
- width: 1px;
- height: 1px;
- overflow: hidden;
-}
-
-/* ===========================================
- LAYOUT UTILITIES
- =========================================== */
-
-.flex {
- display: flex;
-}
-
-.grid {
- display: grid;
-}
-
-.center {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.flex-center {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.flex-column {
- display: flex;
- flex-direction: column;
-}
-
-.flex-column-center {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-
-.flex-row {
- display: flex;
- flex-direction: row;
-}
-
-.flex-wrap {
- flex-wrap: wrap;
-}
-
-.flex-1 {
- flex: 1;
-}
-.inline-flex-column {
- display: inline-flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-
-.inline-flex-row {
- display: inline-flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
-}
-
-.justify-start {
- justify-content: flex-start;
-}
-
-.justify-end {
- justify-content: flex-end;
-}
-
-.justify-center {
- justify-content: center;
-}
-
-.justify-between {
- justify-content: space-between;
-}
-
-.align-start {
- align-items: flex-start;
-}
-
-.align-end {
- align-items: flex-end;
-}
-
-.align-center {
- align-items: center;
-}
-
-/* ===========================================
- SPACING UTILITIES
- =========================================== */
-
-/* Gap utilities */
-.gap-xxs { gap: var(--spacing-xxs, 0.3125rem); } /* 5px */
-.gap-2xs { gap: var(--spacing-2xs, 0.625rem); } /* 10px new design uses this */
-.gap-xs { gap: var(--spacing-xs, 0.75rem); }
-.gap-sm { gap: var(--spacing-sm, 0.938rem); }
-.gap-md { gap: var(--spacing-md, 1.25rem); }
-.gap-lg { gap: var(--spacing-lg, 1.5625rem); } /* 25px */
-.gap-xl { gap: var(--spacing-xl, 2rem); }
-
-/* Margin top */
-.mt-0 { margin-top: 0; }
-.mt-xs { margin-top: var(--spacing-xs, 0.75rem); }
-.mt-sm { margin-top: var(--spacing-sm, 0.938rem); }
-.mt-md { margin-top: var(--spacing-md, 1.25rem); }
-.mt-lg { margin-top: var(--spacing-lg, 1.5625rem); }
-.mt-xl { margin-top: var(--spacing-xl, 2rem); }
-
-/* Margin bottom */
-.mb-0 { margin-bottom: 0; }
-.mb-xs { margin-bottom: var(--spacing-xs, 0.75rem); }
-.mb-sm { margin-bottom: var(--spacing-sm, 0.938rem); }
-.mb-md { margin-bottom: var(--spacing-md, 1.25rem); }
-.mb-lg { margin-bottom: var(--spacing-lg, 1.5625rem); }
-.mb-xl { margin-bottom: var(--spacing-xl, 2rem); }
-
-/* Margin left */
-.ml-0 { margin-left: 0; }
-.ml-xs { margin-left: var(--spacing-xs, 0.75rem); }
-.ml-sm { margin-left: var(--spacing-sm, 0.938rem); }
-.ml-md { margin-left: var(--spacing-md, 1.25rem); }
-.ml-lg { margin-left: var(--spacing-lg, 1.5625rem); }
-
-/* Margin right */
-.mr-0 { margin-right: 0; }
-.mr-xs { margin-right: var(--spacing-xs, 0.75rem); }
-.mr-sm { margin-right: var(--spacing-sm, 0.938rem); }
-.mr-md { margin-right: var(--spacing-md, 1.25rem); }
-.mr-lg { margin-right: var(--spacing-lg, 1.5625rem); }
-
-/* Margin horizontal (left + right) */
-.mx-auto { margin-left: auto; margin-right: auto; }
-.mx-xs { margin-left: var(--spacing-xs, 0.75rem); margin-right: var(--spacing-xs, 0.75rem); }
-.mx-sm { margin-left: var(--spacing-sm, 0.938rem); margin-right: var(--spacing-sm, 0.938rem); }
-.mx-md { margin-left: var(--spacing-md, 1.25rem); margin-right: var(--spacing-md, 1.25rem); }
-
-/* Margin vertical (top + bottom) */
-.my-xs { margin-top: var(--spacing-xs, 0.75rem); margin-bottom: var(--spacing-xs, 0.75rem); }
-.my-sm { margin-top: var(--spacing-sm, 0.938rem); margin-bottom: var(--spacing-sm, 0.938rem); }
-.my-md { margin-top: var(--spacing-md, 1.25rem); margin-bottom: var(--spacing-md, 1.25rem); }
-
-/* Padding */
-.p-0 { padding: 0; }
-.p-xs { padding: var(--spacing-xs, 0.75rem); }
-.p-sm { padding: var(--spacing-sm, 0.938rem); }
-.p-md { padding: var(--spacing-md, 1.25rem); }
-.p-lg { padding: var(--spacing-lg, 1.5625rem); }
-.p-xl { padding: var(--spacing-xl, 2rem); }
-
-/* Padding top */
-.pt-xs { padding-top: var(--spacing-xs, 0.75rem); }
-.pt-sm { padding-top: var(--spacing-sm, 0.938rem); }
-.pt-md { padding-top: var(--spacing-md, 1.25rem); }
-.pt-lg { padding-top: var(--spacing-lg, 1.5625rem); }
-
-/* Padding bottom */
-.pb-xs { padding-bottom: var(--spacing-xs, 0.75rem); }
-.pb-sm { padding-bottom: var(--spacing-sm, 0.938rem); }
-.pb-md { padding-bottom: var(--spacing-md, 1.25rem); }
-.pb-lg { padding-bottom: var(--spacing-lg, 1.5625rem); }
-
-/* Padding horizontal */
-.px-xs { padding-left: var(--spacing-xs, 0.75rem); padding-right: var(--spacing-xs, 0.75rem); }
-.px-sm { padding-left: var(--spacing-sm, 0.938rem); padding-right: var(--spacing-sm, 0.938rem); }
-.px-md { padding-left: var(--spacing-md, 1.25rem); padding-right: var(--spacing-md, 1.25rem); }
-.px-lg { padding-left: var(--spacing-lg, 1.5625rem); padding-right: var(--spacing-lg, 1.5625rem); }
-
-/* Padding vertical */
-.py-xs { padding-top: var(--spacing-xs, 0.75rem); padding-bottom: var(--spacing-xs, 0.75rem); }
-.py-sm { padding-top: var(--spacing-sm, 0.938rem); padding-bottom: var(--spacing-sm, 0.938rem); }
-.py-md { padding-top: var(--spacing-md, 1.25rem); padding-bottom: var(--spacing-md, 1.25rem); }
-.py-lg { padding-top: var(--spacing-lg, 1.5625rem); padding-bottom: var(--spacing-lg, 1.5625rem); }
-
-/* ===========================================
- TEXT UTILITIES
- =========================================== */
-
-.text-center { text-align: center; }
-.text-left { text-align: left; }
-.text-right { text-align: right; }
-
-.text-secondary { color: var(--color-text-secondary); }
-.text-muted { color: var(--color-text-muted); }
-.text-primary { color: var(--color-primary); }
-.text-error { color: var(--color-error); }
-.text-success { color: var(--color-success); }
-
-.text-bold { font-weight: var(--font-weight-bold); }
-.text-normal { font-weight: var(--font-weight-normal); }
-
-.text-sm { font-size: var(--font-size-sm); }
-.text-lg-old { font-size: var(--font-size-lg); }
-.text-xl { font-size: var(--font-size-xl); }
-.text-lg {
- font-size: var(--font-size-lg, 1.125rem);
- line-height: var(--line-height-base, 1.5);
-}
-
-.text-small {
- font-size: max(var(--font-size-sm, 0.875rem), var(--min-font-size, 14px));
- line-height: var(--min-line-height, 1.4);
-}
-
-/* Text that respects accessibility guidelines */
-.text-readable {
- line-height: var(--line-height-base, 1.5);
- max-width: var(--max-width-readable, 65ch);
-}
-
-.text-scale-friendly {
- line-height: var(--line-height-base, 1.5);
- max-width: var(--max-width-readable-wide, 75ch);
-}
-
-/* Text with minimum font size safety */
-.text-small {
- font-size: max(var(--font-size-sm), var(--min-font-size));
- line-height: var(--min-line-height);
-}
-
-.text-large {
- font-size: var(--font-size-lg);
- line-height: var(--line-height-base);
-}
-
-/* Text overflow handling */
-.text-truncate {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
-}
-
-.text-wrap-anywhere {
- overflow-wrap: anywhere;
- word-break: break-word;
-}
-
-.text-nowrap {
- white-space: nowrap;
-}
-
-/* High contrast text for accessibility */
-.text-contrast-high {
- color: var(--color-text, #1A1A1A);
- font-weight: var(--font-weight-bold, 600);
-}
-
-/* Better focus for text elements */
-.focusable-text:focus {
- background-color: var(--color-primary-alpha-light);
- outline: var(--focus-ring-width) solid var(--color-primary);
- outline-offset: var(--outline-offset-sm);
- border-radius: var(--outline-offset-sm);
-}
-
-/* High contrast box */
-.high-contrast {
- color: var(--color-text);
- background: var(--color-background);
- border: var(--border-width-thin) solid var(--color-border-pale);
-}
-
-/* ===========================================
- BORDER & SHADOW UTILITIES
- =========================================== */
-
-.rounded { border-radius: var(--border-radius-full, 0.625rem); /* 10px */ }
-.rounded-sm { border-radius: var(--border-radius-base, 0.3125rem); } /* 5px */
-.rounded-md { border-radius: var(--border-radius-md, 0.5rem); } /* 8px */
-.rounded-lg { border-radius: var(--border-radius-lg, 0.75rem); } /* 12px */
-.rounded-none { border-radius: 0; }
-
-.shadow { box-shadow: var(--box-shadow); }
-.shadow-sm { box-shadow: var(--box-shadow-sm); }
-.shadow-none { box-shadow: none; }
-
-.border { border: var(--border-width-thin, 0.1rem) solid var(--color-border, #E5E7EB); }
-.border-lighter { border: var(--border-width-thin, 0.1rem) solid var(--color-border-lighter, #E2E8F0); }
-.border-dark { border: var(--border-width-thin, 0.1rem) solid var(--color-border-dark); }
-.border-light { border: var(--border-width-thin, 0.1rem) solid var(--color-border-light); }
-.border-none { border: none; }
-/* ===========================================
- BACKGROUND UTILITIES
- =========================================== */
-
-.bg-primary {
- background: var(--color-primary);
- color: var(--color-background);
-}
-
-.bg-card {
- background: var(--color-card-bg);
-}
-
-.bg-section {
- background: var(--color-section-bg);
-}
-
-.bg-transparent {
- background: transparent;
-}
-
-.bg-white {
- background: var(--color-background);
-}
-
-/* ===========================================
- BUTTON COMPONENTS
- =========================================== */
-
-/* Primary button */
-.btn-primary {
- min-height: var(--min-touch-target);
- padding: var(--spacing-sm) var(--spacing-md);
- border: var(--border-width-thin) solid var(--color-primary);
- border-radius: var(--border-radius-base);
- background: var(--color-primary);
- color: var(--color-background);
- font-weight: var(--font-weight-bold);
- cursor: pointer;
- transition: all var(--animation-duration) ease;
- text-decoration: none;
- display: inline-flex;
- align-items: center;
- justify-content: center;
-}
-
-.btn-primary:hover {
- background: color-mix(in srgb, var(--color-primary) 85%, black);
- box-shadow: 0 2px 4px var(--color-primary-alpha);
-}
-
-.btn-primary:active {
- box-shadow: 0 1px 2px var(--color-primary-alpha);
-}
-
-.btn-primary:focus,
-.btn-primary:focus-visible {
- outline: var(--focus-indicator-width) solid var(--color-primary);
- outline-offset: var(--outline-offset-sm);
- box-shadow: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha);
-}
-
-.btn-primary:disabled {
- opacity: var(--opacity-disabled);
- cursor: not-allowed;
- transform: none;
-}
-
-/* Secondary button */
-.btn-secondary {
- min-height: var(--min-touch-target);
- padding: var(--spacing-sm) var(--spacing-md);
- border: var(--border-width-thin) solid var(--color-secondary);
- border-radius: var(--border-radius-base);
- background: var(--color-secondary);
- color: var(--color-background);
- font-weight: var(--font-weight-bold);
- cursor: pointer;
- transition: all var(--animation-duration) ease;
- text-decoration: none;
- display: inline-flex;
- align-items: center;
- justify-content: center;
-}
-
-.btn-secondary:hover {
- background: color-mix(in srgb, var(--color-secondary) 85%, black);
-}
-
-.btn-secondary:disabled {
- opacity: var(--opacity-disabled);
- cursor: not-allowed;
-}
-
-/* Light button used for cancel in new design */
-.btn-light {
- min-height: var(--min-touch-target);
- padding: var(--spacing-sm) var(--spacing-md);
- border: var(--border-width-thin) solid var(--slate-400, #90A1B9);
- background: var(--white, #FFF);
- border-radius: var(--border-radius-base); /* 5px */
- font-weight: var(--font-weight-bold);
- cursor: pointer;
- transition: all var(--animation-duration) ease;
- text-decoration: none;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- font-weight: var(--font-weight-bold, 600);
- color: var(--gray-800, #1E2939);
- font-size: var(--font-size-lg, 1.125rem); /* 18px */
-}
-
-.btn-light:hover {
- background: var(--blue-900, #083575);
- color: var(--white, #FFF);
- box-shadow: 0 2px 4px var(--color-primary-alpha);
-}
-
-.btn-light:active {
- box-shadow: 0 1px 2px var(--color-primary-alpha);
-}
-
-.btn-light:focus,
-.btn-light:focus-visible {
- outline: var(--focus-indicator-width) solid var(--color-primary);
- outline-offset: var(--outline-offset-sm);
- background: var(--blue-900, #083575);
- color: var(--white, #FFF);
- box-shadow: 0 2px 4px var(--color-primary-alpha);
- box-shadow: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha);
-}
-
-.btn-light:disabled {
- opacity: var(--opacity-disabled);
- cursor: not-allowed;
- transform: none;
-}
-
-/* Outline button */
-.btn-outline {
- min-height: var(--min-touch-target);
- padding: var(--spacing-sm) var(--spacing-md);
- border: var(--border-width-medium) solid var(--color-primary);
- border-radius: var(--border-radius-base);
- background: transparent;
- color: var(--color-primary);
- font-weight: var(--font-weight-bold);
- cursor: pointer;
- transition: all var(--animation-duration) ease;
- text-decoration: none;
- display: inline-flex;
- align-items: center;
- justify-content: center;
-}
-
-.btn-outline:hover {
- background: var(--color-primary);
- color: var(--color-background);
-}
-
-.btn-outline:disabled {
- opacity: var(--opacity-disabled);
- cursor: not-allowed;
-}
-
-/* Transparent button (for solid-ui integration) */
-.btn-transparent {
- background-color: transparent;
- border: none;
- cursor: pointer;
-}
-
-.btn-transparent:hover {
- background-color: var(--color-hover-bg);
-}
-
-/* Button focus state */
-.action-button-focus:focus,
-.action-button-focus:focus-visible {
- outline: var(--focus-indicator-width) solid var(--color-primary) !important;
- outline-offset: var(--outline-offset-sm) !important;
- box-shadow: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha) !important;
- z-index: 1;
-}
-
-/* ===========================================
- INPUT UTILITIES
- =========================================== */
-
-.input {
- border-radius: var(--border-radius-base, 0.3125rem);
- border: 1px solid var(--gray-400, #99A1AF);
- background: var(--white, #FFF);
- color: var(--color-text-subheading, var(--gray-900, #101828));
- font-size: var(--font-size-sm, 0.875rem);
- font-weight: var(--font-weight-medium, 500);
- padding: var(--spacing-2xs, 0.625rem);
-}
-
-.input--checkbox {
- display: inline-block;
- width: 1rem;
- height: 1rem;
- min-height: 1rem;
- padding: 0;
- border: 1px solid var(--gray-400, #99A1AF);
- border-radius: var(--border-radius-sm, 0.25rem);
- accent-color: var(--color-primary, #7C4DFF);
- align-self: auto;
-}
-
-.label {
- color: var(--color-text-secondary, #4A5565);
- font-size: var(--font-size-sm, 0.875rem);
- font-weight: var(--font-weight-regular, 400);
-}
-
-/* ===========================================
- CARD & SECTION COMPONENTS
- =========================================== */
-
-.module-card {
- background: var(--color-card-bg);
- border-radius: var(--border-radius-full);
- box-shadow: var(--box-shadow);
- padding: var(--spacing-lg);
- margin-bottom: var(--spacing-lg);
- width: 100%;
- max-width: 100%;
- box-sizing: border-box;
-}
-
-.module-header {
- text-align: center;
- margin-bottom: var(--spacing-md);
-}
-
-.section-centered {
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-.section-bg {
- background: var(--color-section-bg);
- border-radius: var(--border-radius-full);
- box-shadow: var(--box-shadow);
- padding: var(--spacing-md);
-}
-
-.section-title {
- font-size: var(--font-size-xl);
- font-weight: var(--font-weight-bold);
- color: var(--color-primary);
- margin: 0;
-}
-
-/* ===========================================
- LIST & TABLE UTILITIES
- =========================================== */
-
-.list-reset {
- list-style: none;
- padding: 0;
- margin: 0;
-}
-
-.zebra-stripe tr:nth-child(even),
-.zebra-stripe > *:nth-child(even) {
- background-color: var(--color-zebra-stripe);
-}
-
-/* ===========================================
- DISPLAY & VISIBILITY UTILITIES
- =========================================== */
-
-.block { display: block; }
-.inline { display: inline; }
-.inline-block { display: inline-block; }
-.hidden { display: none !important; }
-.visible { visibility: visible; }
-.invisible { visibility: hidden; }
-
-/* ===========================================
- WIDTH & HEIGHT UTILITIES
- =========================================== */
-
-.w-full { width: 100%; }
-.w-auto { width: auto; }
-.h-full { height: 100%; }
-.h-auto { height: auto; }
-.max-w-full { max-width: 100%; }
-
-/* ===========================================
- POSITION UTILITIES
- =========================================== */
-
-.relative { position: relative; }
-.absolute { position: absolute; }
-.fixed { position: fixed; }
-.sticky { position: sticky; }
-
-/* ===========================================
- LOADING & STATUS INDICATORS
- =========================================== */
-
-.loading-text {
- color: var(--color-primary);
- text-align: center;
- margin: var(--spacing-md) 0;
-}
-
-.loading-spinner {
- width: var(--min-touch-target);
- height: var(--min-touch-target);
- border: var(--focus-indicator-width) solid var(--color-border-pale);
- border-top: var(--focus-indicator-width) solid var(--color-primary);
- border-radius: var(--border-radius-full);
- animation: spin var(--animation-duration-slow) linear infinite;
-}
-
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-}
-
-/* ===========================================
- ARIA ROLE STYLING
- =========================================== */
-
-[role="alert"] {
- padding: var(--spacing-md);
- border: var(--border-width-medium) solid var(--color-error);
- border-radius: var(--border-radius-base);
- background-color: var(--color-primary-alpha-light);
- margin: var(--spacing-md) 0;
-}
-
-[role="status"] {
- padding: var(--spacing-md);
- border: var(--border-width-medium) solid var(--color-success);
- border-radius: var(--border-radius-base);
- background-color: var(--color-success-alpha);
- margin: var(--spacing-md) 0;
-}
-
-/* ===========================================
- FOCUS TRAP FOR MODALS
- =========================================== */
-
-.focus-trap {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: var(--z-index-modal);
- background: var(--overlay-bg);
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-/* ===========================================
- MEDIA QUERIES
- =========================================== */
-
-/* Respect reduced motion preferences */
-@media (prefers-reduced-motion: reduce) {
- .loading-spinner {
- animation: none;
- border-top-color: var(--color-primary);
- }
-
- *,
- *::before,
- *::after {
- animation-duration: 0.01ms !important;
- animation-iteration-count: 1 !important;
- transition-duration: 0.01ms !important;
- }
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
- .btn-primary,
- .btn-secondary,
- .btn-outline {
- border-width: var(--border-width-medium);
- }
-
- .module-card,
- .section-bg {
- border: var(--border-width-medium) solid var(--color-border-dark);
- }
-}
-
-/* Mobile minimum font size */
-@media screen and (max-width: 768px) {
- html {
- font-size: max(16px, 1rem);
- }
-}
-
-/* Smooth scroll when no motion preference */
-@media (prefers-reduced-motion: no-preference) {
- html {
- scroll-behavior: smooth;
- }
-}
diff --git a/src/styles/mash.css b/src/styles/mash.css
index baca80a9..5d1d971c 100644
--- a/src/styles/mash.css
+++ b/src/styles/mash.css
@@ -1,273 +1,25 @@
-/*
-** ------SolidOS Styles------
+/* Some common style for the Solid Data Browser
+**
+**
+** Do NOT use physical measures, but font-relative measures.
+** 2006-10-21 timbl converted px to em at approx 1em = 12px
**
*/
-@import url("./themes.css");
-@import url("./mash-utilities.css");
-
-:root {
- --app-header-height: 3.75rem;
-}
-
-html {
- margin: 0;
- padding: 0;
- font-family: var(--font-family-base);
- font-size: var(--font-size-base);
- line-height: var(--line-height-base);
- background: var(--color-background);
- color: var(--color-text-primary); /* new design change, used to be --color-text */
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-rendering: optimizeLegibility;
- min-height: auto;
- min-width: 375px;
-}
-
-body {
- margin: 0;
- padding-top: 0;
- display: flex;
- flex-direction: column;
- height: auto;
- min-height: 100dvh;
- min-width: 375px;
- overflow: auto;
- font-family: inherit;
- font-size: inherit;
- line-height: inherit;
- background: inherit;
- color: inherit;
-}
-
-#PageHeader,
-#mainSolidUiHeader {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: 110;
- background: var(--color-header-row-bg);
-}
-
-#mainSolidUiHeader {
- display: block;
-}
-
-#MainContent {
- flex: 1 1 auto;
- min-height: 0;
- overflow-y: auto;
- -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
- container-type: inline-size; /* enable @container queries */
- display: flex;
- flex-direction: column;
-}
-
-#PageFooter {
- flex-shrink: 0;
-}
-
-
-/* ── New responsive app nav layout ── */
-.app-main {
- position: static;
- display: flex;
- flex: 1 1 auto; /* let the wrapper grow inside body's flex column */
- min-height: 0;
- margin-top: var(--app-header-height);
- height: auto;
- min-height: calc(100dvh - var(--app-header-height));
- top: auto;
-}
-
-.app-shell {
- display: flex;
- flex: 1; /* expand to fill .app-main */
- min-width: 0; /* prevent overflow in flex context */
- min-height: 0; /* allow children to shrink correctly */
-}
-
-.app-nav {
- width: 240px;
- flex-shrink: 0;
- background: var(--color-menu-bg);
- padding: 0.75rem;
- box-sizing: border-box;
- overflow-y: auto;
- height: calc(100vh - var(--app-header-height)); /* header height */
- transition: transform 0.25s ease-in-out;
-}
-
-.app-view {
- flex: 1;
- padding: 0 1rem 1rem; /* no top padding — sit flush under fixed header */
- min-width: 0;
-}
-
-/* OutlineView is a
— must explicitly fill the flex parent */
-.outline-view {
- width: 100%;
-}
-
-@media (max-width: 768px) {
- #MainContent {
- margin-left: 0;
- }
-
- .app-shell {
- flex-direction: column;
- }
-
- .app-nav {
- position: fixed;
- top: var(--app-header-height);
- left: 0;
- bottom: 0;
- z-index: 110;
- width: min(80vw, 320px);
- background: var(--color-menu-bg);
- padding: 0.75rem;
- }
-
- .app-nav.desktop {
- display: none;
- }
-
- .app-view {
- padding: 0 0.75rem 1rem;
- }
- #MenuToggleBtn {
- display: inline-flex;
- background: transparent;
- color: white;
- border: none;
- font-size: 2rem;
-
- }
-}
-@media (min-width: 769px) {
-
- #MenuToggleBtn {
- display: none;
- }
-
- #NavMenu {
- position: relative;
- transform: none !important;
- top: auto;
- left: auto;
- height: auto;
- }
-}
-
-/* HTML improvements - profile pane */
-/* Semantic HTML5 improvements */
-article, aside, section {
- display: block;
-}
-
-header {
- margin-bottom: var(--spacing-md);
-}
-
-nav {
- display: block;
-}
-
-nav ul {
- list-style: none;
- padding: 0;
- margin: 0;
-}
-
-/* end HTML improvements - profile pane */
-/* ── Pane icon tray (responsive) ── */
-.pane-icon-tray {
- display: flex;
- flex-wrap: wrap;
- gap: 0.5rem;
- padding: 0.25rem 0;
- overflow-x: auto; /* horizontal scroll on very narrow screens */
- -webkit-overflow-scrolling: touch;
-}
+/* If you need style in a pane, insert it in the dom (2016)*/
-.pane-icon-tray img {
- width: 2rem;
- height: 2rem;
- border-radius: 0.4rem;
- cursor: pointer;
- transition: outline 0.15s;
-}
-.pane-icon-tray img:focus-visible {
- outline: 2px solid var(--color-border-accent);
- outline-offset: 2px;
-}
-
-/* ── Subject blocks ── */
-.subject-block {
- border-bottom: 1px solid var(--color-border-pale);
- padding-block: 0.75rem;
-}
-
-/* ── Responsive breakpoints via container queries ── */
-@container (max-width: 40rem) {
- .pane-icon-tray {
- justify-content: center;
- }
- .subject-block h1 {
- font-size: 1.15rem;
- }
-}
-
-/* Improved heading hierarchy */
-h1, h2, h3, h4, h5, h6 {
- /* color: var(--color-primary); new design no longer has purple headings. */
- font-weight: var(--font-weight-bold, 600);
- line-height: var(--line-height-tight);
- margin-top: 0;
- margin-bottom: var(--spacing-sm);
-}
-
-h1 { font-size: 2em; } /* 32px */
-h2 { font-size: 1.5em; } /* 24px */
-h3 { font-size: var(--font-size-xl, 1.375rem); } /* New design: 22px was 20px*/
-h4 { font-size: var(--font-size-lg, 1.125rem); }/* 18px */
-h5, h6 { font-size: var(--font-size-base, 1rem); }/* 16px */
-
-/* Better paragraph spacing */
-p {
- margin-bottom: var(--spacing-md);
- line-height: var(--line-height-base);
- max-width: 65ch; /* Optimal reading width */
-}
-
-/* Improved link accessibility */
-a {
- color: var(--color-primary);
- text-decoration: underline;
- text-underline-offset: 0.125em;
- text-decoration-thickness: 0.0625em;
-}
+/* I couldn't find the code for the collapse image. this is a quick work around
+to make the collapsing easier to use ( the triangles dont jump 20 pixels). ~cm2
+*/
+img[title="Hide details."]{ float:left }
-a:hover, a:focus {
- text-decoration-thickness: 0.125em;
-}
+html { height: 100%; line-height:1.15 }
+body { height: 100%; background-color: white ; font-family: sans-serif } /* was: font-size: 80%; */
-.warning {
- color: var(--color-warning);
-}
-/* This was used in manager.js and was turning many things green.
- Doesn't fit with new design. */
-.selected {
- /* background-color: var(--color-selected-bg); */
-}
+.warning { color: red; }
+.selected { background-color: #8F3 }
-/* used in profile-pane as success button */
-.licOkay {
- background-color: var(--color-success-bg);
-}
+.licOkay { background-color: #dfd }
/*
** other potential colors for CC:
@@ -276,50 +28,24 @@ a:hover, a:focus {
** #ccff99, mit page color
*/
-strong {
- font-size: 120%;
- color: var(--color-text);
- font-weight: bold;
-}
-div.Outliner {
- margin-top: 2em;
- padding: 0.8em;
-}
-form#TabulateForm {
- padding: 0.8em;
-}
-div#addViewForm {
- padding: 0.8em;
-}
-iframe {
- background: var(--color-iframe-bg);
-}
+strong { font-size: 120%; color: #333; font-weight: bold; }
+div.Outliner { margin-top: 2em; padding: 0.8em; }
+form#TabulateForm { padding: 0.8em }
+div#addViewForm { padding: 0.8em }
+iframe { background: white }
/* Map */
-img.pic {
- max-height: 20em;
-}
+img.pic { max-height: 20em }
/* Sources */
-.fetched {
- background-color: var(--color-fetch-bg);
-}
-.requested {
- background-color: var(--color-request-bg);
-}
-.failed {
- color: var(--color-warning);
- background-color: var(--color-error-bg);
-}
-.unparseable {
- background-color: var(--color-unparseable-bg);
-}
+.fetched { background-color: #eeffee }
+.requested { background-color: yellow }
+.failed { color: red; background-color: white }
+.unparseable { background-color: #ffcc00; }
-pre#status {
- font-size: 100%;
-}
+pre#status { font-size: 100% }
/* Panes */
/*
@@ -333,17 +59,16 @@ div.instancePane {
border-top: solid 1px #777; border-bottom: solid 1px #777;
margin-top: 0.5em; margin-bottom: 0.5em }
*/
-
/* ***************** For the Justification UI Panes **********/
div.container {
- border-top: solid 5px var(--color-container-border);
- border-left: solid 5px var(--color-container-border);
- border-bottom: solid 5px var(--color-container-border);
- border-right: solid 5px var(--color-container-border);
- margin-top: 0.5em;
- margin-bottom: 0.5em;
- border-radius: 0.75em;
+border-top: solid 5px black;
+border-left: solid 5px black;
+border-bottom: solid 5px black;
+border-right: solid 5px black;
+margin-top: 0.5em;
+margin-bottom: 0.5em;
+border-radius: 0.75em;
}
/*
div.nonCompliantPane {
@@ -369,209 +94,136 @@ div.compliantPane {
}
*/
div.justification {
- font-size: 100%;
- padding: 0 5px;
- width: 80%; /* @@ Don't use pixels -- use em */
- background-color: var(--color-background);
- margin-top: 0.5em;
- margin-bottom: 0.5em;
+font-size: 100%;
+padding: 0 5px;
+width: 80%; /* @@ Don't use pixels -- use em */
+background-color: white;
+margin-top: 0.5em; margin-bottom: 0.5em;
}
+
div.description {
- font-size: 120%;
- border-top: solid 1px var(--color-alert-border);
- border-left: solid 1px var(--color-alert-border);
- border-bottom: solid 1px var(--color-alert-border);
- border-right: solid 1px var(--color-alert-border);
- padding: 15px;
- width: 100%;
- background-color: var(--color-alert-bg);
- margin-top: 0.5em;
- margin-bottom: 0.5em;
- margin-left: 0.5em;
- margin-right: 0.5em;
- border-radius: 0.75em;
- position: relative;
- left: 0%;
+font-size: 120%;
+border-top: solid 1px yellow;
+border-left: solid 1px yellow;
+border-bottom: solid 1px yellow;
+border-right: solid 1px yellow;
+padding: 15px;
+width: 100%;
+background-color: #ffffdd;
+margin-top: 0.5em;
+margin-bottom: 0.5em;
+margin-left: 0.5em;
+margin-right: 0.5em;
+border-radius: 0.75em;
+position:relative;
+left:0%
}
div.premises {
- font-size: 100%;
- border-top: solid 1px var(--color-info-border);
- border-left: solid 1px var(--color-info-border);
- border-bottom: solid 1px var(--color-info-border);
- border-right: solid 1px var(--color-info-border);
- padding: 0.5px;
- width: 100%;
- background-color: var(--color-info-bg);
- margin-top: 0.5em;
- margin-bottom: 0.5em;
- margin-left: 0.5em;
- margin-right: 0.5em;
- border-radius: 0.75em;
- position: relative;
- left: 0%; /*May be we could shift the left margin a bit?*/
+font-size: 100%;
+border-top: solid 1px #3399ff;
+border-left: solid 1px #3399ff;
+border-bottom: solid 1px #3399ff;
+border-right: solid 1px #3399ff;
+padding: 0.5px;
+width: 100%;
+background-color: #ccccff;
+margin-top: 0.5em;
+margin-bottom: 0.5em;
+margin-left: 0.5em;
+margin-right: 0.5em;
+border-radius: 0.75em;
+position:relative;
+left:0% /*May be we could shift the left margin a bit?*/
}
/* ***************** Social Pane **********/
div.socialPane {
- border-top: solid 1px var(--color-border-dark);
- border-bottom: solid 1px var(--color-border-dark);
- padding-top: 0.5em;
- padding-bottom: 0.5em;
- margin: 0;
-}
+border-top: solid 1px #777; border-bottom: solid 1px #777;
+padding-top: 0.5em; padding-bottom: 0.5em;
+margin: 0 }
+
+img.foafPic { width: 100% ; border: none; margin: 0; padding: 0;
+/*float:right; */}
-img.foafPic {
- width: 100%;
- border: none;
- margin: 0;
- padding: 0;
- /*float:right; */
-}
div.mildNotice {
- border: dashed 0.1em var(--color-border-dark);
- margin: 1em;
- padding: 1em;
- width: 80%; /* float: right; */
- background-color: var(--color-mild-notice-bg);
-}
-
-.friendBox {
- /* height: 4em; */
- border-top: solid 0.01em var(--color-border);
- margin: 0;
- padding: 0.3em;
- /* float: left; */
-}
-.friendBoxBig {
- height: 20em;
- border-top: solid 0.01em var(--color-text-dark-gray); /* float: left; */
-}
-
-.socialPane a {
- color: var(--color-text-link);
- text-decoration: none;
- font-weight: bold;
-}
-.socialPane a:link {
- color: var(--color-text-link);
- text-decoration: none;
- font-weight: bold;
-}
-.socialPane a:visited {
- color: var(--color-text-link-visited);
- text-decoration: none;
- font-weight: bold;
-}
-.socialPane a:hover {
- color: var(--color-text-link-hover);
- text-decoration: underline;
- font-weight: bold;
-}
-.socialPane a:active {
- color: var(--color-text-link-active);
- text-decoration: none;
-}
-
-img.foafThumb {
- height: 3em;
- border: 0px;
- margin: 0.1em;
- padding: 0.1em;
- vertical-align: middle;
+border: dashed 0.1em #777; margin: 1em; padding: 1em;
+width: 80%; /* float: right; */
+background-color: #ffe; }
+
+.friendBox { /* height: 4em; */ border-top: solid 0.01em #ccc; margin: 0; padding: 0.3em;
+/* float: left; */}
+.friendBoxBig { height: 20em; border-top: solid 0.01em #202; /* float: left; */}
+
+.socialPane a { color: #3B5998; text-decoration: none; font-weight: bold}
+.socialPane a:link { color: #3B5998; text-decoration: none; font-weight: bold}
+.socialPane a:visited { color: #3B5998; text-decoration: none; font-weight: bold}
+.socialPane a:hover { color: #3B5998; text-decoration: underline; font-weight: bold}
+.socialPane a:active { color: #888; text-decoration: none; }
+
+img.foafThumb { height: 3em ; border: 0px; margin: 0.1em; padding: 0.1em;
+vertical-align: middle;
} /* Thumbnail of a fiend etc */
-.friendBox .confirmed {
- font-weight: bold;
-}
+.friendBox .confirmed { font-weight: bold; }
-table.inputForm {
- font-size: 100%;
-}
+table.inputForm { font-size: 100% }
.mainBlock {
- background: var(--color-main-block-bg);
- color: var(--color-text);
- float: left;
- width: 46%;
- margin: 0;
- border-left: 1px solid var(--color-border);
- border-right: 1px solid var(--color-border);
- border-bottom: 1px solid var(--color-border);
- padding: 0;
+background: #fff;
+color: #000;
+float: left;
+width: 46%;
+margin: 0;
+border-left: 1px solid #ccc;
+border-right: 1px solid #ccc;
+border-bottom: 1px solid #ccc;
+padding: 0;
}
.navBlock {
- background-color: var(--color-nav-block-bg);
- float: left;
- width: 25%;
- border: 0;
- padding: 0.5em;
- margin: 0;
+background-color: #eee;
+float: left;
+width: 25%;
+border: 0;
+padding: 0.5em;
+margin: 0;
}
.navBlock .navSection {
- border: solid 0.05em var(--color-nav-block-border);
- padding: 0.5em;
- border-radius: 0.5em; /* CSS3: border-radius: .4em; */
+border: solid 0.05em gray;
+padding: 0.5em;
+border-radius: 0.5em; /* CSS3: border-radius: .4em; */
}
-div.socialPane h2 {
- color: var(--color-text-dark-gray);
-}
-div.socialPane h3 {
- color: var(--color-text-dark-gray);
-}
+div.socialPane h2 { color: #202 }
+div.socialPane h3 { color: #202 }
div.social_linkButton {
- width: 80%;
- background-color: var(--color-background);
- border: solid 0.05em var(--color-border);
- margin-top: 0.1em;
- margin-bottom: 0.1em;
- padding: 0.1em;
- text-align: center;
+width: 80%;
+background-color: #fff;
+border: solid 0.05em #ccc;
+margin-top: 0.1em; margin-bottom: 0.1em;
+padding: 0.1em;
+text-align: center;
}
/* For question-and-answer stuff for new web id but quite reusable.
*/
-.answer {
- font-style: italic;
- color: var(--color-text-answer);
- text-decoration: underline;
-}
-.tip {
- font-style: normal;
- color: var(--color-text);
- margin: 1em;
-}
-.task {
- font-style: normal;
- color: var(--color-text);
- margin: 1em;
- background-color: var(--color-mild-notice-bg);
- padding: 1em;
- border-radius: 1em; /* CSS3: border-radius: 1em; */
-}
-.success {
- background-color: var(--color-success-bg);
-}
-.failure {
- background-color: var(--color-failure-bg);
- border: 0.5em var(--color-failure-border);
-}
-div.unknown {
- display: none;
-}
-div.yes > div.negative {
- display: none;
-}
-div.no > div.affirmative {
- display: none;
-}
+.answer { font-style: italic; color: #00c; text-decoration: underline; }
+.tip { font-style: normal; color: #333; margin: 1em;}
+.task { font-style: normal; color: #333; margin: 1em;
+background-color: #ffe; padding: 1em;
+border-radius: 1em; /* CSS3: border-radius: 1em; */
+}
+.success {background-color: #efe }
+.failure {background-color: white ; border: 0.5em red}
+div.unknown { display:none }
+div.yes > div.negative { display: none }
+div.no > div.affirmative { display: none }
/******************* Exception Pane ********
**
@@ -579,192 +231,228 @@ div.no > div.affirmative {
** throws an exception
**/
-div.exceptionPane pre {
- background-color: var(--color-error-notice-bg);
-}
+div.exceptionPane pre { background-color: #fee; }
+
+
/******************* Category Pane *********/
-.categoryPane a {
- color: var(--color-text-link);
- text-decoration: none;
- font-weight: bold;
-}
-.categoryPane a:link {
- color: var(--color-text-link);
- text-decoration: none;
- font-weight: bold;
-}
-.categoryPane a:visited {
- color: var(--color-text-link-visited);
- text-decoration: none;
- font-weight: bold;
-}
-.categoryPane a:hover {
- color: var(--color-text-link-hover);
- text-decoration: underline;
- font-weight: bold;
-}
-.categoryPane a:active {
- color: var(--color-text-link-active);
- text-decoration: none;
-}
+.categoryPane a { color: #3B5998; text-decoration: none; font-weight: bold}
+.categoryPane a:link { color: #3B5998; text-decoration: none; font-weight: bold}
+.categoryPane a:visited { color: #3B5998; text-decoration: none; font-weight: bold}
+.categoryPane a:hover { color: #3B5998; text-decoration: underline; font-weight: bold}
+.categoryPane a:active { color: #888; text-decoration: none; }
-.categoryBottomClass {
- background-color: var(--color-category-class-bg);
- border: 0.1em solid var(--color-category-class-border);
-}
+.categoryBottomClass { background-color: #efe ; border: 0.1em solid green }
-.categoryTable {
- padding-left: 2em;
-}
-.categoryPane {
- background-color: var(--color-category-bg);
- padding: 0.5em;
- border-width: 0.1em;
- border-color: var(--color-category-border);
- border-radius: 1em; /* CSS3: border-radius: .4em; */
-}
+.categoryTable { padding-left: 2em;}
+.categoryPane { background-color: #f8fff8; padding: 0.5em;
+border-width: 0.1em; border-color: #777777;
+border-radius: 1em; /* CSS3: border-radius: .4em; */ }
-.categoryPane a.categoryWhy {
- color: var(--color-border-pale);
-}
-.categoryPane a.categoryWhy:link {
- color: var(--color-border-pale);
- text-decoration: none;
- font-weight: bold;
-}
-.categoryPane a.categoryWhy:visited {
- color: var(--color-border-pale);
- text-decoration: none;
- font-weight: bold;
-}
-.categoryPane a.categoryWhy:hover {
- color: var(--color-text-link-hover);
- text-decoration: underline;
- font-weight: bold;
-}
-.categoryPane a.categoryWhy:active {
- color: var(--color-border-pale);
- text-decoration: none;
-}
+.categoryPane a.categoryWhy { color: #ddd}
+.categoryPane a.categoryWhy:link { color: #ddd; text-decoration: none; font-weight: bold}
+.categoryPane a.categoryWhy:visited { color: #ddd; text-decoration: none; font-weight: bold}
+.categoryPane a.categoryWhy:hover { color: #3B5998; text-decoration: underline; font-weight: bold}
+.categoryPane a.categoryWhy:active { color: #ddd; text-decoration: none; }
-.categoryPane a.categoryWhy {
- color: grey;
-}
+.categoryPane a.categoryWhy { color:grey }
/* a.categoryWhy:hover { color: #3B5998 } */
+
/******************* PubsPane *********/
.pubsPane {
- background-color: var(--color-pubs-pane-bg);
- border-width: 0.1em;
- border-color: var(--color-pubs-pane-border);
- border-radius: 1em; /* CSS3: border-radius: .4em; */
- padding: 1em;
+background-color: #F2F6DA;
+border-width: 0.1em;
+border-color: #777777;
+border-radius: 1em; /* CSS3: border-radius: .4em; */
+padding: 1em;
- text-decoration: none;
- font-weight: bold;
+text-decoration: none;
+font-weight: bold;
}
.pubsPane h2 {
- margin: 0;
- padding: 0;
+margin: 0;
+padding: 0;
}
.pubsPane form {
- padding-left: 1em;
+padding-left: 1em;
}
/*Clear both - start things on individula lines */
.pubsRow {
- margin: 0.5em 3em 0.5em 0em;
- clear: both;
+margin: 0.5em 3em 0.5em 0em;
+clear: both;
}
/*inputs float right to line up */
.pubsRow input {
- float: right;
- width: 20em;
- height: 1em;
+float: right;
+width: 20em;
+height: 1em;
}
#inpid_book_description {
- float: right;
- height: 8em;
- width: 17em;
+float: right;
+height: 8em;
+width: 17em;
}
.pubsRow button {
- float: left;
- height: 2em;
- padding: 0.5em;
- margin: 0.5em;
+float: left;
+height: 2em;
+padding: 0.5em;
+margin: 0.5em;
}
-.hideit {
- display: none;
+.hideit
+{
+display: none;
}
.active {
- /* display: visible; */
+/* display: visible; */
}
.submitRow {
- clear: both;
- height: 5em;
+clear: both;
+height: 5em;
}
.submitRow button {
- width: 7em;
- height: 100%;
+width: 7em;
+height: 100%;
}
#buttonid {
- display: none;
+display: none;
}
-#buttonid.active {
- display: inline;
+#buttonid.active{
+display: inline;
}
+
+
+
/******************* CV Pane *****************/
.CVclass {
- background-color: var(--color-cv-pane-bg);
+background-color: LightSkyBlue;
}
-.imageView {
- border: 1em var(--color-background);
- margin: 1em;
+/******************* Data Content Pane *****************/
+
+div.dataContentPane {
+border-top: solid 1px black;
+border-left: solid 1px black;
+border-bottom: solid 1px #777;
+border-right: solid 1px #777;
+padding: 0.5em; /* color: #404; */
+margin-top: 0.5em; margin-bottom: 0.5em;
+}
+
+.nestedFormula {
+border-top: solid 1px black;
+border-left: solid 1px black;
+border-bottom: solid 1px #777;
+border-right: solid 1px #777;
+padding: 0.5em;
+border-radius: 0.5em;
+}
+
+div.dataContentPane td {
+padding-left: 0.2em;
+padding-top: 0.1em;
+padding-right: 0.2em;
+padding-bottom: 0.05em;
+/* vertical-align: middle; /*@@ Lalana's request*/
+vertical-align: top; /*@@ Tims's request*/
+/* With middel, you can't tell what is with what */
+/* background-color: white; */
+}
+
+div.dataContentPane tr {
+margin-bottom: 0.6em;
+padding-top: 1em;
+padding-bottom: 1em;
+
+}
+
+.dataContentPane a { color: #3B5998; text-decoration: none; font-weight: bold}
+.dataContentPane a:link { color: #3B5998; text-decoration: none; font-weight: bold}
+.dataContentPane a:visited { color: #3B5998; text-decoration: none; font-weight: bold}
+.dataContentPane a:hover { color: #3B5998; text-decoration: underline; font-weight: bold}
+.dataContentPane a:active { color: #888; text-decoration: none; }
+
+.dataContentPane.embeddedText { white-space: pre-wrap;}
+.dataContentPane.embeddedXHTML {}
+
+/* div.dataContentPane a { text-decoration: none; color: #006} /* Only very slightly blue */
+div.dataContentPane td.pred { min-width: 12em } /* Keep aligned with others better */
+div.dataContentPane td.pred a { color: #444 } /* Greyish as form field names have less info value */
+
+/* .collectionAsTables {border-right: green 1px; margin: 0.2em;} */
+
+
+
+div.n3Pane {
+padding: 1em;
+border-top: solid 1px black;
+border-left: solid 1px black;
+border-bottom: solid 1px #777;
+border-right: solid 1px #777;
+color: #004;
+}
+
+.imageView { border: 1em white; margin: 1em; }
+
+.n3Pane pre { font-size: 120%; }
+div.n3Pane { }
+
+.RDFXMLPane pre { font-size: 120%; }
+div.RDFXMLPane { }
+
+div.RDFXMLPane {
+padding: 1em;
+border-top: solid 2px black;
+border-left: solid 2px black;
+border-bottom: solid 2px #777;
+border-right: solid 2px #777;
+color: #440;
}
/* Generic things useful anywhere */
+
img.hideTillHover {
- visibility: hidden;
+visibility:hidden;
}
-img.hideTillHover:hover {
- visibility: visible;
+img.hideTillHover:hover {
+visibility:visible;
}
-.hideTillHover img {
- visibility: hidden;
+.hideTillHover img{
+visibility:hidden;
}
.hideTillHover:hover img {
- visibility: visible;
+visibility:visible;
}
-.hideTillHover a {
- visibility: hidden;
+.hideTillHover a{
+visibility:hidden;
}
.hideTillHover:hover a {
- visibility: visible;
+visibility:visible;
}
-.hoverControl .hoverControlHide {
- visibility: hidden;
+.hoverControl .hoverControlHide{
+visibility:hidden;
}
.hoverControl:hover .hoverControlHide {
- visibility: visible;
+visibility:visible;
}
+
/* Pane icons: */
/*
@@ -790,383 +478,311 @@ img.hideTillHover:hover {
.hoverControl:hover .paneHidden { border-radius: 0.5em; margin-left: 1em; padding: 3px; visibility:visible; }
*/
+
+
/* outline object view */
-img.outlineImage {
- max-height: 20em;
- max-width: 30em;
-} /* save vertical space */
+img.outlineImage { max-height: 20em; max-width: 30em } /* save vertical space */
/* Compare facebook which only limits width -> lots of tall images! */
-img.phoneIcon {
- border: 0;
- margin-left: 1em;
-}
+img.phoneIcon { border: 0; margin-left: 1em}
-table#sources {
- width: 100%;
-}
+table#sources { width: 100% }
-table {
- border-spacing: 0;
- margin: 0em;
- border-collapse: collapse; /* from contact-pane accessibility */
- width: 100%; /* from contact-pane accessibility */
-}
+table { border-spacing: 0}
+
+table { margin: 0em }
-td {
- font-size: 100%;
- border-left: none;
- border-top: none;
- border-right: none;
- border-bottom: none;
- margin: 0.2em;
- /* border-right: solid purple 0.1em ;
+td { font-size: 100%;
+border-left: none;
+border-top: none;
+border-right: none;
+border-bottom: none;
+margin: 0.2em;
+/* border-right: solid purple 0.1em ;
border-bottom: solid purple 0.1em;
*/
- vertical-align: top;
- /* display: compact; Causes console errors in ffox */
+vertical-align: top;
+/* display: compact; Causes console errors in ffox */
}
-td.pred {
- padding-left: 0.5em;
-}
+td.pred { padding-left: 0.5em }
/*td.optButton { display: none }
tr[parentOfSelected] > td.pred td.optButton { display: block }
*/
-table.results {
- width: 100%;
-}
+table.results { width: 100% }
-table.results td {
- font-size: 100%;
- background-color: var(--color-table-result-bg);
- border-left: none;
- border-top: none;
- border-right: none;
- border-bottom: none;
- margin: 0.1em;
- border-right: solid var(--color-table-border-dark) 0.1em;
- border-bottom: solid var(--color-table-border-dark) 0.1em;
+table.results td { font-size: 100%;
+background-color:#fff;
+border-left: none;
+border-top: none;
+border-right: none;
+border-bottom: none;
+margin: 0.1em;
+border-right: solid #777 0.1em ;
+border-bottom: solid #777 0.1em;
- vertical-align: top;
-}
+vertical-align: top }
-table.results th {
- font-size: 100%;
- background-color: var(--color-table-header-bg);
- border-left: none;
- border-top: none;
- border-right: solid var(--color-table-border-dark) 0.1em;
- border-bottom: solid var(--color-table-border-dark) 0.1em;
- margin: 0.3em;
- padding-top: 0.5em;
- padding-right: 0.5em;
- border-right: solid var(--color-table-border-dark) 0.1em;
- border-bottom: solid var(--color-table-border-dark) 0.1em;
- vertical-align: top;
-}
+table.results th { font-size: 100%;
+background-color: #ddf;
+border-left: none;
+border-top: none;
+border-right: solid #777 0.1em;
+border-bottom: solid #777 0.1em;
+margin: 0.3em;
+padding-top: 0.5em; padding-right: 0.5em;
+border-right: solid #777 0.1em ;
+border-bottom: solid #777 0.1em;
+
+vertical-align: top }
/* Hide sections of the display.
Collpase not actually in CSS1 except for table row and col.
Supposed to leave layoutunchanged. So we float it too. */
-.collapse {
- display: none;
-}
-.expand {
- display: block;
-}
+.collapse { display: none }
+.expand { display: block }
/* log classes */
-.nrml {
- color: var(--color-log-normal);
-}
-.info {
- color: var(--color-log-info);
-}
-.warn {
- color: var(--color-log-warn);
- background-color: var(--color-log-warn-bg);
-}
-.eror {
- color: var(--color-log-error);
- background-color: var(--color-log-error-bg);
-}
-.mesg {
- color: var(--color-log-message);
-}
-.dbug {
- color: var(--color-log-debug);
- background-color: var(--color-log-debug-bg);
-} /* Blue */
+.nrml { color: black; }
+.info { color: black; }
+.warn { color: black; background-color: #ffd; }
+.eror { color: black; background-color: #fdd; }
+.mesg { color: green; }
+.dbug { color: black; background-color: #ddf;} /* Blue */
/* Try to get the icons to flush right in the cell */
.sortheader {
- color: var(--color-log-normal);
- text-decoration: none;
- position: relative;
- border: none; /* Jim's commented out */
+color: black;
+text-decoration: none;
+position: relative;
+border:none; /* Jim's commented out */
}
-.colclose {
- float: right;
- color: var(--color-col-close);
-} /* Should be 67% transp black */
-.sortarrow {
- float: left;
- color: var(--color-sort-arrow);
- border: none;
-}
+.colclose { float: right; color: #aaa } /* Should be 67% transp black */
+.sortarrow { float: left; color: #aaa; border: none;}
+
/* CSS Stuff for tabbed Views.. */
table.viewTable {
- padding: 0;
- margin: 0;
- border-style: none;
- border-width: 0;
- height: 40em;
- width: 100%;
- border-spacing: 0;
+padding: 0;
+margin: 0;
+border-style: none;
+border-width: 0;
+height: 40em;
+width: 100%;
+border-spacing: 0;
}
div.viewTabs {
- background-color: var(--color-view-tab-bg);
- padding: 0;
+background-color: #fff;
+padding:0;
}
div.viewWindows {
- width: 100%;
- height: 100%;
- overflow: auto;
- margin: 0em;
- padding: 0em;
- border-right: solid var(--color-border-light) 0.1em; /* was 2px */
- border-left: solid var(--color-border-light) 0.1em;
- border-bottom: solid var(--color-border-light) 0.1em;
- background-color: var(--color-view-window-bg);
+width: 100%;
+height:100%;
+overflow: auto;
+margin: 0em;
+padding:0em;
+border-right: solid #aaa 0.1em; /* was 2px */
+border-left: solid #aaa 0.1em;
+border-bottom: solid #aaa 0.1em;
+background-color: #ccc;
}
div.querySelect {
- background-color: var(--color-query-select-bg);
- width: 100%;
- height: 100%;
- border-left: solid var(--color-border-light) 0.1em;
- border-bottom: solid var(--color-border-light) 0.1em;
- overflow: auto;
- margin: 0em;
- padding: 0em;
+background-color: #ccc;
+width:100%;
+height:100%;
+border-left: solid #aaa 0.1em;
+border-bottom: solid #aaa 0.1em;
+overflow:auto;
+margin: 0em;
+padding:0em;
}
td.viewTableData {
- padding: 0em;
- margin: 0em;
- height: 100%;
- width: 80%;
+padding: 0em;
+margin: 0em;
+height:100%;
+width:80%;
}
td.queryTableData {
- padding: 0em;
- margin: 0em;
- border-width: 0em;
- height: 100%;
- width: 20%;
- border-style: none;
+padding: 0em;
+margin: 0em;
+border-width: 0em;
+height:100%;
+width:20%;
+border-style:none;
}
table.viewTable tr {
- height: 100%;
- margin: 0em;
- padding: 0em;
- border-style: none;
+height: 100%;
+margin: 0em;
+padding: 0em;
+border-style:none;
}
-/* Improved link accessibility from profile-pane */
-a {
- color: var(--color-primary);
- text-decoration: underline;
- text-underline-offset: 0.125em;
- text-decoration-thickness: 0.0625em;
-}
-a:hover, a:focus {
- text-decoration-thickness: 0.125em;
-}
-
-/* OLD
a {
- color: var(--color-text-link);
- text-decoration: none;
- cursor: pointer;
-} */
-a.inactive {
- background-color: var(--color-tab-inactive-bg);
- border-right: solid var(--color-tab-inactive-border) 0.1em;
- border-top: solid var(--color-tab-inactive-border-light) 0.1em;
- border-left: solid var(--color-tab-inactive-border-light) 0.1em;
- padding-top: 0.3em;
- padding-left: 0.8em;
- padding-right: 0.8em;
- padding-bottom: 0em;
- margin-right: 0.1em;
- color: var(--color-tab-inactive-text);
- text-decoration: none;
-}
-
-a.active {
- background-color: var(--color-tab-active-bg);
- border-right: solid var(--color-tab-active-border) 0.1em;
- border-top: solid var(--color-tab-active-border-light) 0.1em;
- border-left: solid var(--color-tab-active-border-light) 0.1em;
- padding-top: 0.3em;
- padding-left: 0.8em;
- padding-right: 0.8em;
- padding-bottom: 0em;
- margin-right: 0.1em;
- color: var(--color-tab-active-text);
- text-decoration: none;
+color: #3B5998;
+text-decoration: none;
+cursor: pointer;
+}
+a.inactive{
+background-color: #eee;
+border-right:solid #ddd 0.1em;
+border-top:solid #aaa 0.1em;
+border-left:solid #aaa 0.1em;
+padding-top: 0.3em;
+padding-left: 0.8em;
+padding-right: 0.8em;
+padding-bottom: 0em;
+margin-right: 0.1em;
+color: #99f;
+text-decoration:none;
+}
+
+a.active{
+background-color: #ccc;
+border-right:solid #ddd 0.1em;
+border-top:solid #aaa 0.1em;
+border-left:solid #aaa 0.1em;
+padding-top: 0.3em;
+padding-left: 0.8em;
+padding-right: 0.8em;
+padding-bottom:0em;
+margin-right:0.1em;
+color: #22f;
+text-decoration:none;
}
input.tabQueryName {
- border: solid var(--color-border-light) 0.1em;
- width: 100%;
- padding: 0em;
+border: solid #aaa 0.1em;
+width:100%;
+padding:0em;
}
input.delQueryButton {
- border: none;
- color: var(--color-warning);
- background-color: var(--color-tab-active-bg);
- cursor: pointer;
- padding: 0em;
+border:none;
+color:#c00;
+background-color:#ccc;
+cursor:pointer;
+padding:0em;
}
td.checkboxTD {
- padding-right: 0.5em;
+padding-right:0.5em;
}
.sourceHighlight {
- background-color: var(--color-source-highlight);
+background-color:yellow;
}
#MenuBar {
- padding: 0.5em;
- position: fixed;
- top: 0;
- bottom: auto;
- left: 0;
- right: 0;
- background-color: var(--color-nav-block-bg);
- border: 0.1em solid var(--color-border-light);
+padding: 0.5em;
+position: fixed;
+top: 0;
+bottom: auto;
+left: 0;
+right: 0;
+background-color: #eee;
+border: 0.1em solid #aaa;
}
#TabulatorStatusWidget {
- position: fixed;
- top: 0;
- bottom: auto;
- left: auto;
- right: 0;
+position: fixed;
+top: 0;
+bottom: auto;
+left: auto;
+right: 0;
}
div.mapKeyDiv {
- position: relative;
- float: right;
- margin: 0.3em;
- color: var(--color-border-dark);
- background: var(--color-background);
- border: solid var(--color-border-dark) 0.1em;
- padding: 0.1em;
+position:relative;
+float:right;
+margin: 0.3em;
+color: #777;
+background:#fff;
+border:solid #777 0.1em;
+padding:0.1em;
}
span.closeQuerySpan {
- float: right;
- text-align: right;
- height: 0.1em;
- overflow: visible;
+float:right;
+text-align:right;
+height: 0.1em;
+overflow:visible;
}
span.openQuerySpan {
- float: left;
- overflow: visible;
- height: 0em;
- text-align: left;
- position: relative;
- top: 0em;
- z-index: 1;
+float:left;
+overflow:visible;
+height:0em;
+text-align:left;
+position:relative;
+top:0em;
+z-index:1;
}
-input.textinput {
- width: 100%;
- border: none;
- font-size: 95%;
- padding: 0em;
- margin: 0;
+input.textinput{
+width: 100%;
+border: none;
+font-size:95%;
+padding: 0em;
+margin: 0;
}
-textarea.textinput {
- border: none;
+textarea.textinput{
+border: none;
}
.pendingedit {
- color: var(--color-pending-edit);
+color: #bbb;
}
-td.undetermined {
- color: var(--color-nav-block-border);
- font-style: italic;
+td.undetermined{
+color: gray;
+font-style: italic;
}
/*revert back*/
-td.undetermined table {
- color: var(--color-text);
- font-style: normal;
+td.undetermined table{
+color: black;
+font-style: normal;
}
/*color style from http://developer.yahoo.com/yui/docs/module_menu.html*/
-.outlineMenu {
- position: absolute;
- /*width:10em;*/
- height: 10em; /* Jim's commented out */
- background: var(--color-menu-bg) none repeat scroll 0%;
- overflow-x: hidden;
- overflow-y: auto;
- border: 1px solid;
- /*padding:.2em;*/
-}
-.outlineMenu table {
- cursor: default;
- width: 100%;
- text-align: left;
- padding: 5px 5px;
-}
-.outlineMenu div {
- /*width:6em;*/
- overflow: auto;
- white-space: nowrap;
-}
-.outlineMenu td {
- color: var(--color-menu-item-text);
-}
-.outlineMenu .activeItem {
- background: var(--color-menu-item-active);
-} /* @@ Jim's: #f4e8fc; */
-.outlineMenu input {
- margin: 0.2em;
-}
-
-/* The following two classes were used for defaultPane
-I'm not sure if they are used anywhere else so i'm not deleting. */
-div.bottom-border {
- border: 0.2em solid transparent;
- width: 100%;
-}
-
-div.bottom-border-active {
- cursor: copy;
- border: 0.2em solid;
- border-color: var(--color-bottom-border-highlight);
+.outlineMenu{
+position:absolute;
+/*width:10em;*/
+height:10em; /* Jim's commented out */
+background: #FFFFFF none repeat scroll 0%;
+overflow-x: hidden;
+overflow-y: auto;
+border: 1px solid;
+/*padding:.2em;*/
+}
+.outlineMenu table{cursor:default;width:100%;text-align:left;padding:5px 5px;}
+.outlineMenu div{/*width:6em;*/ overflow:auto; white-space:nowrap;}
+.outlineMenu td{color:#654d6c;}
+.outlineMenu .activeItem{background: #D1C6DA;} /* @@ Jim's: #f4e8fc; */
+.outlineMenu input{margin: 0.2em;}
+
+div.bottom-border{
+border: .2em solid transparent;
+width: 100%;
+}
+
+div.bottom-border-active{
+cursor: copy;
+border: .2em solid;
+border-color: rgb(100%,65%,0%);
}
/* The thing below was for the kenny's orange bar*/
@@ -1178,195 +794,199 @@ td{
*/
.deleteIcon {
- margin-left: 0.1em;
+margin-left: 0.1em;
}
.deleteCol {
- float: right;
- display: inline;
+float: right;
+display: inline;
}
-.suggestion_list {
- background: var(--color-suggestion-bg);
- border: 1px solid var(--color-suggestion-border);
- padding: 4px;
+.suggestion_list
+{
+background: white;
+border: 1px solid;
+padding: 4px;
}
-.suggestion_list ul {
- padding: 0;
- margin: 0;
- list-style-type: none;
+.suggestion_list ul
+{
+padding: 0;
+margin: 0;
+list-style-type: none;
}
-.suggestion_list a {
- text-decoration: none;
- color: var(--color-suggestion-link);
+.suggestion_list a
+{
+text-decoration: none;
+color: navy;
}
-.suggestion_list .selected {
- background: var(--color-suggestion-selected-bg);
- color: var(--color-suggestion-selected-text);
+.suggestion_list .selected
+{
+background: navy;
+color: white;
}
-.suggestion_list .selected a {
- color: var(--color-suggestion-selected-text);
+.suggestion_list .selected a
+{
+color: white;
}
-#autosuggest {
- display: none;
+#autosuggest
+{
+display: none;
}
+
+
/*
Start of styles for the photoPane, by albert08@csail.mit.edu
*/
div.PhotoContentPane {
- float: left;
- width: 900px;
- border: 1px solid var(--color-photo-border);
- padding: 10px;
+float: left;
+width: 900px;
+border: 1px solid #AAAAAA;
+padding: 10px;
}
div.PhotoListPanel {
- float: left;
- padding: 5px;
- border: 1px solid var(--color-photo-border);
- width: 540px;
- min-height: 300px;
+float: left;
+padding: 5px ;
+border: 1px solid #AAAAAA;
+width: 540px;
+min-height: 300px;
}
div.PhotoInfoPanel {
- float: left;
- padding: 10px;
- border: 1px solid var(--color-photo-border);
- width: 300px;
- text-align: center;
- margin: 0px 0px 10px 10px;
+float: left;
+padding: 10px;
+border: 1px solid #AAAAAA;
+width: 300px;
+text-align: center;
+margin: 0px 0px 10px 10px;
}
div.TagMenu {
- float: left;
- padding: 10px;
- border: 1px solid var(--color-photo-border);
- width: 300px;
- margin: 0px 0px 0px 10px;
- text-align: justify;
+float: left;
+padding: 10px;
+border: 1px solid #AAAAAA;
+width: 300px;
+margin: 0px 0px 0px 10px;
+text-align: justify;
}
.tagItem {
- float: left;
- padding: 2px;
- margin: 2px;
- cursor: pointer;
+float: left;
+padding: 2px;
+margin: 2px;
+cursor:pointer;
}
.tagItem_h {
- float: left;
- padding: 2px;
- margin: 1px;
- border: 1px solid var(--color-photo-tag-highlight-border);
- background-color: var(--color-photo-tag-highlight);
- cursor: pointer;
+float: left;
+padding: 2px;
+margin: 1px;
+border: 1px solid #DDBB99;
+background-color: #DDEEFF;
+cursor:pointer;
}
div.photoItem {
- float: left;
- width: 100%;
+float: left;
+width: 100%;
}
div.photoFrame {
- border-right: 1px solid var(--color-photo-border);
- width: 260px;
- padding: 10px;
- margin: 10px 10px 10px 10px;
- text-align: center;
- float: left;
+border-right: 1px solid #AAAAAA;
+width: 260px;
+padding: 10px;
+margin: 10px 10px 10px 10px;
+text-align: center;
+float: left;
}
img.photoThumbnail {
- border: 1px solid var(--color-photo-thumb-border);
- margin: auto auto auto auto;
+border: 1px solid #CCCCCC;
+margin: auto auto auto auto;
}
.photoListTags {
- width: 200px;
- margin-top: 10px;
- padding-top: 10px;
- float: left;
+width:200px;
+margin-top: 10px;
+padding-top: 10px;
+float: left;
}
.photoList_tag {
- background: transparent
- url("https://solidos.github.io/solid-ui/src/originalIcons/tag_tiny.png") 0px
- 1px no-repeat;
- padding: 1px 0px 1px 18px;
- margin-left: 5px;
+background: transparent url("https://solidos.github.io/solid-ui/src/originalIcons/tag_tiny.png") 0px 1px no-repeat;
+padding: 1px 0px 1px 18px;
+margin-left: 5px;
}
.TagMenu_tag {
- background: transparent
- url("https://solidos.github.io/solid-ui/src/originalIcons/tag_tiny.png") 0px
- 1px no-repeat;
- padding: 1px 0px 1px 18px;
- margin-left: 5px;
+background: transparent url("https://solidos.github.io/solid-ui/src/originalIcons/tag_tiny.png") 0px 1px no-repeat;
+padding: 1px 0px 1px 18px;
+margin-left: 5px;
}
div.photoImportContentPane {
- float: left;
- padding: 0px;
- width: 930px;
- border: 1px solid var(--color-photo-border);
- padding: 10px;
+float: left;
+padding: 0px;
+width: 930px;
+border: 1px solid #AAAAAA;
+padding: 10px;
}
.photoImportTitle {
- font-size: 1rem;
- font-weight: bold;
+font-size: 16px;
+font-weight: bold;
}
.photoItemPanel {
- width: 260px;
- height: 300px;
- float: left;
- padding: 10px;
- border: 1px solid var(--color-photo-border);
- margin: 0px 10px 10px 0px;
+width: 260px;
+height: 300px;
+float: left;
+padding: 10px;
+border: 1px solid #AAAAAA;
+margin: 0px 10px 10px 0px;
}
.photoControlImg {
- border: 0px;
- cursor: pointer;
+border: 0px;
+cursor: pointer;
}
.photoControlImgInactive {
- opacity: 0.5;
- border: 0px;
+opacity: .5;
+border: 0px;
}
#photoPageInfo {
- font-family: var(--font-family-ui);
- font-size: 0.875rem;
- font-weight: bold;
+font-family: Arial;
+font-size: 14px;
+font-weight: bold;
}
.controls {
- clear: both;
- text-align: right;
- margin: 15px 15px 0px 0px;
+clear: both;
+text-align: right;
+margin: 15px 15px 0px 0px;
}
.controlButton {
- margin: 0px 0px 0px 10px;
+margin: 0px 0px 0px 10px;
}
div.TagPane {
- min-width: 500px;
- border: 1px solid var(--color-photo-border);
- padding: 10px;
+min-width: 500px;
+border: 1px solid #AAAAAA;
+padding: 10px;
}
div.TagSemanticsPanel {
- margin: 5px 0px 20px 0px;
+margin: 5px 0px 20px 0px;
}
div.TagSemanticsTable {
- width: 100%;
- font-family: var(--font-family-ui);
- font-size: 0.75rem;
+width: 100%;
+font-family: Arial;
+font-size: 12px;
}
div.AddTagSemantics {
- margin: 50px 0px 10px 0px;
+margin: 50px 0px 10px 0px;
}
.controlSelect {
- margin: 5px;
- font-family: var(--font-family-ui);
- font-size: 0.75rem;
+margin: 5px;
+font-family: Arial;
+font-size: 12px;
}
.tagURIInput {
- margin: 5px;
- font-family: var(--font-family-ui);
- font-size: 0.75rem;
- width: 300px;
+margin: 5px;
+font-family: Arial;
+font-size: 12px;
+width: 300px;
}
-div.TagPane hr {
- border: 1px solid var(--color-photo-border);
+div.TagPane hr{
+border: 1px solid #AAAAAA;
}
/*
End of styles for the photoPane
@@ -1377,302 +997,89 @@ Styles for tableViewPane
*/
.tableViewPane table th {
- background-color: var(--color-tab-inactive-bg);
- color: var(--color-log-normal);
+background-color: #eee;
+color: black;
}
.tableViewPane table th a {
- color: var(--color-text-secondary);
+color: #555;
}
.tableViewPane table .selectors td {
- background-color: var(--color-tab-active-bg);
+background-color: #ccc;
}
.tableViewPane table td {
- border-bottom: 1px solid var(--color-data-pane-border-top);
- border-right: 1px solid var(--color-data-pane-border-top);
+border-bottom: 1px solid black;
+border-right: 1px solid black;
}
.tableViewPane .toolbar td {
- border: none;
+border: none;
}
.tableViewPane .sparqlButton {
- width: 16px;
- height: 16px;
- border: 1px solid var(--color-data-pane-border-top);
+width: 16px;
+height: 16px;
+border: 1px solid black;
}
.tableViewPane .sparqlDialog {
- position: fixed;
- top: 40px;
- left: 100px;
- width: 600px;
- background: var(--color-background);
- border: 1px solid var(--color-data-pane-border-top);
- padding: 5px;
+position: fixed;
+top: 40px;
+left: 100px;
+width: 600px;
+background: white;
+border: 1px solid black;
+padding: 5px;
}
.tableViewPane .sparqlDialog textarea {
- width: 590px;
- height: 250px;
+width: 590px;
+height: 250px;
}
/* These should be the same as with hthe dataContentPane */
-.tableViewPane a {
- color: var(--color-text-link);
- text-decoration: none;
- font-weight: bold;
-}
-.tableViewPane a:link {
- color: var(--color-text-link);
- text-decoration: none;
- font-weight: bold;
-}
-.tableViewPane a:visited {
- color: var(--color-text-link-visited);
- text-decoration: none;
- font-weight: bold;
-}
-.tableViewPane a:hover {
- color: var(--color-text-link-hover);
- text-decoration: underline;
- font-weight: bold;
-}
-.tableViewPane a:active {
- color: var(--color-text-link-active);
- text-decoration: none;
-}
+.tableViewPane a { color: #3B5998; text-decoration: none; font-weight: bold}
+.tableViewPane a:link { color: #3B5998; text-decoration: none; font-weight: bold}
+.tableViewPane a:visited { color: #3B5998; text-decoration: none; font-weight: bold}
+.tableViewPane a:hover { color: #3B5998; text-decoration: underline; font-weight: bold}
+.tableViewPane a:active { color: #888; text-decoration: none; }
+
+.tableViewPane tr {border-color: #444; padding-left: 0.3em; padding-right: 0.3em }
+
-.tableViewPane tr {
- border-color: var(--color-border-darker);
- padding-left: 0.3em;
- padding-right: 0.3em;
-}
/*The 'display explanation' feature*/
.inquiry {
- padding-left: 0.2em;
- color: var(--color-warning);
- font-family: var(--font-family-ui);
- font-weight: bold;
+padding-left: 0.2em;
+color: red;
+font-family: Arial;
+font-weight: bold;
}
/*
End of styles for tableViewPane
*/
+
+
/* Styles for FORM PANE
**
** Colors from data cotent pane
*/
-.formPane a {
- color: var(--color-text-link);
- text-decoration: none;
-}
-.formPane a:link {
- color: var(--color-text-link);
- text-decoration: none;
-}
-.formPane a:visited {
- color: var(--color-text-link-visited);
- text-decoration: none;
-}
-.formPane a:hover {
- color: var(--color-text-link-hover);
- font-weight: bold;
-} /* was text-decoration: underline; */
-.formPane a:active {
- color: var(--color-text-link-active);
- text-decoration: none;
-}
+.formPane a { color: #3B5998; text-decoration: none; }
+.formPane a:link { color: #3B5998; text-decoration: none; }
+.formPane a:visited { color: #3B5998; text-decoration: none; }
+.formPane a:hover { color: #3B5998; font-weight: bold} /* was text-decoration: underline; */
+.formPane a:active { color: #888; text-decoration: none; }
/* ends */
@mixin box-shadow($x-axis: 0, $y-axis: 1px, $blur: 4px, $color: $default) {
- box-shadow: $x-axis $y-axis $blur $color;
- -webkit-box-shadow: $x-axis $y-axis $blur $color;
- -moz-box-shadow: $x-axis $y-axis $blur $color;
- -o-box-shadow: $x-axis $y-axis $blur $color;
-}
-
-/* Improve focus management for interactive elements */
-[role="button"]:focus,
-[role="link"]:focus,
-button:focus,
-a:focus {
- outline: 2px solid var(--color-primary);
- outline-offset: 2px;
- box-shadow: 0 0 0 1px var(--color-background);
-}
-/* Enhanced error message accessibility */
-[role="alert"] {
- padding: var(--spacing-md);
- border: 2px solid var(--color-error);
- border-radius: var(--border-radius-base);
- background-color: rgba(176, 0, 32, 0.1);
- margin: var(--spacing-md) 0;
-}
-
-/* Success message styling */
-[role="status"] {
- padding: var(--spacing-md);
- border: 2px solid var(--color-success);
- border-radius: var(--border-radius-base);
- background-color: rgba(0, 200, 83, 0.1);
- margin: var(--spacing-md) 0;
-}
-
-th {
- background-color: var(--color-section-bg);
- font-weight: 600;
- text-align: left;
- padding: var(--spacing-sm);
-}
-
-/* Focus trap for modals */
-.focus-trap {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 9999;
- background: rgba(0, 0, 0, 0.5);
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-/* Enhanced button accessibility */
-button, [role="button"] {
- cursor: pointer;
- border: none;
- border-radius: var(--border-radius-base);
- padding: var(--spacing-sm) var(--spacing-md);
- min-height: var(--min-touch-target);
- min-width: var(--min-touch-target);
- font-size: var(--font-size-base);
- font-weight: 600;
- transition: all var(--animation-duration) ease;
- position: relative;
-}
-
-button:disabled, [role="button"][aria-disabled="true"] {
- opacity: 0.6;
- cursor: not-allowed;
- pointer-events: none;
-}
-
-/* Loading indicator accessibility */
-.loading-spinner {
- width: 40px;
- height: 40px;
- border: 3px solid var(--color-border-pale);
- border-top: 3px solid var(--color-primary);
- border-radius: 50%;
- animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-}
-
-@media (prefers-reduced-motion: reduce) {
- .loading-spinner {
- animation: none;
- border-top-color: var(--color-primary);
- }
-}
-/* copied from profile-pane */
-@media (prefers-reduced-motion: reduce) {
- *, *::before, *::after {
- animation-duration: 0.01ms !important;
- animation-iteration-count: 1 !important;
- transition-duration: 0.01ms !important;
- scroll-behavior: auto !important;
- }
-}
-@media (prefers-contrast: high) {
- :root {
- --color-border-pale: #000;
- --box-shadow: 0 2px 4px rgba(0,0,0,0.5);
- --box-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
- }
-}
-/* end of media copied from PROFILE-PANE */
-/* focus copied from profile-pane */
-:focus {
- outline: 2px solid var(--color-primary);
- outline-offset: 1px;
- box-shadow: 0 0 0 1px var(--color-background);
-}
-
-/* Enhanced keyboard navigation */
-*:focus-visible {
- outline: var(--focus-indicator-width) solid var(--color-primary);
- outline-offset: 2px;
- box-shadow: 0 0 0 1px var(--color-background), 0 0 0 4px rgba(124, 77, 255, 0.2);
- border-radius: 2px;
- transition: none; /* Remove transitions on focus for immediate feedback */
-}
-
-:focus-visible {
- outline: var(--focus-ring-width, 2px) solid var(--color-primary, #7C4DFF);
- outline-offset: 2px;
- box-shadow: 0 0 0 1px var(--color-background, #F8F9FB);
-}
-
-:focus:not(:focus-visible) {
- outline: none;
- box-shadow: none; /* new */
-}
-
-/* Prevent labels from appearing focusable to keyboard users. */
-label:focus,
-label:focus-visible {
- outline: none !important;
- box-shadow: none !important;
-}
-
-/* end of focus copied from profile-pane */
-
-/* end of accessibility from PROFILE-PANE */
-
-/* Generated by AI */
-@media screen and (max-width: 768px) {
- #PageHeader,
- #PageFooter {
- width: 100%;
- }
-
- img.outlineImage,
- img.pic,
- img.foafPic {
- height: auto;
- max-width: 100%;
- }
-
- div.description,
- div.premises,
- div.justification,
- div.mildNotice {
- box-sizing: border-box;
- margin-left: 0;
- margin-right: 0;
- width: 100%;
- }
-}
-
-html[data-layout="mobile"] #PageBody {
- min-height: auto;
-}
-
-html[data-layout="mobile"] #MainContent {
- overscroll-behavior: x contain;
-}
-
-/* END of Generated by AI */
\ No newline at end of file
+box-shadow: $x-axis $y-axis $blur $color;
+-webkit-box-shadow: $x-axis $y-axis $blur $color;
+-moz-box-shadow: $x-axis $y-axis $blur $color;
+-o-box-shadow: $x-axis $y-axis $blur $color;
+}
\ No newline at end of file
diff --git a/src/styles/mashlib-style.ts b/src/styles/mashlib-style.ts
new file mode 100644
index 00000000..b0ab56bd
--- /dev/null
+++ b/src/styles/mashlib-style.ts
@@ -0,0 +1,17 @@
+export interface MashStyle {
+ dbLayout: string;
+ dbLayoutContent: string;
+ dbLayoutHeader: string;
+ dbLayoutFooter: string;
+ setStyle: (ele: HTMLElement, styleName: keyof Omit) => void;
+}
+
+export const mashStyle: MashStyle = {
+ dbLayout: 'display: flex; flex-direction: column;',
+ dbLayoutContent: 'flex: 1 0 auto;',
+ dbLayoutHeader: 'flex-shrink: 0;',
+ dbLayoutFooter: 'flex-shrink: 0;',
+ setStyle: function setStyle(ele: HTMLElement, styleName: keyof Omit) {
+ ele.setAttribute('style', mashStyle[styleName])
+ }
+}
\ No newline at end of file
diff --git a/src/styles/themes.css b/src/styles/themes.css
deleted file mode 100644
index 4615b259..00000000
--- a/src/styles/themes.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
-** ------SolidOS Themes------
-** Theme variables for light and dark modes
-*/
-
-@import url('./themes/light.css');
-/* @import url('./themes/dark.css'); */
-
diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css
deleted file mode 100644
index a8f444b4..00000000
--- a/src/styles/themes/dark.css
+++ /dev/null
@@ -1,270 +0,0 @@
-/*
-** Dark Theme
-** Dark color scheme for SolidOS with high contrast and reduced eye strain
-*/
-
-html[data-theme="dark"] {
- /* Background and Text */
- --color-background: #1e1e1e;
- --color-text: #e0e0e0;
- --color-text-secondary: var(--gray-400, #99A1AF);
- --color-text-subheading: var(--gray-100, #F3F4F6);
- --color-text-detail: var(--gray-300, #D1D5DC);
- --color-text-empty-state: var(--gray-200, #E5E7EB);
- --color-icon-muted: var(--gray-400, #99A1AF);
- --color-text-overlay: var(--gray-100, #F3F4F6);
- --color-text-accent-subtle: var(--gray-100, #F3F4F6);
- --color-text-strong: var(--gray-100, #F3F4F6);
- --color-text-strong-secondary: var(--gray-200, #E5E7EB);
- --color-text-light: #555;
- --color-text-ui: var(--gray-800, #1E2939);
- --color-text-control: var(--gray-100, #F3F4F6);
- --color-text-primary: var(--gray-300, #D1D5DC);
- --color-text-link: #66b3ff;
- --color-text-link-visited: #66b3ff;
- --color-text-link-hover: #66b3ff;
- --color-text-link-active: #aaa;
- --color-text-answer: #66b3ff;
- --color-text-muted: #bbb;
- --color-text-dark-gray: #d4d4d4;
- --color-text-blue: #7cb9ff;
- --color-text-brown: #c4a660;
-
- /* Button colors */
- --color-surface-action: var(--color-primary, #B388FF);
- --color-surface-action-hover: #c39cff;
- --color-surface-accent-subtle: var(--grey-purple-900, #332746);
- --color-surface-accent-subtle-hover: var(--grey-purple-700, #5e546d);
- --color-surface-overlay: var(--gray-800, #1E2939);
- --color-surface-overlay-header: var(--gray-900, #101828);
- --color-surface-tertiary: var(--gray-800, #1E2939);
- --color-surface-tertiary-hover: var(--gray-900, #101828);
- --color-surface-chip: var(--color-card-bg, #2a2a2a);
- --color-surface-framed-content: var(--color-card-bg, #2a2a2a);
- --color-surface-placeholder: var(--gray-700, #364153);
- --color-surface-subtle: rgba(255, 255, 255, 0.08);
- --color-text-on-action: var(--gray-900, #101828);
- --color-border-muted: var(--color-border-light, #666);
- --color-border-action: var(--color-primary, #B388FF);
- --color-focus-ring: var(--color-primary, #B388FF);
- --color-focus-gap: var(--gray-900, #101828);
- --dialog-cancel-button-background: transparent;
- --dialog-cancel-button-text: var(--gray-100, #F3F4F6);
- --dialog-cancel-button-border: var(--color-border-light, #666);
- --dialog-cancel-button-hover-background: var(--color-primary, #B388FF);
- --dialog-cancel-button-hover-text: var(--color-text-on-action, #1e1e1e);
- --dialog-cancel-button-hover-border: var(--color-primary, #B388FF);
-
- /* Error dialog box colors */
- --dialog-error-background: rgba(176, 0, 32, 0.18);
- --dialog-error-border: rgba(255, 118, 154, 0.5);
- --dialog-error-text: #ffbbcd;
-
- /* Header */
- --color-header-row-bg: var(--grey-purple-900, #332746);
- --color-header-text: var(--white, #fff);
- --color-header-menu-separator-line: var(--slate-200, #E2E8F0);
- --color-header-menu-item-hover: var(--lavender-300, #e6dcff);
- --color-header-menu-item-selected: var(--lavender-400, #cbb9ff);
- --color-header-menu-loggedin-bg: var(--grey-purple-700, #5e546d);
- --color-header-button-text: var(--slate-900, #0F172B);
- --color-header-button-detail-text: var(--gray-400, #99A1AF);
- --color-header-shadow: 2px 6px 10px 0 rgba(0, 0, 0, 0.4), 2px 8px 24px 0 rgba(0, 0, 0, 0.19);
-
- /* Borders */
- --color-border: #444;
- --color-border-dark: #555;
- --color-border-darker: var(--gray-800, #1E2939);
- --color-border-light: #666;
- --color-border-lighter: var(--gray-700, #364153);
- --color-border-subtle: var(--gray-700, #364153);
- --color-border-pale: #555;
- --color-border-accent: #9999dd;
- --color-border-button: var(--gray-700, #364153);
- --color-border-button-hover: var(--gray-600, #4A5565);
-
- /* Status Colors */
- --color-selected-bg: #4a6e3a;
- --color-warning: #ff6b6b;
- --color-success-bg: #2a5f2a;
- --color-success-border: #4db84d;
- --color-failure-bg: #3a3a3a;
- --color-failure-border: #ff6b6b;
-
- /* Info and Alert Colors */
- --color-info-bg: #2a2a5a;
- --color-info-border: #6699ff;
- --color-alert-bg: #5a5a2a;
- --color-alert-border: #ccaa00;
- --color-fetch-bg: #2a5a2a;
- --color-request-bg: #6b6b00;
- --color-error-bg: #3a3a3a;
- --color-error-notice-bg: #5a3a3a;
- --color-unparseable-bg: #6b5a00;
-
- /* Component Colors */
- --color-container-border: #555;
- --color-iframe-bg: #2a2a2a;
- --color-main-block-bg: #252525;
- --color-nav-block-bg: #2a2a2a;
- --color-nav-block-border: #555;
- --color-category-bg: #1f2b1f;
- --color-category-border: #555;
- --color-category-class-bg: #2a5f2a;
- --color-category-class-border: #4db84d;
- --color-pubs-pane-bg: #3a3a2a;
- --color-pubs-pane-border: #555;
- --color-cv-pane-bg: #1f4a5a;
-
- /* Data Content Pane */
- --color-data-pane-border-top: #888;
- --color-data-pane-border-side: #555;
- --color-table-header-bg: #2a3a5a;
- --color-table-result-bg: #252525;
- --color-table-border-dark: #555;
-
- /* Notification Colors */
- --color-log-normal: #e0e0e0;
- --color-log-info: #e0e0e0;
- --color-log-warn: #e0e0e0;
- --color-log-warn-bg: #5a5a2a;
- --color-log-error: #e0e0e0;
- --color-log-error-bg: #5a3a3a;
- --color-log-message: #66bb66;
- --color-log-debug: #e0e0e0;
- --color-log-debug-bg: #2a3a5a;
-
- /* Suggestion List */
- --color-suggestion-bg: #2a2a2a;
- --color-suggestion-border: #4db8ff;
- --color-suggestion-link: #4db8ff;
- --color-suggestion-selected-bg: #4db8ff;
- --color-suggestion-selected-text: #1e1e1e;
-
- /* Photo Pane */
- --color-photo-border: #555;
- --color-photo-tag-highlight: #2a4a7a;
- --color-photo-tag-highlight-border: #5a6b4a;
- --color-photo-thumb-border: #444;
-
- /* Menu and Tab Colors */
- --color-menu-bg: #2a2a2a;
- --color-menu-item-text: #c4b4d4;
- --color-menu-item-active: #4a5a7a;
- --color-view-tab-bg: #252525;
- --color-view-window-bg: #3a3a3a;
- --color-query-select-bg: #3a3a3a;
- --color-tab-inactive-bg: #2a2a2a;
- --color-tab-inactive-border: #444;
- --color-tab-inactive-border-light: #555;
- --color-tab-inactive-text: #6b7baa;
- --color-tab-active-bg: #3a3a3a;
- --color-tab-active-border: #444;
- --color-tab-active-border-light: #555;
- --color-tab-active-text: #66b3ff;
-
- /* Special Highlights */
- --color-source-highlight: #6b6b00;
- --color-hover-visibility: visible;
- --color-hidden-visibility: hidden;
- --color-mild-notice-bg: #3a3a2a;
- --color-bottom-border-highlight: rgb(60%,80%,100%);
- --color-col-close: #555;
- --color-sort-arrow: #555;
-
- /* Typography */
- --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
- --font-family-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
- --font-size-base: 100%;
- --font-size-strong: 120%;
- --font-weight-normal: normal;
- --font-weight-bold: bold;
- --line-height-base: 1.5;
- --line-height-tight: 1.4;
- --line-height-loose: 1.6;
- --letter-spacing-wide: 0.025em;
- --font-size-sm: 0.875rem;
- --font-size-lg: 1.125rem;
- --font-size-xl: 1.25rem;
-
- /* Spacing and Sizing */
- --spacing-tiny: 0.05em;
- --spacing-small: 0.1em;
- --spacing-xxxs: 0.2em;
- --spacing-xxs: 0.3em;
- --spacing-xs: 0.5rem;
- --spacing-sm: 0.75em;
- --spacing-btn: 0.7em;
- --spacing-base: 0.5em;
- --spacing-md: 1em;
- --spacing-lg: 1.5em;
- --spacing-xl: 2em;
- --spacing-2xl: 3em;
- --border-width-xthin: 0.05em;
- --border-width-sm: 0.1em;
- --border-width-thin: 1px;
- --border-width-medium: 2px;
- --border-width-bold: 5px;
- --border-radius-xs: 0.1em;
- --border-radius-sm: 0.2em;
- --border-radius-base: 0.5em;
- --border-radius-lg: 0.75em;
- --border-radius-full: 1em;
-
- /* Primary/Accent Colors */
- --color-primary: #B388FF;
- --color-secondary: #4FC3F7;
- --color-accent: #FFE082;
- --color-error: #FF5252;
- --color-success: #69F0AE;
- --color-primary-alpha: rgba(124, 77, 255, 0.35);
- --color-primary-alpha-light: rgba(124, 77, 255, 0.15);
-
- /* Card/Section Backgrounds */
- --color-card-bg: #2a2a2a;
- --color-section-bg: #1a1a1a;
- --color-zebra-stripe: rgba(255, 255, 255, 0.03);
- --color-hover-bg: rgba(255, 255, 255, 0.08);
-
- /* Shadows */
- --box-shadow: 0 2px 8px rgba(0,0,0,0.3);
- --box-shadow-sm: 0 1px 4px rgba(0,0,0,0.2);
- --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.3);
- --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.35);
- --box-shadow-focus-accessible: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha);
- --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.3);
- --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.5);
- --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.4);
- --box-shadow-popup: 0 0.5em 0.9em rgba(0, 0, 0, 0.4);
-
- /* Accessibility */
- --min-touch-target: 44px;
- --focus-ring-width: 2px;
- --focus-indicator-width: 3px;
- --animation-duration: 0.2s;
- --animation-duration-slow: 0.3s;
- --min-font-size: 14px;
- --min-line-height: 1.4;
- --high-contrast-ratio: 7:1;
-
- /* Overlay and Modal */
- --overlay-bg: rgba(0, 0, 0, 0.7);
- --overlay-bg-muted: rgba(0, 0, 0, 0.5);
- --z-index-modal: 9999;
- --z-index-skip-links: 1000;
-
- /* Opacity */
- --opacity-disabled: 0.6;
- --opacity-input-disabled: 0.75;
-
- /* Layout Values */
- --max-width-readable: 65ch;
- --max-width-readable-wide: 70ch;
- --grid-min-column: 30em;
-
- /* Outline Offsets */
- --outline-offset-sm: 2px;
-
- /* Success Alpha */
- --color-success-alpha: rgba(105, 240, 174, 0.15);
-}
diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css
deleted file mode 100644
index d627e4a5..00000000
--- a/src/styles/themes/light.css
+++ /dev/null
@@ -1,358 +0,0 @@
-/*
-** Light Theme (Default)
-** Default color scheme for SolidOS
-*/
-
-:root {
- /* New Design: Colors (possibly change to primary secondary etc for now add here */
- /* Adding used for comment so we can decide later */
- --blue-900: #083575;
- --gray-50: #F9FAFB; /* Used for: background of dialog buttons */
- --gray-100: #F3F4F6;
- --gray-200: #E5E7EB; /* Used for: border of sections */
- --gray-300: #D1D5DC; /* Used for: text */
- --gray-400: #99A1AF; /* Used for: input borders */
- --gray-500: #6A7282; /* Used for: text */
- --gray-600: #4A5565; /* Used for: text */
- --gray-700: #364153; /* Used for: text */
- --gray-800: #1E2939; /* Used for: text */
- --gray-900: #101828; /* Used for: text */
- --purple-500: #AD46FF;
- --red-600: #B00020; /* Used for: error text */
- --slate-50: #F8FAFC;
- --slate-200: #E2E8F0; /* Used for: border of sections */
- --slate-400: #90A1B9; /* Used for: edit dialog cancel */
- --slate-500: #62748E; /* Used for: text */
- --slate-700: #314158; /* Used for: side menu bar text */
- --slate-800: #1D293D; /* Used for: text and top header background */
- --slate-900: #0F172B; /* Used for: text */
- --utility-colours-body-grey: #666; /* used in header drop down behind the picture */
- --lavender-200: #E4DBFE; /* background of Follow button and side menu active button */
- --lavender-300: #e6dcff;
- --lavender-400: #cbb9ff;
- --lavender-500: #b295ff;
- --lavender-700: #9672ff;
- --lavender-900: #7c4cff;
- --grey-purple-200: #d8d6db;
- --grey-purple-300: #b1acb7;
- --grey-purple-500: #878192;
- --grey-purple-700: #5e546d;
- --grey-purple-900: #332746; /* Used for: header background */
- --orange-200: #ffefdd;
- --orange-300: #ffdeba;
- --orange-400: #ffce97;
- --orange-500: #ffbd74;
- --orange-600: #ffad4f;
- --pink-500: #ffdde6;
- --pink-600: #ffbbcd;
- --pink-700: #ff98b3;
- --pink-800: #ff769a;
- --pink-900: #ff5180;
- --yellow-700: #A65F00;
- --black: #000; /* Used for: text heading */
- --white: #FFF;
-
-
- /* Button colors */
- --color-surface-action: var(--color-primary, #7C4DFF);
- --color-surface-action-hover: #6d3cf2;
- --color-surface-accent-subtle: var(--lavender-300, #e6dcff);
- --color-surface-accent-subtle-hover: var(--lavender-200, #E4DBFE);
- --color-surface-overlay: var(--white, #FFF);
- --color-surface-overlay-header: var(--slate-50, #F8FAFC);
- --color-surface-tertiary: var(--gray-50, #F9FAFB);
- --color-surface-tertiary-hover: var(--gray-100, #F3F4F6);
- --color-surface-chip: var(--gray-100, #F3F4F6);
- --color-surface-framed-content: var(--color-surface-tertiary-hover, var(--gray-100, #F3F4F6));
- --color-surface-subtle: rgba(15, 23, 43, 0.04);
- --color-text-on-action: var(--white, #FFF);
- --color-border-muted: var(--gray-300, #D1D5DC);
- --color-border-action: var(--color-primary, #7C4DFF);
- --color-focus-ring: var(--color-primary, #7C4DFF);
- --color-focus-gap: var(--white, #FFF);
- --dialog-cancel-button-background: transparent;
- --dialog-cancel-button-text: var(--gray-800, #1E2939);
- --dialog-cancel-button-border: var(--gray-300, #D1D5DC);
- --dialog-cancel-button-hover-background: var(--blue-900, #083575);
- --dialog-cancel-button-hover-text: var(--white, #FFF);
- --dialog-cancel-button-hover-border: var(--blue-900, #083575);
-
- /* Error dialog box colors */
- --dialog-error-background: var(--pink-500, #ffdde6);
- --dialog-error-border: var(--pink-700, #ff98b3);
- --dialog-error-text: var(--red-600, #B00020);
-
- /* Background and Text */
- --color-background-old: #FFFFFF; /* White */
- --color-background: #F8F9FB; /* Light grey for overall background */
- --color-background-row-default: white;
- --color-background-row-alternate: #f0f0f0;
- --color-text: #1A1A1A; /* Used in login button */
- --color-text-ui: var(--gray-100, #F3F4F6);
- --color-text-primary: var(--gray-700, #364153); /* new design */
- --color-text-control: var(--slate-700, #314158);
- --color-text-secondary-old: #666;
- --color-text-secondary: var(--gray-600, #4A5565);
- --color-text-heading: var(--black, #000000); /* New design uses pure black for headings */
- --color-text-subheading: var(--gray-900, #101828); /* new design */
- --color-text-overlay: var(--gray-800, #1E2939);
- --color-text-accent-subtle: var(--color-text-control, var(--slate-700, #314158));
- --color-text-strong: var(--slate-900, #0F172B); /* new design */
- --color-text-strong-secondary: var(--slate-800, #1D293D); /* new design */
- --color-text-detail: var(--slate-500, #62748E);
- --color-text-empty-state: var(--gray-400, #99A1AF);
- --color-icon-muted: var(--slate-400, #90A1B9);
- --color-text-light: #aaa;
- --color-text-link: #3B5998;
- --color-text-link-visited: #3B5998;
- --color-text-link-hover: #3B5998;
- --color-text-link-active: #888;
- --color-text-answer: #00c;
- --color-text-muted: #444;
- --color-text-dark-gray: #202;
- --color-text-blue: #004;
- --color-text-brown: #440;
-
- /* Header */
- --color-header-row-bg: var(--grey-purple-900, #332746);
- --color-header-text: var(--white, #fff);
- --color-header-menu-separator-line: var(--slate-200, #E2E8F0);
- --color-header-menu-item-hover: var(--lavender-300, #e6dcff);
- --color-header-menu-item-selected: var(--lavender-400, #cbb9ff);
- --color-header-menu-loggedin-bg: var(--grey-purple-700, #5e546d);
- --color-header-button-text: var(--slate-900, #0F172B);
- --color-header-button-detail-text: var(--gray-400, #99A1AF);
- --color-header-shadow: 2px 6px 10px 0 rgba(0, 0, 0, 0.4), 2px 8px 24px 0 rgba(0, 0, 0, 0.19);
-
- /* Borders */
- --color-border: var(--gray-200, #E5E7EB); /* Used in login button */
- --color-border-lighter: var(--slate-200, #E2E8F0);
- --color-border-dark: #777;
- --color-border-darker: var(--gray-600, #4A5565); /* old #444 */
- --color-border-light: #aaa;
- --color-border-subtle: var(--gray-100, #F3F4F6);
- --color-border-pale: #eee;
- --color-border-accent: #88c;
- --color-border-button: var(--gray-300, #D1D5DC);
- --color-border-button-hover: var(--gray-400, #99A1AF);
-
- /* Status Colors */
- --color-selected-bg: var(--lavender-300, #e6dcff);
- --color-warning: var(--red-600, #B00020);
- --color-success-bg: #dfd;
- --color-success-border: green;
- --color-failure-bg: white;
- --color-failure-border: var(--red-600, #B00020);
-
- /* Info and Alert Colors */
- --color-info-bg: #ccccff;
- --color-info-border: #3399ff;
- --color-alert-bg: #ffffdd;
- --color-alert-border: yellow;
- --color-fetch-bg: #eeffee;
- --color-request-bg: yellow;
- --color-error-bg: white;
- --color-error-notice-bg: #fee;
- --color-unparseable-bg: #ffcc00;
-
- /* Component Colors */
- --color-container-border: black;
- --color-iframe-bg: white;
- --color-main-block-bg: #fff;
- --color-nav-block-bg: #eee;
- --color-nav-block-border: gray;
- --color-category-bg: #f8fff8;
- --color-category-border: #777777;
- --color-category-class-bg: #efe;
- --color-category-class-border: green;
- --color-pubs-pane-bg: #F2F6DA;
- --color-pubs-pane-border: #777777;
- --color-cv-pane-bg: LightSkyBlue;
-
- /* Data Content Pane */
- --color-data-pane-border-top: black;
- --color-data-pane-border-side: #777;
- --color-table-header-bg: #ddf;
- --color-table-result-bg: #fff;
- --color-table-border-dark: #777;
-
- /* Notification Colors */
- --color-log-normal: black;
- --color-log-info: black;
- --color-log-warn: black;
- --color-log-warn-bg: #ffd;
- --color-log-error: black;
- --color-log-error-bg: #fdd;
- --color-log-message: green;
- --color-log-debug: black;
- --color-log-debug-bg: #ddf;
-
- /* Suggestion List */
- --color-suggestion-bg: white;
- --color-suggestion-border: navy;
- --color-suggestion-link: navy;
- --color-suggestion-selected-bg: navy;
- --color-suggestion-selected-text: white;
-
- /* Photo Pane */
- --color-photo-border: #AAAAAA;
- --color-photo-tag-highlight: #DDEEFF;
- --color-photo-tag-highlight-border: #DDBB99;
- --color-photo-thumb-border: #CCCCCC;
-
- /* Menu and Tab Colors */
- --color-menu-bg: #FFFFFF;
- --color-menu-item-text: #654d6c;
- --color-menu-item-active: #D1C6DA; /* can be replaced with --color-header-menu-item-selected? */
- --color-view-tab-bg: #fff;
- --color-view-window-bg: #ccc;
- --color-query-select-bg: #ccc;
- --color-tab-inactive-bg: #eee;
- --color-tab-inactive-border: #ddd;
- --color-tab-inactive-border-light: #aaa;
- --color-tab-inactive-text: #99f;
- --color-tab-active-bg: #ccc;
- --color-tab-active-border: #ddd;
- --color-tab-active-border-light: #aaa;
- --color-tab-active-text: #22f;
-
- /* Special Highlights */
- --color-source-highlight: yellow;
- --color-hover-visibility: visible;
- --color-hidden-visibility: hidden;
- --color-mild-notice-bg: #ffe;
- --color-bottom-border-highlight: rgb(100%,65%,0%);
- --color-col-close: #aaa;
- --color-sort-arrow: #aaa;
- --color-pending-edit: #bbb;
-
- /* Typography */
- --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
- --font-family-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
- --font-size-base-old: 100%;
- --font-size-base: 1rem; /* 16px */
- --font-size-strong: 120%;
- --font-weight-normal: normal;
- --font-weight-md: 500; /* New design uses 500 for body text was normal */
- --font-weight-bold-old: bold;
- --font-weight-bold: 600; /* New design uses 600 for headings was 700 */
- --font-weight-xbold: 700; /* New design uses 700 for strong text was bold */
- --line-height-base: 1.5;
- --line-height-tight: 1.4;
- --line-height-loose: 1.6;
- --letter-spacing-wide: 0.025em;
- --font-size-xxs: 0.75rem; /* 12px */
- --font-size-xs: 0.813rem; /* 13px */
- --font-size-sm: 0.875rem; /* 14px */
- --font-size-md: 1rem; /* 16px */
- --font-size-lg: 1.125rem; /* 18px */
- --font-size-xl-old: 1.25rem; /* 20px */
- --font-size-xl: 1.375rem; /* 22px */
- --font-size-xxl: 1.75rem; /* 28px */
-
- /* Spacing and Sizing */
- --spacing-tiny: 0.05rem;
- --spacing-small: 0.1rem;
- --spacing-xxxs: 0.2rem; /* was em */
- --spacing-xxs-old: 0.3rem; /* was em */
- --spacing-xxs: 0.3125rem; /* 5px */
- --spacing-2xs: 0.625rem; /* 10px new design uses this */
- --spacing-xs-old: 0.5rem;
- --spacing-xs: 0.75rem; /* 12px new design uses this */
- --spacing-sm-old: 0.75rem; /* was em */
- --spacing-sm: 0.938rem; /* 15px new design uses this */
- --spacing-btn: 0.7rem; /* was em */
- --spacing-base: 0.5rem; /* was em */
- --spacing-md-old: 1rem; /* was em */
- --spacing-md: 1.25rem; /* 20px new design uses this */
- --spacing-lg-old: 1.5rem; /* was em */
- --spacing-lg: 1.5625rem; /* 25px new design uses this */
- --spacing-xl: 2rem; /* was em */
- --spacing-1xl: 2.5rem; /* 40px new design uses this */
- --spacing-2xl: 3rem; /* was em */
- --border-width-xthin: 0.05rem; /* was em */
- --border-width-thin-old: 1px;
- --border-width-thin: 0.1rem; /* changed from 1px */
- --border-width-sm: 0.1rem; /* was em */
- --border-width-medium: 2px;
- --border-width-bold: 5px;
-
-
- --border-radius-xs: 0.1rem; /* 2px Extra small border radius was em */
- --border-radius-sm: 0.2rem; /* 4px Small border radius was em */
- --border-radius-base-old: 0.5em;
- --border-radius-base: 0.3125rem; /* 5px Base border radius */
- --border-radius-md: 0.5rem; /* 8px Medium border radius */
- --border-radius-lg: 0.75rem; /* 12px Large border radius was em */
- --border-radius-full-old: 1em;
- --border-radius-full: 0.625rem; /* 10px */
-
-
- /* icons */
- --icon-xxxs: 0.75rem; /* 12px new design uses this */
- --icon-xxs: 1rem; /* 16px new design uses this */
- --icon-xs: 1.5rem; /* 24px new design uses this */
- --icon-sm: 1.8rem; /* 28px new design uses this */
- --icon-base: 2rem; /* 32px new design uses this */
- --icon-md: 2.5rem; /* 40px new design uses this */
- --icon-xl: 3.1rem; /* 50px new design uses this */
-
- /* Primary/Accent Colors */
- --color-primary: #7C4DFF;
- --color-primary-alpha: rgba(124, 77, 255, 0.25);
- --color-primary-alpha-light: rgba(124, 77, 255, 0.1);
- --color-secondary: #0077B6;
- --color-accent: #FFD600;
- --color-error: #B00020; /* Used in login button */
- --color-success: #00C853;
-
- /* Card/Section Backgrounds */
- --color-section-bg-old: #F5F5F5; /* Light grey for outer sections */
- --color-section-bg: #FFFFFF; /* White for outer sections to match new design */
-
- --color-card-bg: #FFFFFF; /* White for inner cards */
- --color-zebra-stripe: rgba(0, 0, 0, 0.02);
- --color-hover-bg: rgba(0, 0, 0, 0.05);
-
- /* Shadows */
- --box-shadow: 0 2px 8px rgba(124,77,255,0.08);
- --box-shadow-sm: 0 1px 4px rgba(124,77,255,0.12); /* Used in login button */
- --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.2);
- --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.25);
- --box-shadow-focus-accessible: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha);
- --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.2);
- --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.3);
- --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.2);
- --box-shadow-popup: 0 0.5em 0.9em rgba(0, 0, 0, 0.2);
-
- /* Accessibility */
- --min-touch-target: 44px;
- --focus-ring-width: 2px;
- --focus-indicator-width: 3px;
- --animation-duration: 0.2s;
- --animation-duration-slow: 0.3s;
- --min-font-size: 14px;
- --min-line-height: 1.4;
- --high-contrast-ratio: 7:1; /* WCAG AAA standard */
-
- /* Overlay and Modal */
- --overlay-bg: rgba(0, 0, 0, 0.5);
- --overlay-bg-muted: rgba(0, 0, 0, 0.3);
- --z-index-modal: 9999;
- --z-index-skip-links: 1000;
-
- /* Opacity */
- --opacity-disabled: 0.6;
- --opacity-input-disabled: 0.75;
-
- /* Layout Values */
- --max-width-readable: 65ch;
- --max-width-readable-wide: 70ch;
- --grid-min-column: 30em;
-
- /* Outline Offsets */
- --outline-offset-sm: 2px;
-
- /* Success Alpha */
- --color-success-alpha: rgba(0, 200, 83, 0.1);
-}
diff --git a/src/theme.ts b/src/theme.ts
deleted file mode 100644
index fe2052b4..00000000
--- a/src/theme.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { ThemeMode } from 'pane-registry'
-
-const THEME_STORAGE_KEY = 'mashlib-theme'
-
-const applyTheme = (theme: ThemeMode) => {
- if (theme === 'dark') {
- document.documentElement.setAttribute('data-theme', 'dark')
- } else {
- document.documentElement.removeAttribute('data-theme')
- }
-
- window.dispatchEvent(new CustomEvent('mashlib:themechange', {
- detail: { theme }
- }))
-}
-
-const initializeTheme = () => {
- const savedTheme = localStorage.getItem(THEME_STORAGE_KEY)
- const prefersDark = typeof window.matchMedia === 'function'
- ? window.matchMedia('(prefers-color-scheme: dark)').matches
- : false
- const theme = (
- savedTheme === 'dark' || savedTheme === 'light'
- ? savedTheme
- : prefersDark
- ? 'dark'
- : 'light'
- ) as ThemeMode
-
- applyTheme(theme)
-}
-
-const setTheme = (theme: ThemeMode) => {
- applyTheme(theme)
- localStorage.setItem(THEME_STORAGE_KEY, theme)
-}
-
-const getTheme = (): ThemeMode => {
- return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
-}
-
-export const theme = {
- get: getTheme,
- init: initializeTheme,
- set: setTheme
-}
diff --git a/static/bookmark-test.html b/static/bookmark-test.html
new file mode 100644
index 00000000..bafe035d
--- /dev/null
+++ b/static/bookmark-test.html
@@ -0,0 +1,89 @@
+
+
+
+
+ Bookmark Pane Test
+
+
+
+
+ Bookmark Pane Test
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/browse-test.html b/static/browse-test.html
index d45cd98d..2ef6e111 100644
--- a/static/browse-test.html
+++ b/static/browse-test.html
@@ -2,18 +2,6 @@
-
-
-