/* ----- */ #elPages_block_preview_wrapper { background: transparent; z-index: 1; margin-inline-start: 355px; } #elpages_block_preview { width: 100%; max-width: 600px; min-width: 450px; min-height: 230px; margin: 10px 0; border: 1px solid rgba(0,0,0,0.1); position: relative; background-color: #fcfcfc; background-repeat: no-repeat; background-position: center center; background-size: 40px 40px; background-image: none; z-index: 0; } .ipsCmsEntries{ --i-column-gap: var(--i-sp_block); display: grid; gap: var(--i-column-gap); } .ipsCmsEntries__item{ display: flex; flex-direction: column; } .ipsCmsEntries__align{ padding: var(--i-sp_3); display: flex; align-items: start; flex-wrap: wrap; gap: var(--i-sp_3); } .ipsCmsEntries__primary{ grid-column: 1 / -2; flex: 9999 1 50%; display: grid; gap: 1em; align-content: start; } .ipsCmsEntries__fields{ color: var(--i-color_soft); } /* Hide custom fields if it's empty */ .ipsCmsEntries__fields:not(:has(*)){ display: none; } @supports not selector(a:has(b)){ .ipsCmsEntries__fields:-moz-only-whitespace{ display: none; } } .ipsCmsEntries__thumb{ flex: 1 1 280px; } .ipsCmsEntries__thumb .ipsThumb{ aspect-ratio: 16/9; } .ipsCmsEntries__meta{ margin-top: auto; } /* Multi-columns */ .ipsCmsEntries--2{ --ipsCmsEntries--grid: repeat(auto-fill, minmax(min(100%, max(300px, 100% / 2 - var(--i-column-gap))), 1fr)); grid-template-columns: var(--ipsCmsEntries--grid); } .ipsCmsEntries--3{ --ipsCmsEntries--grid: repeat(auto-fill, minmax(min(100%, max(300px, 100% / 3 - var(--i-column-gap))), 1fr)); grid-template-columns: var(--ipsCmsEntries--grid); } /* Stack */ .ipsCmsEntries--stack .ipsCmsEntries__align{ justify-content: center; } .ipsCmsEntries--stack .ipsCmsEntries__thumb .ipsThumb{ aspect-ratio: auto; } /* Large image */ .ipsCmsEntries--image .ipsCmsEntries__align{ display: grid; } .ipsCmsEntries--image .ipsCmsEntries__thumb{ order: -1; } .ipsCmsEntries--image .ipsCmsEntries__thumb .ipsThumb{ aspect-ratio: 16/9; } .ipsCmsEntries--image :is(.ipsCmsEntries__fields, .ipsCmsEntries__tags, .ipsCmsEntries__snippet){ display: none; } /* First featured */ .ipsCmsEntries__item--featured{ grid-column: 1/-1; container-type: inline-size; } .ipsCmsEntries__item--featured .ipsCmsEntries__align{ display: grid; grid-template-columns: var(--ipsCmsEntries--grid); } .ipsCmsEntries__item--featured .ipsCmsEntries__thumb{ flex: 1 1 33% } @container(max-width: 935px){ .ipsCmsEntries__item--featured .ipsCmsEntries__thumb{ flex: 1 1 calc(50% - var(--i-column-gap) * 2); min-width: 250px; } } /* Non-featured inside a featured grid */ .ipsCmsEntries--feature .ipsCmsEntries__item:not(.ipsCmsEntries__item--featured) .ipsCmsEntries__align{ display: grid; align-content: start; } .ipsCmsEntries--feature .ipsCmsEntries__item:not(.ipsCmsEntries__item--featured) .ipsCmsEntries__thumb{ order: -1; } .cMedia__managerToolbar { background: var(--i-background_2); border-bottom: 1px solid var(--i-background_4); height: 66px; padding: 10px; display: flex; align-items: center; } #elMedia_sidebar, #elMedia_fileList, #elMedia_searchResults { overflow: auto; } #elMedia_searchField { flex: 0 1 300px; } .ipsGrid--pages-media{ --i-basis: 140px; } .cMedia_item { background: var(--i-background_1); border: 1px solid var(--i-background_4); border-radius: 5px; padding: 5px; text-align: center; cursor: pointer; } .cMedia_item:where(:hover){ border-color: var(--i-background_5); } .cMedia_itemSelected { border-color: var(--i-primary); background: var(--i-primary); color: var(--i-primary-contrast); } .cMedia_itemDisabled, .cMedia_treeDisabled { opacity: .3; pointer-events: none; } .cMedia_item .ipsThumb img{ object-fit: contain; } .cMedia_filename { padding: 6px; } /* Sidebar */ .cMedia_preview{ padding: 10px; } .cMedia_preview:not(:has(*)) { display: none !important; } @supports not selector(a:has(b)){ .cMedia_preview:-moz-only-whitespace{ display: none !important; } } .cMedia_preview img { cursor: zoom-in; max-height: 200px; } [data-ipsTitleField] { overflow-wrap: break-word; } /* ----- */ .ipsBadge img.ipsImage { max-height: 20px; max-width: 20px; } .ipsDatabaseFields{ display: flex; flex-wrap: wrap; align-items: center; gap: 1em; } .ipsDatabaseFields .ipsBadge{ text-transform: none; font-size: .9em; } .ipsBadge img.ipsImage { max-height: 20px; max-width: 20px; } .ipsPagesDiff { margin-bottom: 5px; } *){ flex: 0 0 auto; } .ipsTemplateEditor__listColumn{ border-inline-end: 1px solid var(--i-background_4); } /* Search bar and filter */ .cTemplateControls { padding: .5em; background: var(--i-background_2); min-height: 60px; /* Set a min-height so the search bar and editor toolbar are aligned */ align-content: center; } /* Pseudo input */ .cTemplateControls__input{ display: flex; background: var(--i-background_1); border: 1px solid var(--i-background_5); border-radius: 8px; } /* Don't use :focus-within since the border color is changed even when the filter button is clicked */ .cTemplateControls__input:has([type="text"]:focus){ border-color: currentColor; } .cTemplateControls__input [type="text"]{ flex: 1 1 100%; outline-width: 0; padding: .8em 1em; } .cTemplateControls__filter{ flex: 0 0 auto; display: flex; align-items: center; gap: .4em; padding: 0 .7em; color: var(--i-color_soft); } .cTemplateControls__filter:hover{ color: var(--i-color_hard); } .cTemplateControls__filter .fa-caret-down{ font-size: 10px; opacity: .5; } /* Icon legend at bottom of file list */ #elTemplateEditor_info { display: flex; justify-content: space-evenly; font-size: .8em; background: var(--i-background_1); padding: 1em 0; border-top: 1px solid var(--i-background_3); } /* "Add" button at bottom of file list */ #elTemplateEditor_newButton{ background: var(--i-background_2); padding: .8em; } /* Buttons above editor (Revert, Save, etc) */ .ipsTemplateEditor__editorToolbar { display: flex; justify-content: end; gap: 10px; } /* Tabs */ #elTemplateEditor .ipsTabs { background: var(--i-background_2); /* Always show the tab bar, even if a single tab exists */ display: block; } /* Let the tabs wrap since we don't have the scroller feature here */ #elTemplateEditor_tabbar.ipsTabs [role="tablist"]{ flex-wrap: wrap; } /* Hide tab bar if there are zero tabs (ie. if all tabs are closed) */ #elTemplateEditor .ipsTabs:not(:has([role="tab"])){ display: none; } /* Close tab button */ #elTemplateEditor [data-action="closeTab"] { font-size: 12px; opacity: .5; display: inline-grid; width: 1.6em; height: 1.6em; line-height: 1; place-content: center; border-radius: 3px; margin: -1em -.7em; margin-inline-start: .5em; } #elTemplateEditor [data-action="closeTab"]:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); } /* Full height code editor */ #elTemplateEditor_panels{ flex: 1 1 100%; display: flex; flex-direction: column; } #elTemplateEditor .CodeMirror{ height: 100%; } #elTemplateEditor [data-role="editor"], #elTemplateEditor .CodeMirror { border-width: 0; border-radius: 0; padding-bottom: 1em; } #elTemplateEditor [data-role="editor"] { font-family: monospace; } #elTemplateEditor [data-role="templatePanelWrap"] textarea { height: 550px; } /* Template Diff columns */ .ipsTabs__panel:has(.cTemplateMergeHeaders){ display: flex; flex-direction: column; } .cTemplateMergeHeaders { border: 1px solid var(--i-background_4); border-bottom: 0; flex: 0 0 auto; display: flex; justify-content: space-between; } .cTemplateMergeHeader, .CodeMirror-merge-2pane .CodeMirror-merge-pane { width: calc(50% - 40px); } .CodeMirror-merge-2pane .CodeMirror-merge-gap{ width: 80px; } .CodeMirror-merge{ height: 100%; border-width: 0; display: flex; } .CodeMirror-merge-pane{ height: 100%; } /* FILE LISTING STYLES */ #elTemplateEditor_fileList { /* height: 550px; */ flex: 1 1 auto; overflow: auto; } .cTemplateList{ padding: 8px; } .cTemplateList a:not(.ipsCms_templateOptions) { padding: 5px 0; display: block; position: relative; color: var(--i-color_soft); border-radius: 6px; } .cTemplateList a[href*="location=database"]:not(.ipsCms_templateOptions) { /* margin-inline-end: 20px; */ } /* Item in sidebar */ .cTemplateList li { position: relative; } .cTemplateList > li > details > summary { font-weight: 600; } .cTemplateList summary{ padding: .7em 1em; border-radius: 6px; display: flex; } .cTemplateList summary:hover{ background: var(--i-background_3); } .cTemplateList summary::before{ flex: 0 0 auto; content: "+"; display: inline-block; width: 1.5em; opacity: .3; } .cTemplateList [open] > summary::before{ content: "-"; } .cTemplateList i-details-content{ padding-inline-start: 1em; } a.ipsCms_templateOptions { float: inline-end; position: relative; padding: .7em 8px; color: var(--i-color_hard); opacity: .1; border-radius: 6px; } li:hover > a.ipsCms_templateOptions { opacity: .8; } .cTemplateList li.cTemplateList_inactiveBranch > a:not(.ipsCms_templateOptions)::before, .cTemplateList li.cTemplateList_activeBranch > a:not(.ipsCms_templateOptions)::before { font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; display: inline-block; line-height: 7px; font-size: 14px; } .cTemplateList li.cTemplateList_inactiveBranch > a:not(.ipsCms_templateOptions)::before, .cTemplateList li.cTemplateList_activeBranch > a:not(.ipsCms_templateOptions)::before { content: '\f0da'; margin-inline-end: 7px; } [dir="rtl"] .cTemplateList li.cTemplateList_inactiveBranch > a:not(.ipsCms_templateOptions)::before, [dir="rtl"] .cTemplateList li.cTemplateList_activeBranch > a:not(.ipsCms_templateOptions)::before { content: '\f0d9'; } [dir="ltr"] .cTemplateList li.cTemplateList_activeBranch > a:not(.ipsCms_templateOptions)::before, [dir="rtl"] .cTemplateList li.cTemplateList_activeBranch > a:not(.ipsCms_templateOptions)::before { content: '\f0d7'; } .cTemplateList li.cTemplateList_inactiveBranch > ul { display: none; } .cTemplateList li a:not(.ipsCms_templateOptions) { padding-inline-start: 15px; } .cTemplateList li li a:not(.ipsCms_templateOptions) { padding-inline-start: 30px; } .cTemplateList li li li a { padding-inline-start: 45px; } .cTemplateList li li li li a { padding-inline-start: 70px; } .cTemplateList li.cTemplateList_activeNode > a:not(.ipsCms_templateOptions) { background: #215e98; background: var(--i-primary); color: #fff; } .cTemplateList li:not( .cTemplateList_activeNode ) > a:hover { background: var(--i-background_3); } /* INHERITED VALUES */ a[data-inherited-value]::after { position: absolute; top: 9px; inset-inline-end: 5px; } a[data-inherited-value]::after, #elTemplateEditor_info li::before { font-size: 9px; font-weight: bold; text-transform: uppercase; font-family: monospace; padding: 0 5px; color: #b3b3b3; line-height: 14px; border-radius: 10px; } a[data-inherited-value="original"]::after { display: none; } .cTemplateList:not(:hover) a[data-inherited-value]::after{ opacity: .1; } #elTemplateEditor_info li::before { display: inline-block; color: #fff; } .cTemplateList a[data-inherited-value="custom"]::after, .cTemplateState_custom::before { content: 'C'; background: #c9c030; color: #fff; } .cTemplateList a[data-inherited-value="inherit"]::after, .cTemplateState_inherit::before { content: 'I'; background: #83b256; color: #fff; } .cTemplateList a[data-inherited-value="changed"]::after, .cTemplateState_changed::before { content: 'M'; background: #c93054; color: #fff; }]]> /* ----- */ .ipsTemplate_box { max-height: 300px; overflow: auto; border: 1px solid #ededed; }