diff --git a/babel.config.mjs b/babel.config.mjs index d5db5463..85813868 100644 --- a/babel.config.mjs +++ b/babel.config.mjs @@ -1,11 +1,12 @@ export default { + sourceType: 'unambiguous', presets: [ ['@babel/preset-env', { targets: { browsers: ['> 1%', 'last 3 versions', 'not dead'] } }], - '@babel/preset-typescript' + '@babel/preset-typescript', ], plugins: [ [ diff --git a/dev/dev-light.css b/dev/dev-light.css new file mode 100644 index 00000000..59d69a0a --- /dev/null +++ b/dev/dev-light.css @@ -0,0 +1,202 @@ +/* ---ONLY FOR LOCAL DEV--- */ +/* ---final version is in mashlib--- */ + + +/* +** Light Theme (Default) +** Default color scheme for SolidOS +*/ + +:root { + /* Background and Text */ + --color-background: white; + --color-text: ##1A1A1A; + --color-text-secondary: #666; + --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; + + /* Borders */ + --color-border: #ccc; + --color-border-dark: #777; + --color-border-darker: #444; + --color-border-light: #aaa; + --color-border-pale: #eee; + + /* Status Colors */ + --color-selected-bg: #8F3; + --color-warning: red; + --color-success-bg: #dfd; + --color-success-border: green; + --color-failure-bg: white; + --color-failure-border: red; + + /* 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; + --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: 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-xs: 0.5rem; + --spacing-sm: 0.75em; + --spacing-base: 0.5em; + --spacing-md: 1em; + --spacing-lg: 1.5em; + --spacing-xl: 2em; + --spacing-2xl: 3em; + --border-width-thin: 1px; + --border-width-medium: 2px; + --border-width-bold: 5px; + --border-radius-base: 0.5em; + --border-radius-lg: 0.75em; + --border-radius-full: 1em; + + /* 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; + --color-success: #00C853; + + /* Card/Section Backgrounds */ + --color-card-bg: #FFFFFF; + --color-section-bg: #F5F5F5; + --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); + + /* 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); + --z-index-modal: 9999; + --z-index-skip-links: 1000; + + /* Opacity */ + --opacity-disabled: 0.6; + + /* 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/dev/dev-mash-utilities.css b/dev/dev-mash-utilities.css new file mode 100644 index 00000000..7a476155 --- /dev/null +++ b/dev/dev-mash-utilities.css @@ -0,0 +1,691 @@ +/* ---ONLY FOR LOCAL DEV--- */ +/* ---final version is in mashlib--- */ + +/* =========================================== + 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; +} + +/* ARIA live regions - for dynamic content announcements */ +.live-region { + position: absolute; + left: -10000px; + width: 1px; + height: 1px; + overflow: hidden; +} + +/* Skip links for keyboard navigation */ +.skip-links { + position: absolute; + top: -100px; + left: 0; + z-index: var(--z-index-skip-links); +} + +.skip-links a { + position: absolute; + left: var(--spacing-xs); + top: var(--spacing-xs); + padding: var(--spacing-sm); + background: var(--color-primary); + color: var(--color-background); + text-decoration: none; + border-radius: var(--border-radius-base); +} + +.skip-links a:focus { + top: var(--spacing-xs); +} + +/* =========================================== + 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; + align-items: center; +} + +.flex-row { + display: flex; + flex-direction: row; +} + +.flex-wrap { + flex-wrap: wrap; +} + +.flex-1 { + flex: 1; +} + +.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-xs { gap: var(--spacing-xs); } +.gap-sm { gap: var(--spacing-sm); } +.gap-md { gap: var(--spacing-md); } +.gap-lg { gap: var(--spacing-lg); } +.gap-xl { gap: var(--spacing-xl); } + +/* Margin top */ +.mt-0 { margin-top: 0; } +.mt-xs { margin-top: var(--spacing-xs); } +.mt-sm { margin-top: var(--spacing-sm); } +.mt-md { margin-top: var(--spacing-md); } +.mt-lg { margin-top: var(--spacing-lg); } +.mt-xl { margin-top: var(--spacing-xl); } + +/* Margin bottom */ +.mb-0 { margin-bottom: 0; } +.mb-xs { margin-bottom: var(--spacing-xs); } +.mb-sm { margin-bottom: var(--spacing-sm); } +.mb-md { margin-bottom: var(--spacing-md); } +.mb-lg { margin-bottom: var(--spacing-lg); } +.mb-xl { margin-bottom: var(--spacing-xl); } + +/* Margin left */ +.ml-0 { margin-left: 0; } +.ml-xs { margin-left: var(--spacing-xs); } +.ml-sm { margin-left: var(--spacing-sm); } +.ml-md { margin-left: var(--spacing-md); } +.ml-lg { margin-left: var(--spacing-lg); } + +/* Margin right */ +.mr-0 { margin-right: 0; } +.mr-xs { margin-right: var(--spacing-xs); } +.mr-sm { margin-right: var(--spacing-sm); } +.mr-md { margin-right: var(--spacing-md); } +.mr-lg { margin-right: var(--spacing-lg); } + +/* Margin horizontal (left + right) */ +.mx-auto { margin-left: auto; margin-right: auto; } +.mx-xs { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); } +.mx-sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); } +.mx-md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); } + +/* Margin vertical (top + bottom) */ +.my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); } +.my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); } +.my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); } + +/* Padding */ +.p-0 { padding: 0; } +.p-xs { padding: var(--spacing-xs); } +.p-sm { padding: var(--spacing-sm); } +.p-md { padding: var(--spacing-md); } +.p-lg { padding: var(--spacing-lg); } +.p-xl { padding: var(--spacing-xl); } + +/* Padding top */ +.pt-xs { padding-top: var(--spacing-xs); } +.pt-sm { padding-top: var(--spacing-sm); } +.pt-md { padding-top: var(--spacing-md); } +.pt-lg { padding-top: var(--spacing-lg); } + +/* Padding bottom */ +.pb-xs { padding-bottom: var(--spacing-xs); } +.pb-sm { padding-bottom: var(--spacing-sm); } +.pb-md { padding-bottom: var(--spacing-md); } +.pb-lg { padding-bottom: var(--spacing-lg); } + +/* Padding horizontal */ +.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); } +.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); } +.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); } +.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); } + +/* Padding vertical */ +.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); } +.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); } +.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); } +.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); } + +/* =========================================== + 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 { font-size: var(--font-size-lg); } +.text-xl { font-size: var(--font-size-xl); } + +/* Text that respects accessibility guidelines */ +.text-readable { + line-height: var(--line-height-base); + max-width: var(--max-width-readable); +} + +.text-scale-friendly { + line-height: var(--line-height-base); + max-width: var(--max-width-readable-wide); +} + +/* 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); + font-weight: var(--font-weight-bold); +} + +/* 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); } +.rounded-sm { border-radius: var(--border-radius-base); } +.rounded-lg { border-radius: var(--border-radius-lg); } +.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) solid var(--color-border); } +.border-dark { border: var(--border-width-thin) solid var(--color-border-dark); } +.border-light { border: var(--border-width-thin) 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; +} + +/* 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; +} + +/* =========================================== + 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; } +.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/dev/dev-mash.css b/dev/dev-mash.css new file mode 100644 index 00000000..8aa75274 --- /dev/null +++ b/dev/dev-mash.css @@ -0,0 +1,1411 @@ +/* ---ONLY FOR LOCAL DEV--- */ +/* ---final version is in mashlib--- */ + +/* +** ------SolidOS Styles------ +** +*/ +@import url("./dev-light.css"); +@import url("./dev-mash-utilities.css"); + +/* 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; +} + +html { + height: 100%; + line-height: 1.15; +} +body { + height: 100%; + background-color: var(--color-background); + color: var(--color-text); + font-family: var(--font-family-base); +} + +/* Improved heading hierarchy */ +h1, h2, h3, h4, h5, h6 { + color: var(--color-primary); + font-weight: 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: 1.25em; } /* 20px */ +h4 { font-size: 1.125em; }/* 18px */ +h5, h6 { font-size: 1em; }/* 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; +} + +a:hover, a:focus { + text-decoration-thickness: 0.125em; +} + + +/* Main page elements in databrowser.html */ +#PageBody { + display: flex; + flex-direction: column; +} +#DummyUUID { + flex: 1 0 auto; +} +#PageHeader { + flex-shrink: 0; +} +#PageFooter { + flex-shrink: 0; +} + +.warning { + color: var(--color-warning); +} +.selected { + background-color: var(--color-selected-bg); +} + +.licOkay { + background-color: var(--color-success-bg); +} + +/* +** other potential colors for CC: +** #C4FF55. "faded" version of CC +** #486d00, actual CC +** #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); +} + +/* Map */ + +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); +} + +pre#status { + font-size: 100%; +} + +/* Panes */ +/* +td.internal { } + +/* Moved into code: +div.internalPane { background-color: #ddddff; padding: 0.5em; +border-radius: 1em; border-radius: .4em; } + +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; +} +/* +div.nonCompliantPane { + border-top: solid 1px red; + border-left: solid 1px red; + border-bottom: solid 1px red; + border-right: solid 1px red; + padding: 0.5em; + background-color: #fbf0f7; + margin-top: 0.5em; margin-bottom: 0.5em; + border-radius: 1em; +} + +div.compliantPane { + border-top: solid 1px green; + border-left: solid 1px green; + border-bottom: solid 1px green; + border-right: solid 1px green; + padding: 0.5em; + background-color: #def8e0; + margin-top: 0.5em; margin-bottom: 0.5em; + border-radius: 1em; +} +*/ +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; +} + +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%; +} + +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?*/ +} + +/* ***************** 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; +} + +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; +} /* Thumbnail of a fiend etc */ + +.friendBox .confirmed { + font-weight: bold; +} + +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; +} + +.navBlock { + background-color: var(--color-nav-block-bg); + 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; */ +} + +div.socialPane h2 { + color: var(--color-text-dark-gray); +} +div.socialPane h3 { + color: var(--color-text-dark-gray); +} + +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; +} + +/* 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; +} + +/******************* Exception Pane ******** +** +** A pane created when the loading of a pane +** throws an exception +**/ + +div.exceptionPane pre { + background-color: var(--color-error-notice-bg); +} + +/******************* 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; +} + +.categoryBottomClass { + background-color: var(--color-category-class-bg); + border: 0.1em solid var(--color-category-class-border); +} + +.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; */ +} + +.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: 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; + + text-decoration: none; + font-weight: bold; +} + +.pubsPane h2 { + margin: 0; + padding: 0; +} + +.pubsPane form { + padding-left: 1em; +} + +/*Clear both - start things on individula lines */ +.pubsRow { + margin: 0.5em 3em 0.5em 0em; + clear: both; +} + +/*inputs float right to line up */ +.pubsRow input { + float: right; + width: 20em; + height: 1em; +} +#inpid_book_description { + float: right; + height: 8em; + width: 17em; +} + +.pubsRow button { + float: left; + height: 2em; + padding: 0.5em; + margin: 0.5em; +} + +.hideit { + display: none; +} + +.active { + /* display: visible; */ +} + +.submitRow { + clear: both; + height: 5em; +} + +.submitRow button { + width: 7em; + height: 100%; +} + +#buttonid { + display: none; +} + +#buttonid.active { + display: inline; +} + +/******************* CV Pane *****************/ + +.CVclass { + background-color: var(--color-cv-pane-bg); +} + +/******************* Data Content Pane *****************/ + +div.dataContentPane { + border-top: solid 1px var(--color-data-pane-border-top); + border-left: solid 1px var(--color-data-pane-border-top); + border-bottom: solid 1px var(--color-data-pane-border-side); + border-right: solid 1px var(--color-data-pane-border-side); + padding: 0.5em; /* color: #404; */ + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +.nestedFormula { + border-top: solid 1px var(--color-data-pane-border-top); + border-left: solid 1px var(--color-data-pane-border-top); + border-bottom: solid 1px var(--color-data-pane-border-side); + border-right: solid 1px var(--color-data-pane-border-side); + 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: var(--color-text-link); + text-decoration: none; + font-weight: bold; +} +.dataContentPane a:link { + color: var(--color-text-link); + text-decoration: none; + font-weight: bold; +} +.dataContentPane a:visited { + color: var(--color-text-link-visited); + text-decoration: none; + font-weight: bold; +} +.dataContentPane a:hover { + color: var(--color-text-link-hover); + text-decoration: underline; + font-weight: bold; +} +.dataContentPane a:active { + color: var(--color-text-link-active); + 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: var(--color-text-muted); +} /* 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 var(--color-data-pane-border-top); + border-left: solid 1px var(--color-data-pane-border-top); + border-bottom: solid 1px var(--color-data-pane-border-side); + border-right: solid 1px var(--color-data-pane-border-side); + color: var(--color-text-blue); +} + +.imageView { + border: 1em var(--color-background); + margin: 1em; +} + +.n3Pane pre { + font-size: 120%; +} +div.n3Pane { +} + +.RDFXMLPane pre { + font-size: 120%; +} +div.RDFXMLPane { +} + +div.RDFXMLPane { + padding: 1em; + border-top: solid 2px var(--color-data-pane-border-top); + border-left: solid 2px var(--color-data-pane-border-top); + border-bottom: solid 2px var(--color-data-pane-border-side); + border-right: solid 2px var(--color-data-pane-border-side); + color: var(--color-text-brown); +} + +/* Generic things useful anywhere */ + +img.hideTillHover { + visibility: hidden; +} +img.hideTillHover:hover { + visibility: visible; +} +.hideTillHover img { + visibility: hidden; +} +.hideTillHover:hover img { + visibility: visible; +} +.hideTillHover a { + visibility: hidden; +} +.hideTillHover:hover a { + visibility: visible; +} +.hoverControl .hoverControlHide { + visibility: hidden; +} +.hoverControl:hover .hoverControlHide { + visibility: visible; +} + +/* Pane icons: */ + +/* +.hoverControl .paneShown{ border-radius: 0.5em; + border-top: solid #222 1px; + border-left: solid #222 0.1em; border-bottom: solid #eee 0.1em; + border-right: solid #eee 0.1em; + margin-left: 1em; padding: 3px; + background-color: #ffd; + visibility: hidden;} + +.hoverControl:hover .paneShown{ border-radius: 0.5em; + border-top: solid #222 1px; + border-left: solid #222 0.1em; border-bottom: solid #eee 0.1em; + border-right: solid #eee 0.1em; + margin-left: 1em; padding: 3px; + background-color: #ffd; + visibility:visible; } + +.paneHidden { border-radius: 0.5em; margin-left: 1em; padding: 3px} + +.hoverControl .paneHidden { border-radius: 0.5em; margin-left: 1em; padding: 3px; visibility:hidden;} +.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 */ +/* Compare facebook which only limits width -> lots of tall images! */ + +img.phoneIcon { + border: 0; + margin-left: 1em; +} + +table#sources { + width: 100%; +} + +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 ; + border-bottom: solid purple 0.1em; +*/ + vertical-align: top; + /* display: compact; Causes console errors in ffox */ +} + +td.pred { + padding-left: 0.5em; +} +/*td.optButton { display: none } +tr[parentOfSelected] > td.pred td.optButton { display: block } +*/ + +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; + + 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; +} + +/* 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; +} + +/* 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 */ + +/* 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 */ +} + +.colclose { + float: right; + color: var(--color-col-close); +} /* Should be 67% transp black */ +.sortarrow { + float: left; + color: var(--color-sort-arrow); + 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; +} + +div.viewTabs { + background-color: var(--color-view-tab-bg); + 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); +} + +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; +} + +td.viewTableData { + padding: 0em; + margin: 0em; + height: 100%; + width: 80%; +} + +td.queryTableData { + 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; +} + +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; +} + +input.tabQueryName { + border: solid var(--color-border-light) 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; +} + +td.checkboxTD { + padding-right: 0.5em; +} + +.sourceHighlight { + background-color: var(--color-source-highlight); +} + +#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); +} + +#TabulatorStatusWidget { + 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; +} + +span.closeQuerySpan { + 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; +} + +input.textinput { + width: 100%; + border: none; + font-size: 95%; + padding: 0em; + margin: 0; +} + +textarea.textinput { + border: none; +} + +.pendingedit { + color: var(--color-pending-edit); +} + +td.undetermined { + color: var(--color-nav-block-border); + font-style: italic; +} + +/*revert back*/ +td.undetermined table { + color: var(--color-text); + 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; +} + +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); +} + +/* The thing below was for the kenny's orange bar*/ +/* @@@ This is not specific enough +td{ + margin: 0; + padding: 0; +} +*/ + +.deleteIcon { + margin-left: 0.1em; +} + +.deleteCol { + float: right; + display: inline; +} + +.suggestion_list { + background: var(--color-suggestion-bg); + border: 1px solid var(--color-suggestion-border); + padding: 4px; +} + +.suggestion_list ul { + padding: 0; + margin: 0; + list-style-type: none; +} + +.suggestion_list a { + text-decoration: none; + color: var(--color-suggestion-link); +} + +.suggestion_list .selected { + background: var(--color-suggestion-selected-bg); + color: var(--color-suggestion-selected-text); +} + +.suggestion_list .selected a { + color: var(--color-suggestion-selected-text); +} + +#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; +} +div.PhotoListPanel { + float: left; + padding: 5px; + border: 1px solid var(--color-photo-border); + 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; +} +div.TagMenu { + float: left; + padding: 10px; + border: 1px solid var(--color-photo-border); + width: 300px; + margin: 0px 0px 0px 10px; + text-align: justify; +} +.tagItem { + 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; +} +div.photoItem { + 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; +} +img.photoThumbnail { + border: 1px solid var(--color-photo-thumb-border); + margin: auto auto auto auto; +} +.photoListTags { + 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; +} +.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; +} +div.photoImportContentPane { + float: left; + padding: 0px; + width: 930px; + border: 1px solid var(--color-photo-border); + padding: 10px; +} +.photoImportTitle { + font-size: 1rem; + font-weight: bold; +} +.photoItemPanel { + width: 260px; + height: 300px; + float: left; + padding: 10px; + border: 1px solid var(--color-photo-border); + margin: 0px 10px 10px 0px; +} +.photoControlImg { + border: 0px; + cursor: pointer; +} +.photoControlImgInactive { + opacity: 0.5; + border: 0px; +} +#photoPageInfo { + font-family: var(--font-family-ui); + font-size: 0.875rem; + font-weight: bold; +} +.controls { + clear: both; + text-align: right; + margin: 15px 15px 0px 0px; +} +.controlButton { + margin: 0px 0px 0px 10px; +} +div.TagPane { + min-width: 500px; + border: 1px solid var(--color-photo-border); + padding: 10px; +} +div.TagSemanticsPanel { + margin: 5px 0px 20px 0px; +} +div.TagSemanticsTable { + width: 100%; + font-family: var(--font-family-ui); + font-size: 0.75rem; +} +div.AddTagSemantics { + margin: 50px 0px 10px 0px; +} +.controlSelect { + margin: 5px; + font-family: var(--font-family-ui); + font-size: 0.75rem; +} +.tagURIInput { + margin: 5px; + font-family: var(--font-family-ui); + font-size: 0.75rem; + width: 300px; +} +div.TagPane hr { + border: 1px solid var(--color-photo-border); +} +/* +End of styles for the photoPane +*/ + +/* +Styles for tableViewPane +*/ + +.tableViewPane table th { + background-color: var(--color-tab-inactive-bg); + color: var(--color-log-normal); +} + +.tableViewPane table th a { + color: var(--color-text-secondary); +} + +.tableViewPane table .selectors td { + background-color: var(--color-tab-active-bg); +} + +.tableViewPane table td { + border-bottom: 1px solid var(--color-data-pane-border-top); + border-right: 1px solid var(--color-data-pane-border-top); +} + +.tableViewPane .toolbar td { + border: none; +} + +.tableViewPane .sparqlButton { + width: 16px; + height: 16px; + border: 1px solid var(--color-data-pane-border-top); +} + +.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; +} + +.tableViewPane .sparqlDialog textarea { + 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 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; +} + +/* +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; +} + +/* 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; +} diff --git a/dev/index.html b/dev/index.html index 515ef587..e3ee4f64 100644 --- a/dev/index.html +++ b/dev/index.html @@ -14,15 +14,16 @@ if (typeof UI !== 'undefined') window.UI = UI;
@@ -30,7 +31,7 @@A handy tool for pane developers. Put your JS or TS file in dev/pane/. - Run renderPane('https://solidos.solidcommunity.net/profile/card#me') from the console. + Run renderPane('https://testingsolidos.solidcommunity.net/profile/card#me') from the console. Don't forget that the resource owner needs to add http://localhost:9000 as a trusted app.