/* Generic Application CSS */ /* Prevent text selection during drag operations */ body.ft-dragging, body.ft-dragging * { user-select: none !important; -webkit-user-select: none !important; } /* Native thin scrollbars */ .overviewList, .transcriptContainer, .hypervideoPickerList { scrollbar-width: thin; } /* Minimal CSS Reset (replaces html5reset) */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: inherit; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } table { border-collapse: collapse; border-spacing: 0; } input, select { vertical-align: middle; } @font-face { font-family: 'TitilliumWeb'; src: url("../fonts/Titillium_Web/TitilliumWeb-Regular.woff2") format("woff2"); font-weight: normal; } @font-face { font-family: 'TitilliumWeb'; src: url("../fonts/Titillium_Web/TitilliumWeb-SemiBold.woff2") format("woff2"); font-weight: 600; } @font-face { font-family: 'TitilliumWeb'; src: url("../fonts/Titillium_Web/TitilliumWeb-Bold.woff2") format("woff2"); font-weight: bold; } @font-face { font-family: 'TitilliumWeb'; src: url("../fonts/Titillium_Web/TitilliumWeb-Light.woff2") format("woff2"); font-weight: 300; } /* Base typography for FrameTrail UI roots and detached overlays/clones. */ .frametrail-body, .ft-dialog, body > .contentViewPreview, body > .timelineElement.previewPopupWrapper, .ft-drag-clone { font-family: TitilliumWeb,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; font-weight: 400; } b { font-weight: 600; } .frametrail-body { position: relative; background: var(--primary-bg-color); overflow: hidden; display: flex; flex-direction: column; flex-wrap: nowrap; height: 100%; width: 100%; justify-content: flex-start; align-content: stretch; align-items: flex-start; container-type: inline-size; container-name: ft-root; } /* Full-page mode: when the target is itself, size to the viewport. */ body > .frametrail-body { height: 100vh; height: 100dvh; } .frametrail-body.editActive { position: fixed !important; top: 0px !important; left: 0px !important; width: 100% !important; height: 100% !important; z-index: 9999 !important; } body > .contentViewPreview, body > .timelineElement.previewPopupWrapper { background-color: var(--primary-bg-color); } button, input[type="submit"], input[type="button"], .button { font-family: TitilliumWeb,"Helvetica Neue",Helvetica,Arial,sans-serif; border: none; font-size: 14px; text-align: left; padding: 4px 10px; background-color: transparent; border: var(--input-border-width) solid var(--primary-bg-color); border-radius: var(--input-border-radius); color: var(--primary-bg-color); } button.small, .button.small { padding: 2px 4px 2px 1px; line-height: 12px; } button:focus, input[type="submit"]:focus, input[type="button"]:focus { outline: none; } button[disabled], input[disabled] { background-color: #a3a3a3; opacity: 0.4; pointer-events: none; } button:hover, input[type="submit"]:hover, input[type="button"]:hover, .button:hover { background-color: var(--primary-bg-color); color: var(--primary-fg-color); cursor: pointer; } button.active, input[type="submit"].active, input[type="button"].active, .button.active { background-color: var(--primary-bg-color); color: var(--primary-fg-color); } button.pressed, input[type="submit"].pressed, input[type="button"].pressed, .button.pressed { background-color: rgba(205,235,145,.8); color: var(--primary-bg-color); box-shadow: inset 0px 0px 5px rgba(0,0,0,0.45); border-color: var(--secondary-bg-color); } button .icon-hypervideo { margin-right: 6px; } input[type="text"], input[type="password"], textarea, input[type="number"], input[type="time"], input[type="email"] { font-family: TitilliumWeb,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; margin: 4px 8px 4px 0; padding: 4px 5px; border: var(--input-border-width) solid var(--semi-transparent-bg-color); border-radius: var(--input-border-radius); background: var(--primary-fg-color); color: var(--primary-bg-color); } input[type="text"]:focus, input[type="password"]:focus, textarea:focus { border-color: var(--primary-bg-color); } input[type="color"] { cursor: pointer; width: 100%; border: 1px solid var(--primary-bg-color); border-radius: var(--input-border-radius); background: var(--primary-fg-color); } input[type="range"] { width: 100%; background: #cfcfcf; accent-color: var(--primary-bg-color); border-radius: 3px; margin: 7px 0px; display: block; } input[type="radio"] { margin: 2px 2px 4px 2px } input[readonly], textarea[readonly] { background-color: rgba(100,100,100,.3); } details > summary { cursor: pointer; padding: 4px 0; user-select: none; } details[open] > summary { margin-bottom: 6px; } .frametrail-body hr { border-bottom: 1px solid var(--secondary-fg-color); border-top: none; margin-top: 10px; } /* CSS Grid system with 12 columns and Bootstrap-like breakpoints */ /* Gap of 15px (7.5px on each side) */ .layoutRow { display: grid; grid-template-columns: repeat(12, 1fr); gap: 15px; box-sizing: border-box; } /* All direct children of layoutRow are grid items */ .layoutRow > * { box-sizing: border-box; min-width: 0; /* Prevents grid overflow */ } /* Default (xs): Base column classes apply their spans at all sizes */ .layoutRow > .column-1 { grid-column: span 1; } .layoutRow > .column-2 { grid-column: span 2; } .layoutRow > .column-3 { grid-column: span 3; } .layoutRow > .column-4 { grid-column: span 4; } .layoutRow > .column-5 { grid-column: span 5; } .layoutRow > .column-6 { grid-column: span 6; } .layoutRow > .column-7 { grid-column: span 7; } .layoutRow > .column-8 { grid-column: span 8; } .layoutRow > .column-9 { grid-column: span 9; } .layoutRow > .column-10 { grid-column: span 10; } .layoutRow > .column-11 { grid-column: span 11; } .layoutRow > .column-12 { grid-column: span 12; } /* Small devices (≥576px) */ @media (min-width: 576px) { .layoutRow > .column-sm-1 { grid-column: span 1; } .layoutRow > .column-sm-2 { grid-column: span 2; } .layoutRow > .column-sm-3 { grid-column: span 3; } .layoutRow > .column-sm-4 { grid-column: span 4; } .layoutRow > .column-sm-5 { grid-column: span 5; } .layoutRow > .column-sm-6 { grid-column: span 6; } .layoutRow > .column-sm-7 { grid-column: span 7; } .layoutRow > .column-sm-8 { grid-column: span 8; } .layoutRow > .column-sm-9 { grid-column: span 9; } .layoutRow > .column-sm-10 { grid-column: span 10; } .layoutRow > .column-sm-11 { grid-column: span 11; } .layoutRow > .column-sm-12 { grid-column: span 12; } } /* Medium devices (≥768px) */ @media (min-width: 768px) { .layoutRow > .column-md-1 { grid-column: span 1; } .layoutRow > .column-md-2 { grid-column: span 2; } .layoutRow > .column-md-3 { grid-column: span 3; } .layoutRow > .column-md-4 { grid-column: span 4; } .layoutRow > .column-md-5 { grid-column: span 5; } .layoutRow > .column-md-6 { grid-column: span 6; } .layoutRow > .column-md-7 { grid-column: span 7; } .layoutRow > .column-md-8 { grid-column: span 8; } .layoutRow > .column-md-9 { grid-column: span 9; } .layoutRow > .column-md-10 { grid-column: span 10; } .layoutRow > .column-md-11 { grid-column: span 11; } .layoutRow > .column-md-12 { grid-column: span 12; } } /* Large devices (≥992px) */ @media (min-width: 992px) { .layoutRow > .column-lg-1 { grid-column: span 1; } .layoutRow > .column-lg-2 { grid-column: span 2; } .layoutRow > .column-lg-3 { grid-column: span 3; } .layoutRow > .column-lg-4 { grid-column: span 4; } .layoutRow > .column-lg-5 { grid-column: span 5; } .layoutRow > .column-lg-6 { grid-column: span 6; } .layoutRow > .column-lg-7 { grid-column: span 7; } .layoutRow > .column-lg-8 { grid-column: span 8; } .layoutRow > .column-lg-9 { grid-column: span 9; } .layoutRow > .column-lg-10 { grid-column: span 10; } .layoutRow > .column-lg-11 { grid-column: span 11; } .layoutRow > .column-lg-12 { grid-column: span 12; } } /* Extra large devices (≥1200px) */ @media (min-width: 1200px) { .layoutRow > .column-xl-1 { grid-column: span 1; } .layoutRow > .column-xl-2 { grid-column: span 2; } .layoutRow > .column-xl-3 { grid-column: span 3; } .layoutRow > .column-xl-4 { grid-column: span 4; } .layoutRow > .column-xl-5 { grid-column: span 5; } .layoutRow > .column-xl-6 { grid-column: span 6; } .layoutRow > .column-xl-7 { grid-column: span 7; } .layoutRow > .column-xl-8 { grid-column: span 8; } .layoutRow > .column-xl-9 { grid-column: span 9; } .layoutRow > .column-xl-10 { grid-column: span 10; } .layoutRow > .column-xl-11 { grid-column: span 11; } .layoutRow > .column-xl-12 { grid-column: span 12; } } /* Inputs in layoutRow children should be full width */ .layoutRow > * input[type="text"], .layoutRow > * textarea, .layoutRow > * select { width: 100%; box-sizing: border-box; } /* HypervideoPicker Grid Layout */ .hypervideoPickerDialog .hypervideoPickerList { display: grid; grid-template-columns: repeat(12, 1fr); gap: 15px; box-sizing: border-box; overflow-y: auto; } .hypervideoPickerDialog .hypervideoPickerList .hypervideoThumb { width: 100%; height: auto; margin: 0; aspect-ratio: 16 / 9; grid-column: span 3; } .hypervideoPickerDialog .hypervideoPickerList .hypervideoThumb:hover { border-color: var(--primary-bg-color); } .hypervideoPickerDialog .hypervideoPickerList .hypervideoThumb.activeHypervideo { opacity: .8; } .checkboxRow { margin-bottom: 4px; } .checkboxRow .switch { margin-top: 2px !important; } .checkboxRow label:not(.switch) { display: inline-block !important; width: auto !important; margin-bottom: 0px !important; } .contextSelectButton { position: relative; display: inline-block; } .contextSelectList { position: absolute; top: 20px; left: -2px; min-width: 170px; min-height: 10px; background: var(--primary-fg-color); border: 1px solid var(--primary-bg-color); box-shadow: 0 0 3px 0px var(--primary-bg-color); z-index: 99; display: none; max-height: 91px; overflow: auto; } .contextSelectButton.active .contextSelectList { display: block; } .contextSelectList div { display: block; margin: 0px; padding: 4px 10px; line-height: initial; color: var(--primary-bg-color); background: var(--primary-fg-color); } .contextSelectList div:hover { color: var(--primary-fg-color); background: var(--primary-bg-color); cursor: pointer; } /* Switch Button (Checkbox replacement) */ .switch { position: relative; display: inline-block; vertical-align: top; width: 30px; height: 17px; margin-right: 8px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; } .slider:before { position: absolute; content: ""; height: 13px; width: 13px; left: 2px; bottom: 2px; background-color: white; transition: .4s; } input:checked + .slider { background-color: var(--primary-bg-color); } input:focus + .slider { box-shadow: 0 0 1px var(--primary-bg-color); } input:checked + .slider:before { transform: translateX(13px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } /* Margin and padding helpers */ .m-0 { margin: 0 !important; } .mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .mt-0 { margin-top: 0 !important; } .mr-0 { margin-right: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .ml-0 { margin-left: 0 !important; } .p-0 { padding: 0 !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .pt-0 { padding-top: 0 !important; } .pr-0 { padding-right: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .pl-0 { padding-left: 0 !important; } .m-1 { margin: 10px !important; } .mx-1 { margin-left: 10px !important; margin-right: 10px !important; } .my-1 { margin-top: 10px !important; margin-bottom: 10px !important; } .mt-1 { margin-top: 10px !important; } .mr-1 { margin-right: 10px !important; } .mb-1 { margin-bottom: 10px !important; } .ml-1 { margin-left: 10px !important; } .p-1 { padding: 10px !important; } .py-1 { padding-top: 10px !important; padding-bottom: 10px !important; } .px-1 { padding-left: 10px !important; padding-right: 10px !important; } .pt-1 { padding-top: 10px !important; } .pr-1 { padding-right: 10px !important; } .pb-1 { padding-bottom: 10px !important; } .pl-1 { padding-left: 10px !important; } /* Tags */ .tagItem, .typeItem, .userItem { display: inline-block; padding: 2px 6px; color: var(--primary-fg-color); background: var(--secondary-bg-color); margin: 2px 6px 6px 0px; border-radius: 3px; line-height: 20px; cursor: default; } .tagItem:hover, .typeItem:hover, .userItem:hover { background: var(--primary-bg-color); } .tagItem .deleteItem, .typeItem .deleteItem, .userItem .deleteItem { display: inline-block; margin-right: -4px; cursor: pointer; } /* Theme Items */ .themeItem { float: left; width: 88px; height: 57px; padding: 4px 8px; margin: 6px; background: var(--primary-bg-color); color: var(--primary-fg-color); border: 4px solid #fff; outline: 1px solid #dfdfdf; cursor: pointer; transition-property: height; transition-duration: 40ms; overflow: hidden; } .themeItem.active, .themeItem:hover { outline: 4px solid #F90; } .themeItem .themeColorContainer { height: 16px; } .themeItem .themeColorContainer div { float: left; width: 33.2%; height: 100%; } .themeItem .themeColorContainer div.primary-fg-color { background: var(--primary-fg-color); } .themeItem .themeColorContainer div.secondary-bg-color { background: var(--secondary-bg-color); } .themeItem .themeColorContainer div.secondary-fg-color { background: var(--secondary-fg-color); } /* Option Cards */ /* Visual radio-style picker: a wrapper carries data-property and the currently picked data-value, its direct div[data-value] children are the cards. */ .optionCards > div[data-value] { display: inline-flex; flex-direction: column; align-items: stretch; cursor: pointer; vertical-align: top; width: 140px; margin-top: 6px; margin-right: 6px; border: 2px solid transparent; border-radius: 2px; overflow: hidden; } .optionCards > div[data-value].active { outline: 4px solid #F90; } .optionCards > div[data-value] > span { font-size: 13px; text-align: center; padding: 3px 4px 4px 4px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--secondary-bg-color); } .optionCards > div[data-value].active > span { font-weight: bold; } .optionCardThumb { position: relative; height: 60px; overflow: hidden; background: var(--primary-bg-color); flex-shrink: 0; } /* Messages */ .message { height: auto; line-height: 20px; background-color: #FCFAF1; border: 1px solid #FFC414; color: #333; padding: 1px 4px; margin-bottom: 10px; clear: both; border-radius: 3px; display: none; } .message.active { display: block; } .message.error { background-color: var(--primary-fg-color); border: 1px solid #cd0a0a; color: #cd0a0a; } .message.success { background-color: #f1ffe3; border: 1px solid #739600; color: #739600; } .workingSpinner { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin-top: -30px; margin-left: -30px; border-radius: 50%; transform-origin: center; background: var(--primary-fg-color); background: linear-gradient(to right, var(--primary-fg-color) 10%, transparent 42%); animation: loading 1s infinite linear; transform: translateZ(0); mask-image: radial-gradient(transparent 65%, #000 66%); -webkit-mask-image: radial-gradient(transparent 65%, #000 66%); } .workingSpinner:before { width: 50%; height: 50%; background: var(--primary-fg-color); border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0; content: ''; } .workingSpinner:after { background: var(--primary-bg-color); width: 90%; height: 90%; border-radius: 50%; content: ''; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .workingSpinner.dark { background: var(--primary-fg-color); background: linear-gradient(to right, var(--primary-bg-color) 10%, transparent 42%); } .workingSpinner.dark::before { background: var(--primary-bg-color); } @keyframes loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Tooltips (rendered in the top layer via the Popover API — see modules/Tooltip) */ .ftTooltip { /* reset the user-agent popover box so JS-set top/left take effect */ position: fixed; inset: auto; margin: 0; border: 0; width: auto; height: auto; max-width: none; overflow: visible; /* let the ::after arrow show outside the bubble */ /* appearance (matches the former data-tooltip bubble) */ background-color: var(--tooltip-bg-color); color: #333333; border-radius: 5px; font-size: 13px; font-weight: normal; line-height: 18px; padding: 3px 5px; white-space: nowrap; pointer-events: none; /* never intercept hover */ } .ftTooltip::after { content: ""; position: absolute; width: 0; height: 0; border: 4px solid transparent; } /* Bubble above the host -> arrow points down from the bubble's bottom edge */ .ftTooltip[data-placement="top"]::after, .ftTooltip[data-placement^="above"]::after { top: 100%; border-top-color: var(--tooltip-bg-color); border-bottom-width: 0; } .ftTooltip[data-placement="top"]::after { left: 50%; margin-left: -4px; } .ftTooltip[data-placement="above-left"]::after { left: 12px; } .ftTooltip[data-placement="above-right"]::after { right: 12px; } /* Bubble below the host -> arrow points up from the bubble's top edge */ .ftTooltip[data-placement^="below"]::after { bottom: 100%; border-bottom-color: var(--tooltip-bg-color); border-top-width: 0; } .ftTooltip[data-placement="below-left"]::after { left: 12px; } .ftTooltip[data-placement="below-right"]::after { right: 12px; } /* Bubble to the right of the host -> arrow points left */ .ftTooltip[data-placement="right"]::after { right: 100%; top: 7px; border-right-color: var(--tooltip-bg-color); border-left-width: 0; } /* Bubble to the left of the host -> arrow points right */ .ftTooltip[data-placement="left"]::after { left: 100%; top: 7px; border-left-color: var(--tooltip-bg-color); border-right-width: 0; } /* Variant: resource-title labels (e.g. the ContentView small strip). These were formerly the hover-revealed .resourceTitle overlays and keep that appearance, distinct from the app UI-hint tooltips above. */ .ftTooltip[data-variant="resourceTitle"] { background-color: var(--primary-bg-color); color: var(--primary-fg-color); text-shadow: none; min-width: 120px; height: 22px; line-height: 20px; text-align: center; padding: 1px 4px 0 4px; box-sizing: border-box; } /* recolor the arrow to match, for whichever placement the tooltip uses */ .ftTooltip[data-variant="resourceTitle"][data-placement="top"]::after, .ftTooltip[data-variant="resourceTitle"][data-placement^="above"]::after { border-top-color: var(--primary-bg-color); } .ftTooltip[data-variant="resourceTitle"][data-placement^="below"]::after { border-bottom-color: var(--primary-bg-color); } .ftTooltip[data-variant="resourceTitle"][data-placement="right"]::after { border-right-color: var(--primary-bg-color); } .ftTooltip[data-variant="resourceTitle"][data-placement="left"]::after { border-left-color: var(--primary-bg-color); } /* Dialog */ .ui-blocking-overlay { position: absolute; width: 100%; height: 100%; background: var(--primary-bg-color); /* background: -moz-radial-gradient(center, ellipse cover, var(--primary-bg-color) 1%, rgb(126, 126, 126) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,var(--primary-bg-color)), color-stop(100%,rgb(126, 126, 126))); background: -webkit-radial-gradient(center, ellipse cover, var(--primary-bg-color) 1%,rgb(126, 126, 126) 100%); background: -o-radial-gradient(center, ellipse cover, var(--primary-bg-color) 1%,rgb(126, 126, 126) 100%); background: -ms-radial-gradient(center, ellipse cover, var(--primary-bg-color) 1%,rgb(126, 126, 126) 100%); background: radial-gradient(ellipse at center, var(--primary-bg-color) 1%,rgb(126, 126, 126) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--primary-bg-color)', endColorstr='rgb(126, 126, 126)',GradientType=1 ); */ z-index: 100000; } .ui-blocking-overlay .ui-overlay-box { position: absolute; width: 400px; height: 250px; top: 50%; left: 50%; margin-top: -150px; margin-left: -175px; } .ui-blocking-overlay .ui-overlay-box .boxTitle { color: var(--primary-fg-color); font-size: 24px; font-weight: 100; text-align: center; margin-bottom: 40px; } .ui-blocking-overlay .ui-overlay-box button, .ui-blocking-overlay .ui-overlay-box input[type="submit"] { border-color: var(--primary-fg-color); color: var(--primary-fg-color); padding: 6px 12px; vertical-align: middle; margin-top: 10px; } .ui-blocking-overlay .ui-overlay-box input[type="text"], .ui-blocking-overlay .ui-overlay-box input[type="password"] { width: 100%; padding: 7px 10px; box-sizing: border-box; } .ui-blocking-overlay .ui-overlay-box button:hover, .ui-blocking-overlay .ui-overlay-box input[type="submit"]:hover { background-color: rgba(248,248,248, .1); } /* Tabs */ .ui-tabs { padding: 0.2em 0; } .ui-tabs .ui-tabs-nav { padding: 0.2em 0 0; margin: 0; overflow: hidden; /* clearfix for floated

elements */ list-style: none; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; margin: 0 2px 0 0; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav li a { display: block; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-right { float: right; } .ui-tabs .ui-tabs-nav li.ui-tabs-right.tab-label { padding: 5px 8px 0 0; } .ui-tabs .ui-tabs-nav li.ui-state-disabled a { color: #cfcfcf; pointer-events: none; } .ui-tabs .ui-tabs-nav li a, .ui-tabs .ui-tabs-nav .ui-tabs-anchor { color: var(--primary-bg-color); opacity: .8; background: var(--primary-fg-color); border-bottom: 1px solid var(--secondary-bg-color); padding: 3px 8px; margin-right: 2px; } .ui-tabs .ui-tabs-nav li a:hover, .ui-tabs .ui-tabs-nav .ui-tabs-anchor:hover { opacity: 1; } .ui-tabs .ui-tabs-nav li.ui-state-active a { opacity: 1; outline: none; border-color: var(--primary-bg-color); font-weight: 600; } .ui-tabs .ui-tabs-panel { padding: 12px 0px 0px 0px; position: relative; } /* Accordion */ .ui-accordion .ui-accordion-header { cursor: pointer; padding: 6px 10px; background: var(--primary-bg-color); color: var(--primary-fg-color); border: 1px solid var(--border-color, #555); border-radius: 3px; margin-top: 4px; user-select: none; } .ui-accordion .ui-accordion-header.ui-state-active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ui-accordion .ui-accordion-content { padding: 10px; border: 1px solid var(--border-color, #555); border-top: none; border-radius: 0 0 3px 3px; } /* Droppable UI */ .droppableActive { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAEElEQVQImWN4v0/zPwNBAABnuALWAA7X1wAAAABJRU5ErkJggg==") !important; box-shadow: 0 0 0px 1px #FF9919 inset !important; } .droppableHover { box-shadow: 0 0 1px 3px #FF9919 inset !important; } /* Generic Hypervideo Settings */ .hypervideoLayout .settingsContainer { background: var(--primary-bg-color); height: 144px; position: relative; margin-bottom: 10px; font-size: 12px; color: var(--primary-fg-color); width: 315px; border: 5px solid var(--primary-bg-color); overflow: hidden; cursor: default; } .hypervideoLayout .settingsContainer .layoutSettingsWrapper { float: left; width: 180px; border-right: 5px solid var(--primary-bg-color); } .hypervideoLayout .settingsContainer [data-config] { background-color: #959698; color: #333; font-weight: 100; padding-top: 5px; position: relative; text-align: center; } .hypervideoLayout .settingsContainer [data-config]:hover { background-color: #AFAFAF; cursor: pointer; } .hypervideoLayout .settingsContainer [data-config].active { background-color: #F8F8F8; } .hypervideoLayout .settingsContainer [data-config="areaTopVisible"] { clear: both; height: 22px; } .hypervideoLayout .settingsContainer .playerWrapper { height: 80px; margin: 5px 0; } .hypervideoLayout .settingsContainer .playerWrapper [data-config="overlaysVisible"] { float: left; height: 75px; width: 110px; margin-right: 5px; } .hypervideoLayout .settingsContainer .playerWrapper [data-config="areaRightVisible"] { float: left; height: 75px; width: 65px; } .hypervideoLayout .settingsContainer [data-config="areaBottomVisible"] { clear: both; height: 22px; } .hypervideoLayout .settingsContainer .genericSettingsWrapper { float: left; height: 50px; margin: 10px; width: 110px; } .hypervideoLayout .settingsContainer .genericSettingsWrapper [data-config="slidingMode"] { height: 20px; padding-top: 0; background: #f8f8f8; } .hypervideoLayout .settingsContainer .genericSettingsWrapper [data-config="slidingMode"] .slidingMode { float: left; pointer-events: none; height: 100%; width: 50%; outline: 1px solid #333; background-color: #959698; color: #333; } .hypervideoLayout .settingsContainer .genericSettingsWrapper [data-config="slidingMode"] .slidingMode[data-value="adjust"] { background-color: #F8F8F8; } .hypervideoLayout .settingsContainer .genericSettingsWrapper [data-config="slidingMode"].active .slidingMode[data-value="adjust"] { background-color: #959698; } .hypervideoLayout .settingsContainer .genericSettingsWrapper [data-config="slidingMode"].active .slidingMode[data-value="overlay"] { background-color: #F8F8F8; } /* Generic User Management CSS */ .selectUserContainer { float: left; margin: 10px 0; } .userDataContainer { display: none; float: left; margin-left: 25px; margin-top: 7px; width: 370px; } .userColorCollectionItem { width: 20px; height: 20px; display: inline-block; margin: 3px; opacity: 0.8; cursor: pointer; } .userColorCollectionItem:hover, .userColorCollectionItem:focus { opacity: 1; } .userColorCollectionItem.selected { outline: 3px solid var(--primary-bg-color); opacity: 1; } /* Collaboration presence avatars A round avatar carrying up to two initials. The fill and the initials' colour are set inline from the user's own colour; the full name lives in the tooltip, so this stays a fixed size no matter how long the name is. Unscoped, because the titlebar and the settings dialogs all render it. */ .collaborationChip { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; width: 26px; height: 26px; margin: 0 3px; overflow: hidden; border-radius: 50%; background: var(--secondary-bg-color); color: var(--primary-bg-color); font-size: 11px; font-weight: 600; line-height: 1; text-transform: uppercase; cursor: default; } /* The lock holder — the one person whose edits are actually landing. */ .collaborationChip.editing { box-shadow: 0 0 0 2px var(--primary-bg-color); } /* Presence inside a dialog's title bar: avatars sit at the right, and the status message is centred in the title row. Both are title-level metadata about the document rather than actions, so they live here and not in the button pane. Absent entirely when there is nothing to say. */ .collaborationPresence.dialogPresence { display: none; } .ft-dialog-titlebar .collaborationPresence.dialogPresence:not(:empty) { display: flex; align-items: center; flex-wrap: nowrap; flex-shrink: 0; margin-right: 8px; } /* Pull the close button out of its corner pin and into the title row, so it lines up with the avatars. Scoped to bars that actually carry presence, so every other dialog keeps its existing close-button placement. */ .ft-dialog-titlebar.hasCollabPresence .ft-dialog-titlebar-close { position: static; display: flex; align-items: center; flex-shrink: 0; padding: 0; } /* Another user holds this scope's edit lock: the form is readable but inert. Only the content wrapper — the title bar keeps the avatars, the message naming the holder, and a working close button at full opacity. */ .ft-dialog.collabLocked .ft-dialog-content { opacity: .5; pointer-events: none; } .ft-dialog-titlebar .dialogCollabMessage { display: none; } .ft-dialog-titlebar .dialogCollabMessage.active { display: block; flex: 1 1 auto; min-width: 0; margin: 0 12px; padding: 1px 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; font-size: 12px; line-height: 18px; } .admin-only { opacity: .4; pointer-events: none; } .cc-by-sa-bg-image { background-repeat: no-repeat; background-size: 100% auto; background-position: center; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIKCSBpZD0ic3ZnMiIgaW5rc2NhcGU6dmVyc2lvbj0iMC45MSByMTM3MjUiIHNvZGlwb2RpOmRvY25hbWU9ImhqaGouc3ZnIiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDgwMCAyNjciCgkgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgODAwIDI2NzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjE5O30KCS5zdDF7ZmlsbDojRkZGRkZGO3N0cm9rZTojRkZGRkZGO30KCS5zdDJ7ZmlsbDojRkZGRkZGO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoxNTt9Cgkuc3Qze2ZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MzEuNDt9Cgkuc3Q0e2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+Cjxzb2RpcG9kaTpuYW1lZHZpZXcgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiBib3JkZXJvcGFjaXR5PSIxLjAiIGZpdC1tYXJnaW4tYm90dG9tPSIwIiBmaXQtbWFyZ2luLWxlZnQ9IjAiIGZpdC1tYXJnaW4tcmlnaHQ9IjAiIGZpdC1tYXJnaW4tdG9wPSIwIiBpZD0iYmFzZSIgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxIiBpbmtzY2FwZTpjeD0iNzk2Ljk2MDY3IiBpbmtzY2FwZTpjeT0iMjA1Ljk1MjcyIiBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0icHgiIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwODQiIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTAwOCIgaW5rc2NhcGU6d2luZG93LXg9IjEwMjQiIGlua3NjYXBlOndpbmRvdy15PSIwIiBpbmtzY2FwZTp6b29tPSIwLjQ4IiBwYWdlY29sb3I9IiNmZmZmZmYiIHNob3dncmlkPSJmYWxzZSI+Cgk8L3NvZGlwb2RpOm5hbWVkdmlldz4KPGcgaWQ9ImxheWVyMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTQuMjg1NzEzLDMyOC43OTg1MikiIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiIGlua3NjYXBlOmxhYmVsPSJMYXllciAxIj4KCTxlbGxpcHNlIGlkPSJwYXRoNDE0NyIgY2xhc3M9InN0MCIgY3g9IjY5LjYiIGN5PSItMTk2IiByeD0iMTE1LjgiIHJ5PSIxMTUuNSIvPgoJPGVsbGlwc2UgaWQ9ImVsbGlwc2U0MTQ5IiBjbGFzcz0ic3QwIiBjeD0iMzQ1LjIiIGN5PSItMTk2IiByeD0iMTE1LjgiIHJ5PSIxMTUuNSIvPgoJPGVsbGlwc2UgaWQ9ImVsbGlwc2U0MTUxIiBjbGFzcz0ic3QwIiBjeD0iNjIyLjQiIGN5PSItMTk2IiByeD0iMTE1LjgiIHJ5PSIxMTUuNSIvPgoJPHBhdGggaWQ9InBhdGg0MTUzIiBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiBzb2RpcG9kaTpub2RldHlwZXM9ImNjY2NjY2NjY2NjIiBjbGFzcz0ic3QxIiBkPSJNMzI0LjktMTEwbDAuMy02NC4yCgkJbC0xNC43LTAuMlYtMjMxYzAuMS0zLjIsMS43LTYuMiw2LjItNS45bDU4LjQtMC40YzMuOSwwLjcsNy40LDIsNy4xLDguMWwtMC4zLDU1LjhsLTE1LjQsMC4ydjYzLjhMMzI0LjktMTEweiIvPgoJPGVsbGlwc2UgaWQ9InBhdGg0MTU1IiBjbGFzcz0ic3QyIiBjeD0iMzQ1LjMiIGN5PSItMjY0LjUiIHJ4PSIxNi44IiByeT0iMTYuMyIvPgoJCgkJPHBhdGggaWQ9InBhdGg0MTU3IiBzb2RpcG9kaTpjeD0iNzgyLjk4NyIgc29kaXBvZGk6Y3k9Ii0xNjAuMjAwMDMiIHNvZGlwb2RpOmVuZD0iMi45MDU3ODc1IiBzb2RpcG9kaTpvcGVuPSJ0cnVlIiBzb2RpcG9kaTpyeD0iNjMuNzk3NTM1IiBzb2RpcG9kaTpyeT0iNzIuODg4NDUxIiBzb2RpcG9kaTpzdGFydD0iMy40NTE5MjIiIHNvZGlwb2RpOnR5cGU9ImFyYyIgY2xhc3M9InN0MyIgZD0iCgkJTTU3Ni45LTIxMS43YzcuOC0yNy43LDMyLjMtNDQuNyw1Ny40LTM5LjZjMjUuMSw1LDQzLjEsMzAuNSw0Mi4yLDU5LjZjLTEsMjkuMS0yMC42LDUzLTQ1LjksNTUuOWMtMjUuNCwyLjktNDguNy0xNi4xLTU0LjctNDQuNCIKCQkvPgoJPHBhdGggaWQ9InBhdGg1MjQ3IiBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiBzb2RpcG9kaTpub2RldHlwZXM9ImNjY2MiIGNsYXNzPSJzdDEiIGQ9Ik01NjkuOC0xOTguMmwtMTQuMi0yOGw0Ni4yLDE1LjYKCQlMNTY5LjgtMTk4LjJ6Ii8+CjwvZz4KPHBhdGggY2xhc3M9InN0NCIgZD0iTTE2MywxNTMuOWMtNS42LDAtMTAtMi0xMi45LTZzLTQuNC05LjYtNC40LTE2LjVjMC0xNS4zLDUuNi0yMi45LDE3LjMtMjIuOWMyLjQsMCw0LjgsMC44LDcuNiwyLjRzNC44LDQsNi44LDgKCWwxNi45LTguOGMtNi44LTEyLjQtMTguMS0xOC41LTM0LjEtMTguNWMtMTAuOCwwLTE5LjcsMy42LTI2LjksMTAuOGMtNy4yLDcuMi0xMC44LDE2LjktMTAuOCwyOS4zczMuNiwyMi41LDEwLjQsMjkuMwoJYzYuOCw3LjIsMTYuMSwxMC40LDI3LjcsMTAuNGM3LjIsMCwxMy43LTEuNiwxOS43LTUuMnMxMC44LTguNCwxNC4xLTE0LjlsLTE2LjEtOEMxNzUuOSwxNDkuOCwxNzAuMiwxNTMuOSwxNjMsMTUzLjl6Ii8+CjxwYXRoIGNsYXNzPSJzdDQiIGQ9Ik04OC43LDE1My45Yy01LjYsMC0xMC0yLTEyLjktNmMtMi44LTQtNC40LTkuNi00LjQtMTYuNWMwLTE1LjMsNS42LTIyLjksMTcuMy0yMi45YzIuNCwwLDQuOCwwLjgsNy42LDIuNAoJYzIuOCwxLjYsNC44LDQsNi44LDhsMTcuMy04LjhjLTYuOC0xMi40LTE4LjUtMTguNS0zNC4xLTE4LjVjLTEwLjgsMC0xOS43LDMuNi0yNi45LDEwLjhjLTcuMiw3LjItMTAuOCwxNi45LTEwLjgsMjkuMwoJUzUyLjIsMTU0LjIsNTksMTYxYzcuMiw3LjIsMTYuNSwxMC40LDI3LjcsMTAuNGM3LjIsMCwxMy43LTEuNiwxOS43LTUuMnMxMC40LTguNCwxNC4xLTE0LjlsLTE1LjctOAoJQzEwMS42LDE0OS44LDk2LjMsMTUzLjksODguNywxNTMuOXoiLz4KPC9zdmc+Cg=="); } /* Custom styled select dropdown */ .custom-select { position: relative; display: inline-block; } .layoutRow .custom-select { display: block; } .custom-select select { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; box-sizing: border-box; padding: 4px 30px 4px 10px; border: var(--input-border-width) solid var(--primary-bg-color); border-radius: var(--input-border-radius); background-color: var(--primary-fg-color); cursor: pointer; font-family: inherit; } .custom-select select:focus { outline: none; border-color: #666; } .custom-select::after { font-family: "FrameTrail"; content: '\f107'; /* icon-angle-down */ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 14px; color: #666; } /* SortableJS drag ghost placeholder (replaces jQuery UI ui-state-highlight) */ .sortable-placeholder { background: var(--semi-transparent-fg-color, rgba(255,255,255,0.15)); border: 1px dashed var(--primary-fg-color, #fff); opacity: 0.5; } /* interact.js drag source placeholder — the element left in place while the clone is dragged */ .dragPlaceholder { background: var(--secondary-fg-color) !important; background-image: none !important; outline: 2px dashed var(--secondary-fg-color, rgba(220,220,220,1)) !important; border-color: transparent !important; box-shadow: none !important; } .dragPlaceholder > * { opacity: 0.2; } /* CodeMirror 6 editor wrapper sizing */ .cm6-wrapper { position: relative; box-sizing: border-box; margin: 0px; } .cm6-wrapper .cm-editor { height: 100%; } .cm6-wrapper .cm-scroller { overflow: auto; } /* ------------------------------------------------------------------------ * Resize handles * * Every editing surface injects the same markup — a `.ui-resizable-handle` * carrying a direction class — so the appearance lives here once instead of * being restated per widget. See Overlay/type.js (canvas + timeline), * Annotation/type.js (timeline) and ViewOverviewMap/module.js (map pins). * * Only the corner handles are styled here, because only the canvases inject * them; timelines inject `e`/`w` handles and render those as edge bars, which * they style themselves. * * Handles sit just outside the element's bounding box, so they stay clear of * its content and of the element's own `move` cursor. Each context only has to * decide when they are visible. * --------------------------------------------------------------------- */ .ui-resizable-handle { position: absolute; touch-action: none; } .ui-resizable-handle.ui-resizable-ne, .ui-resizable-handle.ui-resizable-nw, .ui-resizable-handle.ui-resizable-se, .ui-resizable-handle.ui-resizable-sw { width: 8px; height: 8px; background-color: var(--primary-fg-color); border: 3px solid var(--primary-bg-color); border-radius: 50%; box-sizing: content-box; } .ui-resizable-handle.ui-resizable-ne { top: -8px; right: -8px; cursor: ne-resize; } .ui-resizable-handle.ui-resizable-nw { top: -8px; left: -8px; cursor: nw-resize; } .ui-resizable-handle.ui-resizable-se { bottom: -8px; right: -8px; cursor: se-resize; } .ui-resizable-handle.ui-resizable-sw { bottom: -8px; left: -8px; cursor: sw-resize; } /* Bigger touch targets, re-centred on the same corners. */ @media (pointer: coarse) { .ui-resizable-handle.ui-resizable-ne, .ui-resizable-handle.ui-resizable-nw, .ui-resizable-handle.ui-resizable-se, .ui-resizable-handle.ui-resizable-sw { width: 20px; height: 20px; } .ui-resizable-handle.ui-resizable-ne { top: -10px; right: -10px; } .ui-resizable-handle.ui-resizable-nw { top: -10px; left: -10px; } .ui-resizable-handle.ui-resizable-se { bottom: -10px; right: -10px; } .ui-resizable-handle.ui-resizable-sw { bottom: -10px; left: -10px; } }