/** * Kahikatea Application Stylesheet * SHACL Web Components Design System */ /* ============================================================================ CSS CUSTOM PROPERTIES (Design Tokens) ============================================================================ */ :root { /* ---- Color Palette ---- */ /* Primary */ --color-black: #000000; --color-white: #ffffff; /* Secondary */ --color-orange: #e17000; --color-plum: #963156; --color-steel: #394a58; --color-blue: #5d8bab; --color-teal: #5bbbb7; --color-cool-grey: #a4aeb5; /* ---- Semantic Colors ---- */ --color-primary: var(--color-steel); --color-secondary: var(--color-blue); --color-accent: var(--color-orange); --color-text-primary: var(--color-black); --color-text-secondary: var(--color-steel); --color-text-muted: var(--color-cool-grey); --color-text-inverse: var(--color-white); --color-background: #fafbfc; --color-background-alt: #f0f2f4; --color-surface: var(--color-white); --color-surface-hover: #e8ebed; --color-border: var(--color-cool-grey); --color-border-light: #d4d8dc; --color-border-focus: var(--color-teal); /* Form States */ --color-success: var(--color-teal); --color-error: #d32f2f; --color-warning: var(--color-orange); --color-info: var(--color-blue); --color-disabled: #e0e0e0; --color-disabled-text: #9e9e9e; /* ---- Typography ---- */ /* Font Families */ --font-family-internal: Arial, sans-serif; --font-family-display: Merriweather, Georgia, serif; --font-family-body: 'Open Sans', sans-serif; --font-family-base: var(--font-family-internal); /* Font Sizes */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.125rem; /* 18px */ --font-size-lg: 1.25rem; /* 20px */ --font-size-xl: 1.5rem; /* 24px */ --font-size-2xl: 2rem; /* 32px */ --font-size-3xl: 2.5rem; /* 40px */ /* Font Weights */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* links */ --link-color: var(--color-steel); --link-color-hover: var(--color-blue); /* Line Heights */ --line-height-tight: 1.25; --line-height-base: 1.5; --line-height-relaxed: 1.75; /* ---- Spacing Scale ---- */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 0.75rem; /* 12px */ --spacing-lg: 1rem; /* 16px */ --spacing-xl: 1.5rem; /* 24px */ --spacing-2xl: 2rem; /* 32px */ --spacing-3xl: 3rem; /* 48px */ /* ---- Component Sizing ---- */ --input-height: 2.5rem; --input-height-sm: 2rem; --input-height-lg: 3rem; --button-height: 2.5rem; --button-height-sm: 2rem; --button-height-lg: 3rem; /* ---- Borders & Radius ---- */ --border-width: 1px; --border-width-thick: 2px; --border-radius-sm: 2px; --border-radius: 4px; --border-radius-md: 6px; --border-radius-lg: 8px; /* ---- Shadows ---- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --shadow-focus: 0 0 0 3px rgba(93, 139, 171, 0.3); /* ---- Transitions ---- */ --transition-fast: 150ms ease-in-out; --transition-base: 250ms ease-in-out; --transition-slow: 350ms ease-in-out; /* ---- Z-Index Scale ---- */ --z-dropdown: 1000; --z-modal: 1050; --z-tooltip: 1100; /* ---- Layout ---- */ /* unused --container-max-width: 1400px; */ --column-gap: var(--spacing-lg); --row-gap: var(--spacing-md); /* ---- Breakpoints (for reference in media queries) ---- */ /* Use: @media (max-width: 48rem) */ --breakpoint-sm: 36rem; /* 576px */ --breakpoint-md: 48rem; /* 768px */ --breakpoint-lg: 62rem; /* 992px */ --breakpoint-xl: 75rem; /* 1200px */ /* ============================================================================ GLOBAL BASE STYLES ============================================================================ */ box-sizing: border-box; font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-text-primary); background-color: var(--color-background); margin: 0; padding: 0; } a[href] { text-underline-offset: 0.1rem; } :host(app-root) { display: contents; box-sizing: border-box; main { display: flex; gap: var(--spacing-sm); flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color-background); border: unset; } } /* ============================================================================ TABLIST-SHACL-GROUP & MAIN-SHACL-GROUP ============================================================================ */ /* TODO check these styles: are they all in fact used in main-shacl-group elements? */ :host(tablist-shacl-group) { display: contents; nav#tablist { display: flex; flex-wrap: wrap; align-items: stretch; } } :host(tabpanel-shacl-group[aria-selected="true"]) { #button.tab { color: var(--tab-color-active); background: var(--tab-bg-active); border-color: var(--color-border-light); border-bottom-color: var(--tab-border-active); /* changing font-weight causes an undesirable jiggle of the tabs */ /*font-weight: var(--font-weight-semibold);*/ } #panel { /*padding: var(--spacing-md);*/ display: block; /* does not grow or shrink: it is 100% the width of the containing flexbox (a tablist-shacl-group) */ flex: 0 0 100%; width: 100%; order: 999; } } :host(tabpanel-shacl-group) { display: contents; #tab { display: block; } #panel { display: none; } } /* common styles between tablist-shacl-group and main-shacl-group */ :host(tablist-shacl-group), :host(main-shacl-group) { --tablist-background: var(--color-surface); --tablist-border-color: var(--color-border-light); --tab-spacing: var(--spacing-sm); .section { background: var(--tablist-background); border-radius: var(--border-radius); overflow: hidden; } .header { background: linear-gradient(to bottom, var(--color-steel), #2d3a44); color: var(--color-white); border-bottom: 2px solid var(--color-teal); padding: var(--spacing-md) var(--spacing-lg); } .nav { display: flex; gap: var(--tab-spacing); overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; } } /* ============================================================================ TABPANEL-SHACL-GROUP ============================================================================ */ :host(tabpanel-shacl-group) { --tab-bg: transparent; --tab-bg-hover: rgba(91, 187, 183, 0.15); --tab-bg-active: rgba(91, 187, 183, 0.25); --tab-color: var(--color-steel); --tab-color-hover: var(--color-text-primary); --tab-color-active: var(--color-steel); --tab-border-active: var(--color-teal); --tab-padding: var(--spacing-sm) var(--spacing-md); --tabpanel-padding: var(--spacing-lg); .tab { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--tab-color); background: var(--tab-bg); border: var(--border-width) solid transparent; border-bottom: 3px solid transparent; padding: var(--tab-padding); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; } .tab:hover { background: var(--tab-bg-hover); color: var(--tab-color-hover); border-color: var(--color-border-light); border-bottom-color: transparent; } .tab:focus-visible { outline: var(--border-width-thick) solid var(--color-border-focus); outline-offset: -2px; box-shadow: var(--shadow-focus); } .tabpanel { padding: var(--tabpanel-padding); background: var(--color-white); } .tabpanel[hidden] { display: none; } } /* ============================================================================ REGION-SHACL-GROUP (Multi-column layout) ============================================================================ */ :host(region-shacl-group) { --region-column-gap: var(--column-gap); --region-column-min-width: 20rem; --region-background: transparent; display: contents; .section { /* Flexbox layout replacing muti-column */ display: flex; flex-direction: column; flex-wrap: wrap; gap: 1rem; justify-content: flex-start; align-content: flex-start; height: 80vh; flex: initial; /* Multi-column layout - browser determines columns based on space */ /* column-width: var(--region-column-min-width); column-gap: var(--region-column-gap); column-fill: balance; */ background: var(--region-background); /* debugging: to highlight regions */ /* border-width: 2px; border-color: cyan; border-style: solid; */ } /* Explicit column counts via attributes (optional override) */ /* TODO check if this is used or could be used. There is no mechanism at the moment for assigning a "columns" property to a PropertyGroup in our ontology or for marshalling that value to a columns attribute. This seems rather non-responsive in design, anyway. Drop it? &[columns="1"] .section { column-count: 1; column-width: auto; } &[columns="2"] .section { column-count: 2; column-width: auto; } &[columns="3"] .section { column-count: 3; column-width: auto; } &[columns="4"] .section { column-count: 4; column-width: auto; } */ .header { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-bottom: var(--spacing-md); text-transform: uppercase; letter-spacing: 0.05em; /* Span all columns */ column-span: all; } } /* ============================================================================ LIST-SHACL-GROUP ============================================================================ */ :host(list-shacl-group) { --list-gap: var(--spacing-sm); --list-background: transparent; --list-padding: 0; .list { background: var(--list-background); border-radius: 0; border: none; padding: var(--list-padding); } .list > * { margin-bottom: var(--list-gap); /* Prevent list items from breaking across columns */ break-inside: avoid; } .list > *:last-child { margin-bottom: 0; } .header { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-bottom: var(--spacing-md); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--font-size-sm); } } /* or :host(.group) ? */ :host(form-shacl-group) { display: contents; main { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem; justify-content: flex-start; align-content: flex-start; overflow-y: auto; flex-basis: auto; flex-grow: 1; flex-shrink: 1; min-height: 0 !important; } } /* ============================================================================ GROUP-SHACL-GROUP (Fieldset/Column) ============================================================================ */ /* Unless it's a "leaf", a group is allowed to break-inside, and has no border or background */ :host(group-shacl-group) { display: contents; /* break-inside: auto; */ --group-level-initial: 1; --group-level-current: var(--group-level-child, var(--group-level-initial)); div { display: contents; } header { font-size: calc( var(--font-size-xs) * calc( 1 + var(--group-level-current) ) / var(--group-level-current) ); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-bottom: var(--spacing-sm); padding: 0; text-transform: uppercase; letter-spacing: 0.05em; white-space-collapse: preserve-breaks; width: var(--region-column-min-width); } header.empty { display: none; } div fieldset { display: contents; /* width: var(--region-column-min-width);*/ --group-level-child: calc(var(--group-level-current) + 1); } } :host(group-shacl-group.leaf) { display: contents; div { flex: 0 0 auto; display: block; overflow-y: auto; } div fieldset { display: block; background-color: var(--color-background-alt); margin-bottom: var(--spacing-md); padding: var(--spacing-md); width: var(--region-column-min-width); /* width: fit-content; */ /* this top border is nice but doesn't look good with group-shacl-group elements inside a combobox-property */ /* border-top-width: var(--border-width-thick); border-top-color: var(--color-teal); border-top-style: solid; */ /* display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; */ } } /* ============================================================================ SEARCH-SHACL-GROUP ============================================================================ */ :host(search-shacl-group) { --search-padding: var(--spacing-lg); --search-background: var(--color-background-alt); display: contents; search { padding: var(--search-padding); background: var(--search-background); border-radius: var(--border-radius); width: fit-content; } } /* ============================================================================ TREE-SHACL-GROUP & TREEITEM-SHACL-GROUP (Breadcrumb with popups) ============================================================================ */ :host(tree-shacl-group) { --breadcrumb-spacing: var(--spacing-xs); --breadcrumb-separator-color: var(--color-text-muted); --popup-min-width: 200px; --popup-background: var(--color-white); --popup-border: var(--color-border); } :host(tree-shacl-group) .tree { gap: var(--breadcrumb-spacing); padding: var(--spacing-sm) 0; font-size: var(--font-size-sm); } /* Breadcrumb button */ :host(treeitem-shacl-group) .button { color: var(--color-blue); background: transparent; border: none; cursor: pointer; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--border-radius-sm); font-family: inherit; font-size: inherit; } :host(treeitem-shacl-group) .button:hover { background: var(--color-surface-hover); text-decoration: underline; } :host(treeitem-shacl-group) .button:focus-visible { outline: var(--border-width-thick) solid var(--color-border-focus); outline-offset: 2px; } :host(treeitem-shacl-group) .button[aria-current="page"] { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); cursor: default; } :host(treeitem-shacl-group) .button[aria-current="page"]:hover { background: transparent; text-decoration: none; } /* Separator */ /* :host(treeitem-shacl-group) .separator { color: var(--breadcrumb-separator-color); margin: 0 var(--spacing-xs); } */ /* Popup menu */ :host(treeitem-shacl-group) .popup { min-width: var(--popup-min-width); background: var(--popup-background); border: var(--border-width) solid var(--popup-border); border-radius: var(--border-radius); box-shadow: var(--shadow-lg); } /* Popup items */ :host(treeitem-shacl-group) .popup-item { padding: var(--spacing-sm) var(--spacing-md); background: transparent; border: none; cursor: pointer; color: var(--color-text-primary); font-family: inherit; font-size: var(--font-size-base); transition: background var(--transition-fast); } :host(treeitem-shacl-group) .popup-item:hover { background: var(--color-background-alt); } :host(treeitem-shacl-group) .popup-item:focus-visible { outline: var(--border-width-thick) solid var(--color-border-focus); outline-offset: -2px; background: var(--color-background-alt); } :host(treeitem-shacl-group) .popup-item[data-type="main"] { font-weight: var(--font-weight-medium); } :host(item-object-property.property) { display: block; div { } } /* ============================================================================ DATA PROPERTY COMPONENTS ============================================================================ */ :host(.property) { /* Ensure properties inside groups are properly contained */ max-width: 100%; min-width: 0; /* Prevent properties from splitting across columns */ break-inside: avoid; --property-label-color: var(--color-text-primary); --property-label-weight: var(--font-weight-medium); --property-label-size: var(--font-size-sm); --property-input-bg: var(--color-white); --property-input-border: var(--color-border); --property-input-text: var(--color-text-primary); --property-input-height: var(--input-height); --property-spacing: var(--spacing-xs); display: block; margin-bottom: var(--spacing-sm); border-color: var(--color-text-secondary); } /* Error/Help text */ .error { display: block; color: var(--color-error); font-size: var(--font-size-xs); margin-top: var(--spacing-xs); line-height: var(--line-height-tight); } .help { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); margin-top: var(--spacing-xs); line-height: var(--line-height-tight); } /* Labels */ .label { display: block; color: var(--property-label-color); font-weight: var(--property-label-weight); font-size: var(--property-label-size); margin-bottom: var(--property-spacing); margin-left: calc(var(--border-radius) / 2); line-height: var(--line-height-tight); } /* Required indicator */ /* TODO fix: "data-required" is not used anywhere; is this is a relic of OrganiseMDB's UI? */ .label[data-required="true"]::after { content: ' *'; color: var(--color-error); font-weight: var(--font-weight-bold); } /* Input fields */ .input { width: 100%; height: var(--property-input-height); padding: var(--spacing-sm) var(--spacing-md); font-family: var(--font-family-base); font-size: var(--font-size-base); color: var(--property-input-text); background: var(--property-input-bg); border: var(--border-width) solid var(--property-input-border); border-radius: var(--border-radius); transition: all var(--transition-fast); } .input:focus { outline: none; border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } /* Disabled state */ .input:disabled { background: var(--color-disabled); color: var(--color-disabled-text); cursor: not-allowed; border-color: var(--color-border-light); } /* Validation states */ .input[aria-invalid="true"] { border-color: var(--color-error); background: rgba(211, 47, 47, 0.05); } .input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2); } /* Valid state (if implemented) */ .input[data-valid="true"] { border-color: var(--color-success); } :host(validation-result) { /* Define dimensions and display behavior */ display: block; /* the validation message */ span { font-style: italic; font-size: smaller; color: darkgoldenrod; } /* the icon */ span::before { /* Define dimensions and display behavior */ display: inline-block; content: ""; /* Content is empty as the icon is a background image */ width: 1em; /* Set the width of the icon */ height: 1em; /* Set the height of the icon */ /* Set the background image and related properties */ background-repeat: no-repeat; background-size: contain; /* Ensures the image fits within the defined dimensions */ /* Add some space between the icon and the text */ margin-right: 0.3em; /* Optional: Vertical alignment */ vertical-align: middle; } /* different icons for different severity levels */ span.Violation::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJub25lIj4KICA8IS0tIEthaGlrYXRlYTogVmlvbGF0aW9uIChMaWdodCBNb2RlKSAtLT4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGMyNjI2IiBzdHJva2Utd2lkdGg9IjIuNSIvPgogIDxsaW5lIHgxPSI4LjUiIHkxPSI4LjUiIHgyPSIxNS41IiB5Mj0iMTUuNSIgc3Ryb2tlPSIjZGMyNjI2IiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxsaW5lIHgxPSIxNS41IiB5MT0iOC41IiB4Mj0iOC41IiB5Mj0iMTUuNSIgc3Ryb2tlPSIjZGMyNjI2IiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K'); /* Specify the image source */ } span.Warning::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJub25lIj4KICA8IS0tIEthaGlrYXRlYTogV2FybmluZyAoTGlnaHQgTW9kZSkgLS0+CiAgPCEtLSBUcmlhbmdsZSB3aXRoIHNsaWdodGx5IHJvdW5kZWQgam9pbnMgZm9yIGNvbnNpc3RlbmN5IHdpdGggdGhlIHJvdW5kZWQgbGluZWNhcHMgZWxzZXdoZXJlIC0tPgogIDxwb2x5Z29uIHBvaW50cz0iMTIsMi41IDIyLDIxIDIsMjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Q5NzcwNiIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8bGluZSB4MT0iMTIiIHkxPSI5LjUiIHgyPSIxMiIgeTI9IjEzIiBzdHJva2U9IiNkOTc3MDYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPGNpcmNsZSBjeD0iMTIiIGN5PSIxNy43NSIgcj0iMS42IiBmaWxsPSIjZDk3NzA2Ii8+Cjwvc3ZnPgo='); /* Specify the image source */ } span.Info::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJub25lIj4KICA8IS0tIEthaGlrYXRlYTogSW5mbyAoTGlnaHQgTW9kZSkgLS0+CiAgPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzE2YTM0YSIgc3Ryb2tlLXdpZHRoPSIyLjUiLz4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjYuNSIgcj0iMS44IiBmaWxsPSIjMTZhMzRhIi8+CiAgPGxpbmUgeDE9IjEyIiB5MT0iMTAuNSIgeDI9IjEyIiB5Mj0iMTkiIHN0cm9rZT0iIzE2YTM0YSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg=='); /* Specify the image source */ } span.Trace::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJub25lIj4KICA8IS0tIEthaGlrYXRlYTogVHJhY2UgKExpZ2h0IE1vZGUpIOKAlCBkaWFtb25kIHdpdGggPD4gLS0+CiAgPHJlY3QgeD0iNC42ODYiIHk9IjQuNjg2IiB3aWR0aD0iMTQuNjI3IiBoZWlnaHQ9IjE0LjYyNyIgcng9IjMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzYzNjZmMSIgc3Ryb2tlLXdpZHRoPSIyLjUiIHRyYW5zZm9ybT0icm90YXRlKDQ1IDEyIDEyKSIvPgogIDxwb2x5bGluZSBwb2ludHM9IjEwLDguNSA3LDEyIDEwLDE1LjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzYzNjZmMSIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwb2x5bGluZSBwb2ludHM9IjE0LDguNSAxNywxMiAxNCwxNS41IiBmaWxsPSJub25lIiBzdHJva2U9IiM2MzY2ZjEiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg=='); /* Specify the image source */ } span.Debug::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJub25lIj4KICA8IS0tIEthaGlrYXRlYTogRGVidWcgKExpZ2h0IE1vZGUpIOKAlCBidWcgZ2x5cGggLS0+CiAgPCEtLSBBbnRlbm5hZSAtLT4KICA8cGF0aCBkPSJNMTAuNSw0LjUgUTgsMiA4LjUsMC41IiAgIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzYzNjZmMSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNMTMuNSw0LjUgUTE2LDIgMTUuNSwwLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzYzNjZmMSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8Y2lyY2xlIGN4PSI4LjUiICBjeT0iMC41IiByPSIxLjUiIGZpbGw9IiM2MzY2ZjEiLz4KICA8Y2lyY2xlIGN4PSIxNS41IiBjeT0iMC41IiByPSIxLjUiIGZpbGw9IiM2MzY2ZjEiLz4KICA8IS0tIEhlYWQgLS0+CiAgPGNpcmNsZSBjeD0iMTIiIGN5PSI2IiByPSIzLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzYzNjZmMSIgc3Ryb2tlLXdpZHRoPSIyLjUiLz4KICA8IS0tIE5lY2sgLS0+CiAgPGxpbmUgeDE9IjEyIiB5MT0iOS41IiB4Mj0iMTIiIHkyPSIxMC41IiBzdHJva2U9IiM2MzY2ZjEiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8IS0tIEJvZHkgLS0+CiAgPGNpcmNsZSBjeD0iMTIiIGN5PSIxNyIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjM2NmYxIiBzdHJva2Utd2lkdGg9IjIuNSIvPgogIDwhLS0gTGVnczogMyBwYWlycywgY3VydmVkIC0tPgogIDxwYXRoIGQ9Ik01LDEzIFEyLDEzIDIsMTAiICAgIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzYzNjZmMSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNNSwxNyBRMiwxNyAyLDE3IiAgICBmaWxsPSJub25lIiBzdHJva2U9IiM2MzY2ZjEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTUsMjEgUTIsMjIgMywyNCIgICAgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjM2NmYxIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0xOSwxMyBRMjIsMTMgMjIsMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzYzNjZmMSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNMTksMTcgUTIyLDE3IDIyLDE3IiBmaWxsPSJub25lIiBzdHJva2U9IiM2MzY2ZjEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTE5LDIxIFEyMiwyMiAyMSwyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjM2NmYxIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K'); /* Specify the image source */ } } /* Link property specific */ :host(link-property) { .link { color: var(--color-blue); text-decoration: none; padding: var(--spacing-xs) 0; display: inline-block; transition: color var(--transition-fast); } .link:hover { color: var(--color-steel); text-decoration: underline; } .link:focus-visible { outline: var(--border-width-thick) solid var(--color-border-focus); outline-offset: 2px; border-radius: var(--border-radius-sm); } } :host(combobox-object-property) button#unlink:disabled { display: none; } /* Boolean property (checkbox/toggle) */ :host(boolean-property) { .checkbox { width: 1.25rem; height: 1.25rem; cursor: pointer; accent-color: var(--color-accent); } .checkbox:focus-visible { outline: var(--border-width-thick) solid var(--color-border-focus); outline-offset: 2px; } } /* a drop-down selection box */ :host(select-property.property){ display: contents; div#options { /* grows to fill space */ flex: 1 0 0%; /*align-content: stretch;*/ white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; cursor: default; max-height: 20rem; } } /* option property in a select list */ :host(option-property) { input {display: none;} label { display: block; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; } input:checked + label { background-color: Highlight; color: HighlightText; } } /* spinner animation keyframes for feed-sentinel */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } :host(feed-sentinel) { .feed-sentinel { padding: 1em; margin: 1em; } .spinner { width: 1em; height: 1em; border: 5px solid #ccc; border-top-color: #3498db; /* To create a visual spinning effect */ border-radius: 50%; /* To make it a circle */ animation: spin 1s linear infinite; /* Apply the animation */ } } :host(feed-object-property) { display: contents; /* min-height: fit-content; */ /* min-height: 100px; */ div { overflow-y: scroll; scrollbar-gutter: stable; } } :host(directory-member) { display: contents; /* vertical space between items in the directory */ div { margin-bottom: var(--spacing-xs); } } /* Breadcrumbs */ :host(breadcrumb-item[root]) { flex: none; /* don't allow the breadcrumb menu to grow or shrink vertically */ /* margin-bottom: var(--spacing-lg);*/ #button { cursor: default; } } /* Show if selected */ :host(breadcrumb-item[selected]) { display: inline-block; } /* Show all children of an open breadcrumb item */ :host(breadcrumb-item[popped-up]), :host(breadcrumb-item[popped-up][selected]) { display: block; } :host(breadcrumb-item[open]) > #children { display: inline-block; position: absolute; /* TODO revise colours */ border: 1px solid var(--color-border); /*box-shadow: 5px 5px 10px -5px #91D3F7;*/ box-shadow: var(--shadow-lg); background-color: white; } :host(breadcrumb-item[popped-up][selected]) > #button { font-weight: var(--font-weight-bold); } :host(breadcrumb-item) { /* Visibility */ display: none; position: relative; background: var(--color-background); /* ============================================ BREADCRUMB BUTTON ============================================ */ #button { display: inline-block; background: none; border: none; /* var(--color-border); border-style: solid; border-width: 1px; */ cursor: pointer; text-align: start; min-width: max-content; font-size: var(--font-size-xl); color: var(--link-color); &:hover { color: var(--link-color-hover); } } /* ============================================ CHILDREN SLOT (normal breadcrumb flow) ============================================ */ #children { display: contents; } } /* ============================================ SEPARATOR ============================================ */ /* a non-leaf breadcrumb-item, when its parent is closed, has a trailing slash to separate it from its children */ :host(breadcrumb-item) > button::after { display: inline-block; content: "/"; color: var(--color-accent); font-weight: var(--font-weight-bold); margin-left: var(--spacing-sm); } /* a non-leaf breadcrumb-item which is popped up */ /* has a trailing "‣" to indicate the availability of a sub-menu */ :host(breadcrumb-item[popped-up]) > button::after { content: " ‣ "; } /* Leaf breadcrumb-item appearing as a menu item in an (open) parent breadcrumb-item. */ :host(breadcrumb-item[popped-up][target-node-uri]) > button::after { content: ""; } /* Leaf breadcrumb-item with parent closed, appearing as the terminal breadcrumb-item in a list */ :host(breadcrumb-item[target-node-uri]) > button::after { content: ""; } /* LOGIN DIALOG */ :host(login-dialog) { dialog { h1 { color: var(--color-blue); font-family: var(--font-family-display); text-align: center; } form { /* internal layout of login form elements */ display: flex; flex-direction: column; gap: var(--spacing-md); } /* placement of dialog */ margin: 0; /* `margin: auto;` is the default. */ transform: translateX(-50%) translateY(-50%); left: 50%; top: 25%; z-index: 9999; /* border */ border-radius: var(--border-radius-lg); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* colour */ background-color: var(--color-background); } } /* ============================================================================ UTILITY CLASSES FOR SLOT CONTENT ============================================================================ */ /* Property wrapper for consistent spacing */ /* unused: TODO check where the margin-bottom for these .property-wrapper rules would make sense */ /* .property-wrapper { margin-bottom: var(--spacing-sm); } .property-wrapper:last-child { margin-bottom: 0; } */ /* Button styles (for any buttons in slot content) */ .button { display: inline-flex; align-items: center; justify-content: center; height: var(--button-height); padding: 0 var(--spacing-lg); font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: 1; color: var(--color-white); background: var(--color-primary); border: none; border-radius: var(--border-radius); cursor: pointer; transition: all var(--transition-fast); text-decoration: none; } .button:hover { background: var(--color-steel); box-shadow: var(--shadow-sm); } .button:focus-visible { outline: var(--border-width-thick) solid var(--color-border-focus); outline-offset: 2px; box-shadow: var(--shadow-focus); } .button:active { transform: translateY(1px); } .button:disabled { background: var(--color-disabled); color: var(--color-disabled-text); cursor: not-allowed; box-shadow: none; } .button-secondary { background: var(--color-white); color: var(--color-primary); border: var(--border-width) solid var(--color-border); } .button-secondary:hover { background: var(--color-background-alt); border-color: var(--color-primary); } .button-accent { background: var(--color-accent); } .button-accent:hover { background: var(--color-plum); } /* ============================================================================ RESPONSIVE UTILITIES ============================================================================ */ @media (max-width: 48rem) { :root { --spacing-lg: 1rem; --spacing-xl: 1.5rem; --spacing-2xl: 2rem; } article-shacl-group .header { font-size: var(--font-size-lg); } } body { margin: 0; } @keyframes fadeInOut { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } p.throbber { animation: fadeInOut 3s ease-in-out infinite; }