/*vschode.css*/ /*#region @@@@ VARIABLES @@@@ */ :root { --headerHeight: 0px; --headHeight: 36px; --sideHeadHeight: 36px; /* must match js */ --flyingHeadHeight: 36px; --footerHeight: 0px; --donateBoxHeight: 00px; --textBoxWrapHeight: 3rem; --splitterWidth: 12px; --splitterWidth2: 6px; --msplitterWidth2: -6px; --splitterShift: 3px; --uiFont: 'Segoe UI'; /* TODO: default font for mac */ --fontSize: 12.999px; --outlineHeight: 0%; --outlineButtonHeight: 24px; /* must match js */ --floatingWindowWidth: 500px; /* must match js */ --floatingWindowHeight: 400px; /* must match js */ --refWidth: 30%; --chatBoxHeight: 60px; --chatTextAreaHeight:34px; --treeIndent: 20px; --bold: 500; --iconPathWidth:10; --settingsWidth: 320px; /* must match js */ --borderWidth: 1px; --verticalTabsWidth: 150px; --smallBorderRadius: 2px; --tabWidth: 200px; /* must match js */ --main1Width: 100%; --main1Height: 100%; --main2Width: 100%; --main2Height: 100%; --main3Width: 100%; --main3Height: 100%; --ref1Width: 100%; --ref1Height: 100%; --ref2Width: 100%; --ref2Height: 100%; --ref3Width: 100%; --ref3Height: 100%; } @font-face { font-family: "Roboto Light"; src: url("fonts/ui/Roboto-Light.ttf"); } @font-face { font-family: "Roboto Light"; font-style: italic; src: url("fonts/ui/Roboto-LightItalic.ttf"); } @font-face { font-family: "Roboto Light"; font-weight: bold; src: url("fonts/ui/Roboto-Regular.ttf"); } @font-face { font-family: "Roboto"; src: url("fonts/ui/Roboto-Regular.ttf"); } @font-face { font-family: "Roboto"; font-style: italic; src: url("fonts/ui/Roboto-Italic.ttf"); } @font-face { font-family: "Roboto"; font-weight: bold; src: url("fonts/ui/Roboto-Bold.ttf"); } @font-face { font-family: "Proxima Nova Light"; src: url("fonts/ui/proximanova_light.otf"); } @font-face { font-family: "Proxima Nova Light"; src: url("fonts/ui/proximanova-regular.otf"); } @font-face { font-family: "Proxima Nova Thin"; src: url("fonts/ui/proximanova-thin.otf"); } /*#endregion*/ /*#region @@@@ MAIN @@@@ */ html, body { margin: 0; padding: 0; height: 100%; width:100%; __color:blue; overflow:hidden !important; /* -webkit-font-smoothing: antialiased; */ __background-image: url('https://octodex.github.com/images/minion.png'); } /* #middle { } */ * { box-sizing: border-box; __position:relative; } html { font-family: var(--uiFont), sans-serif; /* font-weight:normal; font-weight:400; */ font-size: var(--fontSize); __line-height: 1.6; line-height: 1.5384; /* 20px when font-size is 13px. This is important for suggestions scrolling */ __background-color: var(--panelBackground) !important; /* is being given cyan at the moment for some reason */ } .scunthorpe { /* border-radius:5px; overflow:hidden; */ } /* #scunthorpe, .scunthorpe, .code, #side, #explorer, #stem { background-color:transparent !important; } https://www.digitalocean.com/community/tutorials/how-to-change-a-css-background-images-opacity #middle { position: relative; } #middle:before { content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.06; background-image: url('https://assets.digitalocean.com/labs/images/community_bg.png'); background-repeat: no-repeat; background-position: 50% 0; background-size: cover; } */ body { color: var(--color); background-color: var(--panelBackground); background-color: var(--bodyBackground); __background-color: green; __border-top: var(--borderWidth) solid var(--mainBorder); __overflow:auto; -ms-touch-action: none; -webkit-touch-action:none; touch-action:none; /*Stops pinch zoom changing browser size on ipad */ /*Get rid of annoying pull down to refresh feature on chrome on android */ /* And also stops side swipes on android but only if using navigation bar and not gestures */ overscroll-behavior: none; /*padding-top: env(titlebar-area-height, 32px);*/ __padding-top: env(titlebar-area-height, 0); padding-top: calc(env(titlebar-area-height, 0) + 1px); /* 27th Aug 2025. Added 1px to fix title bar border aretefact */ __padding-top: 0; /* padding:10px; background-color: magenta; */ __display:none !important; /* padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left, 0px); */ /* transform: scale(1.5); transform-origin: 0 0; width:66.667%; height:66.667%; */ } /* body[data-name="vschode_COPY"] { padding:1rem; background-color: violet; } body[data-name="easygroups"] { border: 1rem solid orange; } */ /* textarea, select, input { field-sizing: content !important; } */ input[type="checkbox"], input[type="range"], input[type="radio"] { accent-color: var(--secondColor); } optionNOT:hover { background-color: yellow; } button, input[type="file"]::file-selector-button { color: var(--color); background: var(--menuBackground) !important; border-width:1px; border-radius:2px; border-color: var(--mainBorder); border-style:solid; padding-left:0; padding-right:0; } button:hover, input[type="file"]::file-selector-button:hover { background: var(--hoverBackground) !important; } button[disabled] { opacity:0.4; } .invertButton { __background: var(--secondColor, blue) !important; background: var(--primaryButton, blue) !important; color: white; border-radius:8px; border-radius:0.8rem; ___border-radius: var(--smallBorderRadius); line-height:1.25rem; height:1.6rem; padding-left:0.6rem; padding-right:0.6rem; } .invertButton:hover { __background: var(--secondColor) !important; __filter: brightness(1.2) !important; /* https://ishadeed.com/article/css-relative-colors/ */ background-color: hsl(from var(--primaryButton) h s calc(l - 10)) !important; cursor:pointer; } .plainButton, input[type="file"]::file-selector-button { __background: var(--secondColor, blue) !important; __background: var(--menuBackground); __background: var(--headBackground) !important; background: var(--secondaryButton, transparent) !important; border-radius:8px; border-radius:0.8rem; ___border-radius: var(--smallBorderRadius); line-height:1.25rem; height:1.6rem; padding-left:0.6rem; padding-right:0.6rem; __border-width:0; color:var(--color); __background: transparent !important; } .plainButton:hover, input[type="file"]::file-selector-button:hover { __background-color: transparent !important; __border:1px solid var(--color); cursor:pointer; } .excludeButton { float:right; position:relative; top:-5px; padding-top:0; height:1.5rem; line-height:1.5rem; } .footerButton { float:right; } input::-webkit-input-placeholder { opacity:0.6; /* placeholder text is too pronounced in light mode, but changing opacity not so good in dark mode */ } input { width:100%; background: var(--codeBackground); caret-color: var(--caretColor); color: var(--color); border-width:1px; border-radius:2px; border-radius:var(--smallBorderRadius); border-color: var(--mainBorder); border-style:solid; } ___input[type="file"]::file-selector-button { background-color: red !important; } .hide { display: none !important; } .nowrap { white-space: nowrap; } #header { __display:none; height: var(--headerHeight); Background: rgba(255, 247, 250, 0.99); __background: color(display-p3 1 0 0); line-height:1rem; color: black; } #footer { height: var(--footerHeight); background:#fed; __background: rgb(255 0 0); color:black; clear:both; } .head { __background: rgb(255 0 0) !important; /* box-shadow: 0px 0px 4px var(--mainBorder); z-index:2; */ } #middle { __overflow:hidden !important; width:100%; height: calc(100% - var(--headerHeight) - var(--footerHeight) - var(--donateBoxHeight)); __border-top:1px solid var(--mainBorder); } #middle.settingsVisible { float:left; width: calc(100% - var(--settingsWidth)); min-width:50%; } #settingsPanel { __background-color: var(--panelBackground); __display:none; width:var(--settingsWidth); max-width:50%; height: calc(100% - var(--headerHeight) - var(--footerHeight) - var(--donateBoxHeight)); float:left; border-left: var(--borderWidth) solid var(--mainBorder); border-top: var(--borderWidth) solid var(--mainBorder); position: relative; overflow:hidden; __outline: var(--borderWidth) solid var(--mainBorder); __outline:2px solid red; __outline-offset:-1px; } #side, #input, #output, #livePreview, #folderSearch, #main, #main1, #main2, #main3, #ref, #ref1, #ref2, #ref3 { float: left; position: relative; } #____input {float:right;} .house, #side { __border-right: var(--borderWidth) solid var(--mainBorder); __border-right: 1px solid red; user-select: none; __margin:4px; __border-radius:4px; /* border:6px solid transparent !important; border-radius:10px; */ } #side.floatright { float:right; border-left: var(--borderWidth) solid var(--mainBorder); } #innerSide {height:100%;} #input { __border-left: var(--borderWidth) solid var(--mainBorder); } .house { border-top:var(--borderWidth) solid var(--mainBorder); __border-bottom:var(--borderWidth) solid var(--mainBorder) !important; border-left:var(--borderWidth) solid var(--mainBorder); height:100%; } .innerHouse { width:100%; height:100%; } .innerPanel { background-color: var(--panelBackground); overflow:hidden; } .house.maximized { width:100% !important; height:100% !important; } .house.minimized { display:none; } #explorer { /* border-bottom:var(--borderWidth) solid var(--mainBorder); */ height: calc(100% - var(--outlineHeight) - var(--outlineButtonHeight) - 1px); /* 1px hack to prevent overflow:hidden being needed on body */ } #outlineButton { background-color: var(--panelBackground); background-color: var(--headBackground); height: var(--outlineButtonHeight); padding-left:0.3rem; padding-top:0.1rem; } #outlineButton:before { content: '\2335'; } #outlineButton:has(+ #_outlineWrap.hide):before { content: '>'; } #outlineButton:has(+ #_outlineWrap.hide) > :is(#sideSplit, #NOT___outlineName) { display: none; } #___main1 { outline:4px solid skyblue; } #side { border-top:var(--borderWidth) solid var(--mainBorder); } #sideHead { border-bottom:var(--borderWidth) solid var(--mainBorder); __height: calc(var(--sideHeadHeight) + 0.5px); /*TODO: annoyingly this line isn't quite flush */ height: var(--sideHeadHeight); clear:left; line-height: var(--sideHeadHeight); __padding-right:14px; /* padding right stops closeSideButton overlapping an icon */ background-color: var(--panelBackground); background-color: var(--headBackground); } #sideHead.floatright {__padding-left:1.6rem;} #sideHeadInner { height: calc(var(--sideHeadHeight) + 0px); } /* #sideHead:hover { cursor: pointer; background-color: var(--hoverBackground); } */ #menuButton { margin:0 auto; line-height: var(--sideHeadHeight) } #menuButton:hover { background-color: var(--hoverBackground); } #___openSideButton, #__closeSideButton2 { position:absolute; left:1px; top:2px; padding-left:0; padding-right:0; /* background: transparent !important; */ } #__closeSideButton2 {display:none !important;} #__closeSideButton { __display:none !important; position:absolute; right:1px; __top:2px; padding-left:0; padding-right:0; /* background: transparent !important; */ } .arrowButton { height:2.2rem; background:transparent !important; border: 0px solid transparent; } .arrowButton:hover { __background: var(--menuBackground) !important; } #donateBox { display: flex; flex-direction: column; __justify-content: center; align-items: center; height: var(--donateBoxHeight); padding:0.25rem; padding-top:0.7rem; border: var(--borderWidth) solid var(--mainBorder); background-color: var(--panelBackground); } /*#endregion*/ /*#region @@@@ START WINDOW @@@@ */ #welcome { position:fixed; width: 100%; height: 100%; } #dimmerDiv { position:fixed; width: 100%; height: 100%; top:0; left:0; background-color: rgba(0, 0, 0, 0.5); z-index:10; } #videoWrap { width:100%; height:40% } #videoFrame { width:100%; height:100% } #videoWrap { /* filter: invert(100%) hue-rotate(180deg); */ } #___startBox { anchor-name: --startAnchor; __background-color:var(--codeBackground); position:fixed; top:15%; __text-align:center; __padding-left: calc(50% - 100px); width: max-content; margin:0 auto; left: calc(50% - 100px); user-select: none; } #___startBox > button { width:200px; margin-top:10px; } #__startBox { position:fixed; top:50px; margin:0 25%; width: 50%; max-width:1000px; min-width:200px; padding:12px; padding-right:0px; height:85%; /* TODO: would like file list to be smaller when not many files, but need to specify a height to get the scrollbars */ overflow-y: scroll; __max-height:50%; outline: 1px solid orange; } #navBox { text-align:center; } #startBox { display: flex; flex-direction: column; justify-content: center; align-items: center; position:relative; height:100%; __outline: 1px solid orange; } #innerStartBox { margin-top:6rem; width: calc(100% - 2rem); height: calc(100% - 4rem); max-width:1200px; display: flex; flex-direction: column; background-color: var(--bodyBackground); __outline: 1px solid red; } #closeStartBox {float:right; margin-right:1rem;} #topDiv { margin:0 auto; width:100%; max-width:300px; __outline:1px dotted blue; padding: 1rem; flex-shrink: 0; background-color:var(--menuBackground); border:var(--borderWidth) solid var(--mainBorder); border-radius:4px; __box-shadow: 1px 2px 6px var(--mainBorder); } #beta { vertical-align:top; font-size: 1rem; color: var(--secondColor); border: 1px solid var(--secondColor); font-weight:normal; margin-left:0.2rem; padding-left:0.2rem; padding-right:0.2rem; } #dropZone { display:block; margin-top:1rem; width:200px; height:50px; background:var(--menuBackground); resize: none; overflow: hidden; __margin-top:10px; } #dropZone::placeholder { /* color: #444; font-weight: bold; */ font-family: var(--uiFont), sans-serif; padding-top:0.5rem; text-align: center; vertical-align: middle; /* line-height: 50px; */ overflow: hidden; } /* https://codepen.io/rdhaliwal/pen/KzMKOP */ #dropZone.dropReady { __height: 100%; __width: 100%; background: linear-gradient(90deg, greenyellow 50%, transparent 50%), linear-gradient(90deg, greenyellow 50%, transparent 50%), linear-gradient(0deg, greenyellow 50%, transparent 50%), linear-gradient(0deg, greenyellow 50%, transparent 50%); background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px; background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0px; __border-radius: 5px; border:0px; padding: 10px; animation: dash 5s linear infinite; } @keyframes dash { to { background-position: 100% 0%, 0% 100%, 0% 0%, 100% 100%; } } #___dropZone.dropReady { outline:2px dashed orange; } #bottomDiv { flex:1; flex-grow: 1; flex-basis: 0; __outline:1px dotted green; overflow:auto; margin-top:4rem; } #recentContainer { padding-top:1rem; position:relative; height:calc(100% - 1rem); display: flex; flex-direction: row; justify-content: center; gap: 1rem; overflow-x: auto; overflow-y: hidden; align-items: flex-start; } #recentContainer[data-cols="4"] > .recentWrap {width: 25%;} #recentContainer[data-cols="3"] > .recentWrap {width: 33.3333%;} #recentContainer[data-cols="2"] > .recentWrap {width: 50%;} #recentContainer[data-cols="1"] > .recentWrap {width: 100%;} .recentWrap { __margin:1rem; min-width: 64px; max-width:500px; max-height: calc(100% - 40px); display: flex; flex-direction: column; __background-color: var(--panelBackground); background-color:var(--menuBackground); border:var(--borderWidth) solid var(--mainBorder); border-radius:4px; __box-shadow: 1px 2px 6px var(--mainBorder); __outline:1px solid red; } .recentHeading { padding: 10px; font-weight: bold; __color: #172b4d; __outline: 1px dotted blue; border-bottom: 1px solid var(--mainBorder); background-color: var(--headBackground); border-top-right-radius:4px; border-top-left-radius:4px; } .sort.link, .clear.link { float:right; font-weight: normal; display:none; cursor:pointer !important; margin-left:0.67rem; } .sort.link:hover, .clear.link:hover { text-decoration: underline; } .recentHeading:hover > :is(.sort, .clear).link {display: block;} .recentContent { __padding: 0 10px; overflow-y: auto; max-height: calc(100vh - 100px); cursor: default; __outline: 1px dotted green; } .recentItem { padding:0.5rem; padding-left:1rem; border-bottom: 1px solid var(--mainBorder); cursor: pointer; } .recentItem:last-child { border-bottom: 0px solid var(--mainBorder); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } #recentFoldersList, #recentFilesList, #recentWorkspacesList, #scratchList { __cursor:pointer; __max-height: 50px; __overflow: auto; __border: var(--borderWidth) solid var(--mainBorder); __width:80%; __max-width:300px; } .recentItem { position: relative; } .recentItem:hover, { text-decoration: underline; } /* .removeRecentItem { display: none; position:absolute; right:0; top:0; } */ .recentItem:hover { background-color: var(--hoverBackground); } .recentItem:hover > .closeCross { display:block; } .removeRecentItem:hover { background-color: var(--hoverBackground); background-color:var(--menuBackground); cursor: default; } .recentItem.disabled { text-decoration: line-through; } #restoreTabsButton { position:absolute; top:4px; left:4px; } #noFileSystemMessage { color:red; } #installButton { __font-size:2rem; font-weight:var(--bold); color:blue; __position: absolute; __top:100px; __right:100px; } /*#endregion*/ /*#region @@@@ DASHBOARD @@@@ */ #dashboard { position:fixed; width: 100%; height: 100%; text-align: center; } .dashSection { __text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top:1rem; padding-bottom:3rem; padding-left:1rem; padding-right:1rem; border-bottom: 0px solid #000; } #buttonBar { max-width: 1200px; width:100%; padding:1rem; __background:yellow; text-align: left; } #dashTable, .dashTable { display:block; max-width: 1200px; width:calc(100% - 2rem); height:300px; overflow-y:auto; background-color: var(--codeBackground); border-radius:0.5rem; border: 1px solid var(--mainBorder); border-collapse: collapse; line-height:2.6rem; text-align:left; } #dashFirstRow { background-color: var(--headBackground); } .dashTH { position: sticky; top: 0; z-index: 10; background-color: var(--headBackground); } .dashTH, .dashTD { padding-left:0.5rem; border:0; } .dashTR { width:100%; border-top: 1px solid var(--mainBorder); } .dashTR:hover { background-color: var(--hoverBackground); background-color: #fafafa; cursor:pointer; } /*#endregion*/ /*#region @@@@ SIDE @@@@ */ #side { user-select: none; } #sideHead { display:flex; } /* .headIcon:hover > g {fill:black !important;} */ /* HEAD ICONS */ .headIcon { fill: var(--color); __fill:red; } .headIcon:hover { background: var(--hoverBackground); } #sideHead > .headIcon, #openSideButton, #__minimizeGroup { padding-left:1px; padding-right:1px; padding-top:11px; padding-bottom:11px; width:28px; __width:100%; max-width:28px; __height:34px; height: var(--sideHeadHeight); display:block; flex-grow: 1; flex-basis: 0; text-align: center; } /* #closeSideButton */ .headIcon.first.right { margin-left: auto; } #openSideButton { position:absolute; left:var(--margin); top:var(--margin); __top:0; __left:0; width:20px; } #openSideButton, #minimizeGroup { height: var(--headHeight); max-height: var(--sideHeadHeight); } #minimizeGroup { padding-left:1px; padding-right:1px; padding-top:9px; padding-bottom:9px; width:28px; __width:100%; max-width:28px; height:34px; height: var(--headHeight); min-height: var(--headHeight); display:block; /* outline:1px solid red; background-color:yellow; */ } #openSideButton.floatright { position: absolute; left:unset; right:var(--margin); /* top:23px; */ z-index:1; transform-origin: center center; transform: scale(-1, -1); __width:14px; __background-color: var(--headBackground); /* height:10px; line-height:6px; font-size:10px */ } #closeSideButton.floatright { __right:unset; __left:2px; transform-origin: center center; transform: scale(-1, -1); } #leftTitleIcons > .headIcon, #rightTitleIcons > .headIcon { fill: var(--color); padding-left:1px; padding-right:1px; padding-top:8px; padding-bottom:8px; __width:28px; __height:31px; height: env(titlebar-area-height, 32px); width: env(titlebar-area-height, 32px); width:28px; } .headButton { margin-top:8px; margin-bottom:8px; padding-top: 0px !important; padding-bottom: 0px !important; line-height:0.6rem; __height: env(titlebar-area-height, 32px); __width: env(titlebar-area-height, 32px); } .__titleIcon { fill: var(--color); padding-left:1px; padding-right:1px; padding-top:8px; padding-bottom:8px; __width:28px; __height:31px; height: env(titlebar-area-height, 32px); width: env(titlebar-area-height, 32px); width:28px; } .__titleIcon:hover { background: var(--hoverBackground); } .iconPath { pointer-events:none; /* stroke:red; stroke:var(--color); */ stroke: currentColor; stroke-linecap:round; fill:none; stroke-width: var(--iconPathWidth); /* stroke:#444; stroke-width:14; */ __stroke-width: 32; __shape-rendering: auto; __shape-rendering: crispEdges; shape-rendering: geometricPrecision; __shape-rendering: optimizeSpeed; } .iconGuide { display:none; } #inspectIcon.active > .iconPath { stroke: var(--warningColor); } #__inspectTooltip { position:fixed; pointer-events:none; color:red; background: cornsilk; font-size:14px; line-height:20px; padding-left:8px; padding-right:8px; border:1px solid #999; font-family: var(--codeFont); width: max-content; max-width:200px; } /* FILESPACE */ #explorer { position: relative; /* background-image: url('images/hello-icon-128.png'); background-image: url('images/fish.jpg'); background-image: url('https://octodex.github.com/images/minion.png'); */ } #fileSpace { position:relative; height: calc(100% - var(--sideHeadHeight)); __padding-top:0.5rem; padding-bottom:2rem; overflow:auto; __background-color: var(--panelBackground); background-color: var(--codeBackground); /* Changed 18th July 2025. Looks better in light mode, not sure about dark mode */ /*TODO: experimenting here: https://web.dev/articles/content-visibility */ content-visibility: auto; } #workspaceName { position: sticky; top:0; left:0; padding-left:0.5rem; border-bottom:var(--borderWidth) solid var(--mainBorder); __font-weight:bold; __color: var(--secondColor); __margin-bottom:0.5rem; line-height:2rem; z-index: 10; background-color: var(--codeBackground); background-color: var(--panelBackground); } #workspaceName:before { content: 'Workspace: '; font-weight: normal; font-weight: var(--bold); color: var(--color); } #workspaceFolders { width:100%; } #addFolderWrap { margin-top:1rem; margin-left:0.5rem; margin-right:0.5rem; border:1px dotted var(--mainBorder); background-color: var(--menuBackground); height: auto !important; /* position:fixed; top:10vh; margin:0 auto; */ } #openFolderButton.workspace, #openFileButton.workspace, #createScratchButton.workspace { height:2rem; width:100%; } #dropZone.workspace { width:100%; } #cancelAddFolder {float:right; margin-right:1rem;} #cancelAddFileFolder {float:right; margin-right:1rem;} #looseFilesWrap, #untitledFilesWrap { margin-top:1rem; __margin-left:0.5rem; __border-top: var(--borderWidth) solid var(--mainBorder); /* the trouble with a border is it makes you think it can be resized */ } .looseLabel {margin-left:0.4rem} #capitalOutline { font-weight: var(--bold); width:10px; __display:none; } #outlineButton { width: max-content; width:100%; position:relative; __font-weight:bold; cursor: pointer; border-top:var(--borderWidth) solid var(--mainBorder); border-bottom:var(--borderWidth) solid var(--mainBorder); overflow:hidden; } /* #outlineButton:hover { background: var(--hoverBackground); } */ #outlineName { font-size:12px; padding-right:22px; } #outlineOptionsButton { background-color: var(--panelBackground); background-color: transparent; position:absolute; top:1px; right:4px; padding-left:4px; padding-right:4px; line-height:1.3em; } #outlineOptionsButton:hover { background: var(--hoverBackground); } input[type="checkbox"] { margin-left:0; margin-bottom:0; vertical-align:baseline; position:relative; bottom:-2px; width:unset; } label.menuItem{ cursor:pointer; display:block; __width:100%; } .filterItem { padding-left:0 !important; } .filterRadio { display:inlibne-block; width:16px; position:relative; top:2px; } #outlineFilterInput, #outlineFilterButton, #outlineApplyEverywhereButton, .fullWidthButton { padding: 5px 4px; margin-left: 6px; margin-right: 6px; margin-bottom: 7px; border-radius: 3px; width: calc(100% - 12px); cursor: pointer; } /*#endregion*/ /*#region @@@@ SPLITTERS @@@@ */ .splitter { top: 0px; left: calc(var(--msplitterWidth2) + var(--splitterShift)); width: var(--splitterWidth); height: 100%; position: absolute; __transition: 0.5s background-color; abcdefghijklmnopqrstuvw __background-color: transparent !important; __background-color: transparent; __background-color: rgba(255,155,155,0.25); __opacity:0.05; __background-color: red !important; /* box-shadow: 1px 2px 6px var(--mainBorder); */ z-index:5; /* so it gets displayed over an active tab */ touch-action: none; /*https://stackoverflow.com/questions/62524422/setpointercapture-does-not-apprear-to-be-working-on-google-chrome */ } /* #main2Split, #main3Split {background-color: rgba(255,155,155,0.5);} #ref2Split, #ref3Split {background-color: rgba(155,255,155,0.5);} #inputSplit {background-color: rgba(155,155,255,0.5);} #middleSplit {background-color: rgba(255,155,255,0.5);} #middleSplit2 {background-color: rgba(155,255,255,0.5);} */ #outlineSplit { __background:blue; } #middleSplit { top: calc(var(--headHeight) + 6px); __top:0; height: calc(100% - var(--headHeight) - 12px); __background-color:red; __width:14px; __background:red; } #sideChevron { display:none; fill:white; position:relative; left:-12px; top:50%; top:12px; width:20px; height:20px; cursor: default; } #side.floatright + #input > #middleSplit { left:auto; right: calc(var(--msplitterWidth2) - var(--splitterShift)); } #side.hide.floatright + #input > #middleSplit { display:none; } #middleSplit3 { display:none; left:auto; /* right: calc(var(--msplitterWidth2) + var(--splitterShift)); */ right: var(--msplitterWidth2); } #side.floatright + #input + #output > #middleSplit3 { display:block; } .horizontal.splitter { left: auto; right: auto; top: calc(var(--msplitterWidth2) - 0.5px); width: 100%; height: var(--splitterWidth); } /* .horizontal.splitter.bottom { top:auto; bottom: calc(var(--msplitterWidth2) - 0.5px); width: 100%; height: var(--splitterWidth); background-color: blue; } */ .splitter:hover { __background-color: var(--hoverBackground); } #side:has(+ #input > #middleSplit:hover) { border-right-color: var(--color); } .house:has(+ .house > .splitter:hover) { border-right-color: var(--color); } .splitter.active { __background-color: red !important; } .splitter:hover { cursor: ew-resize; } .horizontal.splitter:hover { cursor: ns-resize; } #centerLeftSplit { position: absolute; } #centerRightSplit { position: absolute; left:auto; } #centeredText {pointer-events: none;} #input.centered > #main, #input.centered > #ref { border-left: var(--borderWidth) solid var(--mainBorder); } #input.centered > #centerLeftSplit, #input.centered > #centerRightSplit { display:block; } .verticalTabsSplitter { display:none; } .tabsLeft > .verticalTabsSplitter, .tabsRight > .verticalTabsSplitter { display: block; __background-color: red; } .tabsRight > .verticalTabsSplitter { left:auto; __right: calc(var(--msplitterWidth2) + 1px); left:100%; } /*#endregion*/ /*#region @@@@ FILE STRUCTURE @@@@ */ .folderName { position:relative; font-weight: var(--bold); __font-weight:500; __padding-left:20px; padding-left: calc(var(--depth) * var(--treeIndent)); /* padding-left: calc(var(--depth) * var(--treeIndent) + 0rem); */ cursor:pointer; white-space: nowrap; __height:1.8rem; line-height:1.9rem; display: flex; align-items: center; __border-left:1px dotted var(--mainBorder); } .folderName.first {padding-left:5px;} /* @@@ FOLDER ICONS */ .folderIcon { __display:none; pointer-events:none; stroke-width:13; stroke:var(--color); __stroke-opacity: 0.6; fill:none; width:1.3rem; height:1.0rem; margin-right: 0.25rem; __outline:1px dotted red; __shape-rendering: geometricPrecision; } .squareSvg { width: 1rem; __shape-rendering: crispEdges; } .folderName > .folderIcon > .plusBit {display:none;} .folderName.closed > .folderIcon > .plusBit, .folderName.unopened > .folderIcon > .plusBit { display:inline; } .arrowSvg, .arrowFolderSvg { __display:none; pointer-events:none; stroke-width:18; stroke:var(--color); stroke-linecap: round; __stroke-opacity: 0.6; fill:none; width:1.0rem; height:1.0rem; margin-bottom:-0.2rem; /* margin-right: calc(var(--treeIndent) - 1.0rem); */ margin-right: 0.25rem; __outline:1px dotted blue; shape-rendering: geometricPrecision; } .folderName.closed > :is(.arrowSvg, .arrowFolderSvg) > .arrowBit, .folderName.unopened > :is(.arrowSvg, .arrowFolderSvg) > .arrowBit { transform: translate(-70px, 0) rotate(-90deg); transform-origin: 0px -20px; } .arrowFolderSvg { width:2.6rem; margin-bottom:-0.3rem; stroke-width:14; } .folderName:hover, .folderName.rightFolder { __border-top-left-radius:4px; __border-bottom-left-radius:4px; } .folderName.rightFolder{ background-color:var(--hoverBackground); } .folderName:hover { background-color:var(--hoverBackground); } .folderName.active { /* background-color: var(--activeColor);*/ /* color: var(--color); */ color: var(--secondColor); } .folderName.cut { color:#aaa; } .folderContents { __padding-left:20px; __padding-left: calc(var(--level) * var(treeviewIndent)); __border-left:1px dotted var(--mainBorder); position:relative; min-width:max-content; width:100%; /* max-height: 500px; overflow: hidden; transition: max-height 1.3s ease; */ } .___folderContents.first {padding-left:5px;padding-right:4px;} .folderName.closed + .folderContents, .folderName.unopened + .folderContents { display:none; /* max-height:0; transition: max-height 1.3s ease; */ } .fileName { display:block; position:relative; padding-left:20px; padding-left: calc(var(--depth) * var(--treeIndent)); cursor:pointer; white-space: nowrap; __height:1.8rem; __height:1.9rem; line-height:1.9rem; __border-left:1px dotted var(--mainBorder); __width:100%; __width: max-content; } /* .rootFolder:hover .folderContents::before { __display:none; pointer-events: none; position:absolute; content: ""; width:1px; height: calc(100% - 5px); left:calc((var(--depth) - 1) * var(--treeIndent)); __background-color:red; __box-shadow: inset 0 0 0 0.5px var(--mainBorder); box-shadow: 0.5px 0 0 0px var(--indentLine) inset; z-index: 9; } .rootFolder:hover .folderContents.first::before { left: 5px; } */ .folderContents.indentAlwaysVisible::before, .folderContents.indentHoverVisible::before { opacity:0; position:absolute; content: ""; width:1px; height: calc(100% - 5px); left:calc((var(--depth) - 1) * var(--treeIndent)); box-shadow: 0.5px 0 0 0px var(--indentLine) inset; z-index: 9; } .folderContents.first::before {left:5px;} .folderContents.indentAlwaysVisible::before { opacity:1; } .rootFolder:hover .folderContents.indentHoverVisible::before { opacity:1; transition: opacity 0.5s; } .fileName:hover, .fileName.focus, .fileName.rightFile, .fileName.filematch { /* border-top-left-radius:4px; border-bottom-left-radius:4px; */ __border-radius: 4px; } .fileName:hover { background-color:var(--hoverBackground); } .fileName.rightFile { background-color: var(--hoverBackground); } .fileName.focus { background-color: var(--focusBackground) !important; /* background-color: hsl(203, 90%, 97%) !important; color: hsl(203, 90%, 37%) */ } .folderName.outlined, .fileName.outlined, .ontry.outlined { outline-offset:-0px; outline: 1px solid var(--secondColor); } .fileName.cut { color:#aaa; } .fileName.match { font-weight:var(--bold); color: var(--secondColor); } .fileName.filematch { __font-weight:var(--bold); color: var(--secondColor); } .fileName.filterOut { __opacity:0.25; display:none; } .folderName:has(+ .folderContents > .fileName.focus) { __color:var(--secondColor); } /* .folderContents:has(> .fileName.focus) > .fileName { border-left: 1px dotted blue; } .folderContents:has(~ .fileName.focus)= { __border-left: 1px dotted red; } */ .fileName:has(~ .fileName.focus), .folderContents:has(~ .fileName.focus), .folderName:has(~ .fileName.focus) { __border-left: 1px solid var(--mainBorder); } .fileSaveMarker, .modifiedMarker { display:none; position:absolute; top:3px; left:2px; width:16px; height:16px; fill:green; cursor:default; } .___fileText::before { ___content: url('data:image/svg+xml,any second text'); content: url('data:image/svg+xml,'); width:1rem; height:1.3rem; } .fileSaveMarker > path, .fileSaveMarker > rect {pointer-events:none !important} .fileName.unsaved > .fileSaveMarker { display:block; fill:var(--unsavedColor); } .fileName.unsaved > .fileSaveMarker:hover { fill-opacity: 0.8; border: none; } /* .fileName.modified { text-decoration: underline; text-decoration: var(--color) dotted underline;; } */ .fileName.modified.showModified:not(.unsaved) > .___modifiedMarker { pointer-events: none; display:block; color:#888; font-size:0.7rem; } .fileName:not(.unsaved).modified.showModified::after { content: "M"; display:block; __display:inline; __color:#888; font-size:0.7rem; position:absolute; top:2px; left:4px; } .fileName.readOnly::before { content: "\1F512"; display:block; __display:inline; __font-size:0.7rem; position:absolute; top:0px; left:4px; } .fileName.hideFromSearch::before { content: "\1F441"; text-decoration: line-through; display:block; __display:inline; __font-size:0.7rem; position:absolute; top:0px; left:4px; } .fileInfo, .folderInfo { font-size: 11px; pointer-events: none; color: var(--secondColor); margin-left:0.25rem; } .indices {display:none;} .miniImage, .miniSvgWrap { /* height: 1.2rem; display:inline-block; vertical-align: middle; overflow:hidden; */ display: flex; height:1.2rem; margin-left:0.2rem; margin-top:0.2rem; } .miniSvgWrap > svg { overflow:hidden; width:100% !important; height:100% !important; position: static !important; _border: 4px solid #93af93; } /* .fileName[data-ext="js"]::before { content: 'JS'; background-color: blue; color:white; display:inline-block; height:16px; width:16px; font-size:10px; line-height:16px; vertical-align:middle; text-align: right; border-radius: 2px; font-weight: bold; } */ /* #looseFiles, #untitledFiles */ /* ADDED 2nd May 2025 so that saveMarker and modifiedMarker don't overwrite the text */ .fileName.loose, .fileName.untitled { padding-left: var(--treeIndent); } /* @@@ FILE ICONS */ .fileName { __outline: 1px dotted red; __line-height:5rem; display: flex; align-items: center; __line-height:3rem; } .big {fill:yellow !important;} /* .fileName > .fileIcon, .tabText > .fileIcon */ .fileIcon { __display: none; pointer-events:none; /* stroke-width:13;*/ __stroke:var(--color) !important; __stroke:#888 !important; width:1.2rem; height:1.2rem; __margin-bottom:-0.3rem; margin-bottom:-0.1rem; margin-right:0.4rem; __margin-left:0.5rem; vertical-align: middle; __outline:1px dotted blue; __background-color: #eee; /* border: 1px solid var(--mainBorder); border-radius:0.2rem; padding:0.1rem; */ __fill:none; __filter: grayscale(100%); __outline: 1px dotted blue; } .recentItem > .fileIcon { margin-bottom:0.1rem; } .fileIcon.monochrome.stroked { stroke: var(--color) !important; } .fileIcon.monochrome.filled, .fileIcon.monochrome > .filled { fill: var(--color) !important; } .fileIcon.monochrome.monostroked, .fileIcon.monochrome > .monostroked { fill:none !important; stroke: var(--color) !important; stroke-width:10; } .fileIcon.monochrome > .monofilled { fill: var(--color) !important; } .fileIcon[data-ext="html"] > g { display:none; } .fileIcon[data-ext="html"] > .option1 { display:inline !important; } .svg_logo { fill: blue !important; __display:none; __width:6px; __height:10px; } /* .fileName[data-ext="svg"]::before { position:absolute; content: url("images/atom.svg"); width:12px; height:12px; __content: 'A'; left:-16px; } */ /*#endregion*/ /*#region @@@@ MENU @@@@ */ .menu { position:fixed; top:0; left:0; padding: 5px 0; background-color:var(--menuBackground); border:var(--borderWidth) solid var(--mainBorder); border-radius:4px; /* https://getcssscan.com/css-box-shadow-examples */ box-shadow: 1px 2px 6px var(--mainBorder); cursor:pointer; user-select:none; width:14rem; overflow:hidden; z-index:10; /* needs to be above z index of splitters */ __backdrop-filter: blur(6px); /* TODO: have this as option in custom stylesheet */ } .menuItem, .fakeMenuItem { padding: 5px 15px; margin-left:4px; margin-right:4px; border-radius:3px; } /* .menuItem:first-child, .menuItem.paddup {margin-top:5px;} .menuItem:last-child {margin-bottom:5px;} */ .menuItem.disabled { opacity: 0.4; cursor:default; } .menuItem.selected { background-color: var(--focusBackground); } .menu > hr, .menu > div > hr, .settingsSelect > hr { __border-color: var(--menuBackground); __border-color: var(--mainBorder); height: 1px; border: 0; border-top: var(--borderWidth) solid var(--mainBorder); margin: 0.35em 0; padding: 0; } .menuItem:not(.disabled):hover { background-color: var(--hoverBackground); } .snippet.menuItem { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .keyText { pointer-events: none; float:right; font-size: 0.9rem; opacity:0.9; line-height:1.6rem; /* must match html line height val for it to be level */ } .closey { position:absolute; right:-10px; top: -10px; width:20px; height:20px; background-color:orange; content: 'X'; z-index:99999; } /* @@@ Specific Menus @@@ */ #mainMenu { __display:none; left:1px; __top: calc(var(--sideHeadHeight) + var(--headerHeight) + 0px); top: calc(var(--sideHeadHeight) + var(--headerHeight) + env(titlebar-area-height, 0px)); __top:0; width:18rem; line-height: 1.6rem; /* match html line height */ } #mainMenu.floatright { left:auto; right:1px; } #sideHead { __z-index:100; } /* #sideHead:hover > #mainMenu{ display:block; } */ /* #mainMenu { __display:none; position:absolute; top:30px; left:0; } */ #snippetContextMenu { max-height: 30vh; overflow-y:auto; } #layoutMenu { left:1px; left: calc(2 * var(--margin)); /* top: calc(var(--sideHeadHeight) + var(--headerHeight) + 1px); top: calc(var(--sideHeadHeight) + env(titlebar-area-height, 0) + 1px);*/ top:40px; __width:164px; z-index:200; } #layoutMenu > .menuItem { padding-left:4px; } #backplate { position:fixed; top:0; left:0; height:100%; width:100%; background:yellow; opacity:0.5; } .layoutSvg { pointer-events:none; stroke-width:2; stroke:var(--color); stroke-opacity: 0.6; width:26.3px; height:22px; margin-bottom:-5px; margin-right:6px; fill:none; } .layoutSvg > rect { stroke-width:4; } /* @@@ File List @@@ */ #fileListWrap, #commandListWrap, #urlMenu, #customContextMenuWrap, #customTopIconsWrap, #__feedbackWrap, #addFolderWrap, #spellingListWrap, #spellingCorrectionsWrap { position:fixed; top:100px; margin:0 25%; width: 50%; max-width:1000px; min-width:200px; padding:12px; padding-right:0px; height:50%; /* TODO: would like file list to be smaller when not many files, but need to specify a height to get the scrollbars */ max-height:50%; } #commandListWrap, #customContextMenuWrap, #customTopIconsWrap, #__feedbackWrap, #spellingListWrap, #spellingCorrectionsWrap {min-width:400px;} #customTopIconsWrap { max-width: 600px; max-height: unset; height: unset; } #__feedbackWrap {max-width: 600px;} #fileListWrap {height:auto;} #fileListWrap.tabbing {padding-top:0px;} #fileListWrap.tabbing > #fileListText { opacity:0; height:1px; } #fileListText, #commandListText, #customContextMenuText { display:block; width: calc(100% - 1rem); __width:100%; background: var(--codeBackground); caret-color: var(--caretColor); } #fileList, #alphList, #commandList, #customCommandListWrap{ width:100%; height:calc(100% - 30px); padding-top:8px; overflow-y: auto; } #commandListWrap, #fileListWrap {height:auto; __max-height:50vh; padding-left:0; padding-top:8px;} #commandListWrap2, #fileListWrap2 {height: auto; __max-height:50vh;} #commandList, #fileList, #alphList { height:auto; overflow-y:scroll; /* better than auto since we get right padding for free */ max-height:calc(50vh - 3rem); margin-top:0.5rem; border-top: var(--borderWidth) solid var(--mainBorder); padding-left:12px; } #commandListText, #fileListText {margin-left:1rem; width: calc(100% - 3rem);} #customContextMenuText { width:47.5%; height:calc(100% - 3rem); float:left; margin-top:3rem; font-family: var(--uiFont), sans-serif; __font-size: var(--fontSize); line-height: 1.5384; resize:none; } #customCommandListWrap { padding-top:2rem; height:calc(100% - 0rem); margin-left:1rem; __margin-top:-6px; padding-top:0; width:49.5%; float:left; overflow-y: hidden; __outline:1px solid red; } #customCommandList { margin-top:14px; height: calc(100% - 3.1rem); overflow-y: scroll; } .fileItem, .commandItem { padding-top:2px; padding-left:0.35rem; border:0; border-radius:4px; overflow:hidden; } .__fileItem {margin-right:1rem;} .fileItem.selected, .commandItem.selected { background: var(--focusBackground); } .fileItemPath, .commandKeybit { margin-left:1em; pointer-events:none; font-size: 0.83rem; opacity: 0.6; } .commandItem:hover { background: var(--hoverBackground); } .commandItem.last { border-bottom: var(--borderWidth) solid var(--mainBorder); } .commandHighlight { color: var(--secondColor); font-weight:bold; } .commandStar { position:absolute; right:2rem; __color:yellow; display:none; cursor: default; } .commandItem:hover > .commandStar { display:inline-block; } .commandStar:hover { color: var(--secondColor); } #urlMenu { height:auto; margin:0 15%; width: 70%; max-width:1500px; cursor: default; user-select: text; } #urlRoot, #urlPath { width: calc(50% - 3rem); } #__spellingListWrap { padding-top:0; } #spellingOrderBy { margin-bottom: 1.2rem; width: calc(50% - 1rem); } #spellingCorrectionsWrap { min-width:200px; max-width:400px; padding-right:1rem; padding-top:2rem; } #spellingDuoWrap { __background:cyan; height: calc(100% - 4rem); } #whitelistWrap, #blacklistWrap, #___wordReplacementsWrap { width:calc(50% - 1rem); float:left; height: 100%; margin:0; __background:yellow; } #whitelistWrap {margin-right:1rem;} #whitelistText, #blacklistText, #spellingCorrectionsText { width:100%; height: calc(100% - 0.8rem); background: var(--codeBackground); caret-color: var(--caretColor); resize:none; } #spellingCorrectionsText { /* width: calc(100% - 1rem); */ height: calc(100% - 1.6rem); } #closeSpellingList { top:4px; } /* #fileListText { width:calc(100% - 7rem); } #fileListAllButton { width:5rem; font-size:12px; } */ /* @@@ Video Modal @@@ */ #videoModal { width:50rem; height:50rem; top:5rem; left:10rem; } /*#endregion*/ /*#region @@@@ HEAD @@@@ */ .head, #outputHead { __padding-top:2rem; display:flex; flex-direction: row; position:relative; width:auto; overflow-y:hidden; overflow-x:hidden; background-color: var(--panelBackground); background-color: var(--headBackground); __background-color: transparent; user-select:none; __border-bottom:var(--borderWidth) solid var(--mainBorder); height: var(--headHeight); /* height:64px; */ } #____main1Head { /* background:#0bfbfb; padding-left:20px; padding-right:20px; */ __width: calc(100% - 20px); } #side.hide + #input > #main > #main1 > #main1Head { /* background:#0bfbfb; padding-left:20px; margin-right:20px; */ } #main1Head.paddLeft > .backTab + .tab, #main1Head.paddLeft > .backTab + .groupMarker { margin-left:14px; margin-left:20px; } /* #main1Head.paddLeft { padding-left:14px; } */ /* #main1Head > .backTab + .tab, #main1Head > .backTab + .groupMarker { margin-left:14px; border-left: var(--borderWidth) solid var(--mainBorder); } */ .head > .tab:last-child, .head > .groupMarker:last-child { margin-right:-1px; /* This makes it flush when tabs fill the head*/ } .head.paddRight > .tab:last-child, .head.paddRight > .endGroupMarker:last-child { margin-right:14px; margin-right:20px; } .house.maximized > .innerHouse > .head > .tab:last-child { margin-right:27px; ___outline:1px solid orange; } /* .head:hover { overflow-x:auto; } .head::-webkit-scrollbar { height: 6px; border: 1px solid #d5d5d5; } .head::-webkit-scrollbar-track { background: #f1f1f1; } .head::-webkit-scrollbar-thumb:horizontal{ background: #ccc; } .head::-webkit-scrollbar-thumb:horizontal:hover{ background: #aaa; } */ /*#endregion*/ /*#region @@@@ TABS @@@@ */ .backTab { __display:none; width:100%; height: calc(var(--headHeight) - 0px); border-bottom:var(--borderWidth) solid var(--mainBorder); margin-right:-100%; z-index:2; /*this is so border bottom always shows nicely TODO: not sure it's worth it though as only affects certain zoom levels and you need to then change z-index of all this other stuff, namely activeTab, menu, flyingBox */ pointer-events:none; __background-color: var(--mainBorder); } .backSplit {display:none;} .tab{ width:100%; max-width:200px; max-width:var(--tabWidth); display:block; flex-grow: 1; flex-basis: 0; text-align: center; white-space: nowrap; height: calc(var(--headHeight) - 0px); __background-color:var(--headBackground); background-color:transparent; line-height: var(--headHeight); __border-right:var(--borderWidth) solid var(--mainBorder); /*using border-right leads to disappearing border sometimes */ border-left:var(--borderWidth) solid var(--mainBorder); cursor:pointer; user-select:none; position:relative; /* border-top:var(--borderWidth) solid var(--mainBorder); border-top-left-radius: 6px; border-top-right-radius: 6px; */ } .backTab + .tab { border-left:0; } .paddLeft > .backTab + .tab { border-left:var(--borderWidth) solid var(--mainBorder); } #main1Head > .backTab + .tab { __margin-left: 2rem; } /* TODO: could child selectors affect performance given that css is read right to left? */ /* .tab:first-child, .backTab + .tab #searchTab { border-left-width: 0; } */ .tab:last-child, #previewTab { border-right:var(--borderWidth) solid var(--mainBorder); } .tabText { pointer-events: none; padding-left:3px; padding-right:3px; position:relative; background-color:var(--headBackground); background-color:var(--tabBackground); } /* @@@ PILLS */ :root { --mildTabRadius: 4px; --mediumTabRadius: 8px; --megaTabRadius: 12px; --tabMargin: 3px; } .tab[data-tabstyle="rectangular"] {margin-right:-2px;} .tab[data-tabstyle="mild_rounded"] {padding-left: var(--mildTabRadius); padding-right: var(--mildTabRadius); margin-right: calc(-1 * var(--mildTabRadius));} .tab[data-tabstyle="medium_rounded"] {padding-left: var(--mediumTabRadius); padding-right: var(--mediumTabRadius); margin-right: calc(-1 * var(--mediumTabRadius));} .tab[data-tabstyle="mega_rounded"] {padding-left: var(--megaTabRadius); padding-right: var(--megaTabRadius); margin-right: calc(-1 * var(--megaTabRadius));} .tab[data-tabstyle$="pills"], .tab[data-tabstyle="rectangular"] {padding-left: 4px; padding-right: 4px;} .tab[data-tabstyle], .backTab[data-tabstyle] {border:0 !important;} .tab[data-tabstyle] {__outline:1px dotted red; outline-offset:-1px;} .__tab {outline:1px solid red;} .tab[data-tabstyle] > .tabText { __margin-top:4px; margin-top:var(--tabMargin); margin-bottom:0px; margin-left:0px; margin-right:0px; padding-left:0; padding-right:0; __border-radius:4px; __line-height: calc(var(--headHeight) - 8px); line-height: calc(var(--headHeight) - 2 * var(--tabMargin)); overflow: hidden; __outline:1px dotted blue; } .tab[data-tabstyle].active { padding-top:var(--tabMargin); } .tab[data-tabstyle].active > .tabText { __border:0 !important; __border: 0; __border:1px solid blue !important; margin-bottom: 0; margin-top:0; height: calc(var(--headHeight) - 0px); __line-height: var(--headHeight); __line-height: calc(var(--headHeight) - 0px) __background-color:magenta !important; } .tab[data-tabstyle^="mild"] > .tabText {border-radius:4px;} .tab[data-tabstyle^="medium"] > .tabText {border-radius:8px;} .tab[data-tabstyle^="mega"] > .tabText {border-radius:12px;} .tab[data-tabstyle$="rounded"].active > .tabText { border-bottom-left-radius: 0; border-bottom-right-radius: 0; __border:1px solid var(--focusBackground) !important; } .tab[data-tabstyle$="pills"].active > .tabText { border:1px solid var(--focusBackground); } .tab[data-tabstyle$="pills"] > .tabText {height: calc(var(--headHeight) - 2 * var(--tabMargin)) !important;} /* mid tab line markers */ .tab[data-tabstyle]:not(.active)::after { content: ""; position:absolute; top:6px; right:0px; width:1px; height:20px; __background-color:red; border-right:1px solid var(--mainBorder); } .tab[data-tabstyle]:not(.active):last-child::after {display:none;} .tab[data-tabstyle]:has(+ .tab[data-tabstyle].active)::after {display:none;} .tab[data-tabstyle$="pills"] {right:2px;} .tab[data-tabstyle="mild_rounded"]:not(.active)::after {right: calc(var(--mildTabRadius) * 0.5);} .tab[data-tabstyle="medium_rounded"]:not(.active)::after {right: calc(var(--mediumTabRadius) * 0.5);} .tab[data-tabstyle="mega_rounded"]:not(.active)::after {right: calc(var(--megaTabRadius) * 0.5);} /* bottom curly bits */ .tab[data-tabstyle="mild_rounded"].active::before, .tab[data-tabstyle="mild_rounded"].active::after {width:4px; height:4px;} .tab[data-tabstyle="medium_rounded"].active::before, .tab[data-tabstyle="medium_rounded"].active::after {width:8px; height:8px;} .tab[data-tabstyle="mega_rounded"].active::before, .tab[data-tabstyle="mega_rounded"].active::after {width:12px; height:12px;} .tab[data-tabstyle="mild_rounded"].active::before, .tab[data-tabstyle="medium_rounded"].active::before, .tab[data-tabstyle="mega_rounded"].active::before { content: ""; display:block; position:absolute; bottom:0; background-color: var(--codeBackground); __background-color:red; z-index:100; left:0px; /* https://stackoverflow.com/questions/51395179/svg-fill-with-css-variables */ mask-image: url('data:image/svg+xml,'); /* Thought about using clip-path to achieve the same thing, but will be harder to do because of change in coords */ /* clip-path: path("M100,0 L100,100 L0,100 A100,100 0 0 0 100,0 Z"); */ __box-shadow: var(--mainBorder) 0px 0px 2px; } .tab[data-tabstyle="mild_rounded"].active::after, .tab[data-tabstyle="medium_rounded"].active::after, .tab[data-tabstyle="mega_rounded"].active::after { content: ""; display:block; position:absolute; bottom:0; background-color: var(--codeBackground); __background-color:red; z-index:100; right:0px; mask-image: url('data:image/svg+xml,'); __box-shadow: var(--mainBorder) 0px 0px 2px; } .tab[data-tabstyle].active.moving::before, .tab[data-tabstyle].active.moving::after { display:none; } /* reposition the close cross */ .tab[data-tabstyle="rectangular"] > :is(.closeCross, .pinIcon) {right: 8px; border-radius:0;} .tab[data-tabstyle="mild_rounded"] > :is(.closeCross, .pinIcon) {right: calc(var(--mildTabRadius) + 4px); border-radius: calc(var(--mildTabRadius) * 0.85);} .tab[data-tabstyle="medium_rounded"] > :is(.closeCross, .pinIcon) {right: calc(var(--mediumTabRadius) + 4px); border-radius: calc(var(--mediumTabRadius) * 0.85);} .tab[data-tabstyle="mega_rounded"] > :is(.closeCross, .pinIcon) {right: calc(var(--megaTabRadius) + 4px); border-radius: calc(var(--megaTabRadius) * 0.85);} .tab[data-tabstyle="rectangular_pills"] > :is(.closeCross, .pinIcon) {right: 8px; border-radius:0;} .tab[data-tabstyle="mild_rounded_pills"] > :is(.closeCross, .pinIcon) {right: calc(var(--mildTabRadius) + 4px); border-radius: calc(var(--mildTabRadius) * 0.85);} .tab[data-tabstyle="medium_rounded_pills"] > :is(.closeCross, .pinIcon) {right: calc(var(--mediumTabRadius) + 0px); border-radius: calc(var(--mediumTabRadius) * 0.85);} .tab[data-tabstyle="mega_rounded_pills"] > :is(.closeCross, .pinIcon) {right: calc(var(--megaTabRadius) - 4px); border-radius: calc(var(--megaTabRadius) * 0.85);} /* https://getcssscan.com/css-box-shadow-examples */ /* .tab[data-tabstyle$="pills"].active > .tabText */ /* .tab.active > .tabText { box-shadow: 1px 1px 4px #888; } */ /* .tab[data-tabstyle$="pills"].active > .tabText, .tab[data-tabstyle].active > .tabText, .backTab[data-tabstyle] { ___box-shadow: 0px 0px 0px 1px var(--borderColor) inset; _box-shadow: 1px 2px 6px var(--mainBorder); box-shadow: var(--mainBorder) 0px 0px 2px; __box-shadow: red 0px 0px 1px; __border: 1px solid var(--mainBorder) !important; __z-index:-100; } .backTab[data-tabstyle] { border-bottom: 1px solid var(--mainBorder) !important; } */ .code { __box-shadow: var(--mainBorder) 0px 0px 2px; } /* @@@ SERACH TALLIES */ .___tabText.searchTally::after { content: attr(data-tally); position:absolute; left:5px; top:2px; padding:0 4px; font-size:10px; height:12px; line-height:11px; background:blue; color:white; font-weight:bold; border-radius:7px; z-index:1; } .searchTally { position:absolute; left:5px; top:1px; padding:0 4px; font-size:10px; height:14px; line-height:11px; background:blue; __color:white; font-weight:bold; background-color: var(--searchHighlight); border: 1px solid var(--mainBorder); border-radius:7px; z-index:5; /* needs to be higher than active tab z-index */ } .searchTally:hover { background-color: var(--activeSearchHighlight); cursor: default; } .tab[data-flashnum]::before { content: attr(data-flashnum); position:absolute; right:5px; top:2px; padding:0 4px; font-size:10px; height:14px; line-height:11px; background:blue; __color:white; font-weight:bold; background-color: var(--matchBackground); border: 1px solid var(--mainBorder); border-radius:7px; z-index:2; } /* Tab Scrunch */ .tab{ /* https://stackoverflow.com/questions/30693928/how-to-make-font-size-relative-to-parent-div */ /* Use `inline-size` instead of `size` if you are only interested in inline size, which is horizontal for Latin and many other layouts. */ container-type: inline-size; container-name: tabster; overflow:hidden; /* text-overflow: ellipsis; */ __min-width:30px; } .tab > .tabText { __resize:horizontal; /* TODO: 16cqw was got using trial and error but seems to work about right. Of course, we could always use JS to measure the tabs on resize and then dynamically change the font size, but aint nobody got time for that shit.*/ font-size: clamp(0.8rem, 15cqw, 1rem); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .tab > .closeCross { resize:horizontal; } @container tabster (max-width: 80px) { .tab > .tabText { __background:pink; padding-left:2px; padding-right:0; padding-top:1px; } .tab > .tabText > .fileIcon { __display:none; width:0.8rem; height:0.8rem; __margin-bottom:-0.3rem; __margin-bottom:-0.1rem; __margin-right:0.4rem; __margin-left:0.5rem; margin:0; margin-right: -0.5rem; position:relative; top:-0.75rem; left:0.15rem; __vertical-align: baseline; } .tab.sameName > .tabText > .fileIcon {display:none;} /* .tab {background-color:red !important;} */ .tab > .closeCross, .tab > .pinIcon { __background:pink; width:14px; height:14px; right:0px; top: 0px; } .tab.leftCross > .closeCross, .tab.leftCross > .pinIcon { right:auto !important; left:0 !important; } .tab:not(.active) > .closeCross { __display:none !important; } } .tabText > .fileIcon { __display:none; __position:absolute; __left:-1rem; __top:0.5rem; __margin-left: -0.5rem; margin-right:0.25rem; margin-top:-0.2rem; __width:1.1rem; __height:1.1rem; } #customCss > .tabText {font-weight: bold;} .tab:not(.active) { border-bottom: var(--borderWidth) solid var(--mainBorder); } .tab.active { __background-color: var(--codeBackground); z-index:3; /* search tally needs a z-index higher than this */ /* border-top-left-radius: 5px; border-top-right-radius: 5px; */ __box-shadow: 1px 1px 8px var(--mainBorder); __background-color: #fec; __box-shadow: 0px 1px 4px var(--mainBorder); __position:relative; __top:2px; __z-index:100; __border-bottom:2px solid var(--codeBackground); /* otherwise we can get a line at 90% zoom level */ /*UPDATE: the above doesn't actually seem to work, and causes uncrisp corners on the tabs */ __height: var(--headHeight + 2px); /* border-bottom: 1px solid red; position:relative; top:10px; */ } .tab.active > .tabText { background-color: var(--codeBackground); } /* .tab:not(.active):hover */ .tab:not(.active):hover > .tabText { __background-color: var(--hoverBackground) !important; background-color: var(--tabHoverBackground) !important; __background-color: #fec !important; } .tab.active { __box-shadow: 0px 1px 0px 0px var(--secondColor) inset; } .tab.focus { text-decoration:underline; text-decoration-thickness: 2px; text-decoration-color: var(--focusBackground); __text-decoration-color: var(--secondColor); /* border-top: 2px solid var(--secondColor); */ } .__tab.focus > .tabText { background-color: hsl(240,90%,90%); } .tab.focus > .tabText { __position:relative; __top:-2px; } .tab.preview { /* color:red; */ font-style:italic; } /* .tab.loose {color:blue;} .tab.untitled {color:purple;} .tab.untitled.toobig {color:red;} .tab.loose {color: color-mix(in srgb, var(--color) 90%, blue)} .tab.untitled {color: color-mix(in srgb, var(--color) 90%, purple)} */ .tab.untitled.toobig {color:red;} .tab.twinTab { font-weight: var(--bold); } .tab.match { ___border:1px dotted red; __color:red; __outline: 2px solid var(--searchHighlight); } .tab.match > .tabText { /* background: var(--searchHighlight); border-radius: 4px; */ font-weight:var(--bold); color: var(--secondColor); } .tab.match[data-matchnum]::after, .fileName.match[data-matchnum]::after { content: attr(data-matchnum); position:absolute; left:calc(50% - 8px); top:1px; padding:0 4px; font-size:10px; height:14px; line-height:11px; width: max-content !important; color:var(--codeBackground); font-weight:bold; background-color: var(--secondColor); border: 1px solid var(--mainBorder); border-radius:7px; z-index:1; } .fileName.match[data-matchnum]::after { left:0px; } .tabPath { display:none; pointer-events: none; position:absolute; top:4px; left:10px; /* left:0 !important; */ font-size: 0.6em; line-height:1em; opacity:0.85; /* TODO: would like ellipsis for overflow when using rounded tabs, but not working for some reason */ /* white-space:nowrap; text-overflow:ellipsis; overflow:hidden; */ } .sameName > .tabPath { display:block; __padding-right:6px; } .__sameName {overflow:hidden;} .tab[data-tabstyle="medium_rounded"] > .tabPath {left:12px;} .tab[data-tabstyle="mega_rounded"] > .tabPath {left:16px;} .tabData, .splitData { display:none; } #fakeTab { position: absolute; border-left:var(--borderWidth) solid var(--mainBorder); __border-bottom:var(--borderWidth) solid var(--mainBorder); border-bottom:var(--borderWidth) solid var(--codeBackground); /* changed 26th Aug 2025 */ border-right:var(--borderWidth) solid var(--mainBorder); __background: var(--codeBackground); opacity:0.95; z-index:500; } #fakeTab.floating { border:var(--borderWidth) solid var(--mainBorder) !important; background-color: var(--codeBackground); } #fakeTab.is_group_marker{ text-decoration: none; height: var(--headHeight); line-height: var(--headHeight); text-align: center; } #fakeTab > .tabText { __background-color:yellow !important; __box-shadow: 1px 2px 6px var(--mainBorder); } .___tab.moving, .___groupMarker.moving > .tabGroupText { visibility:hidden; /* opacity:0.6; background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%); background-size:25px 25px; background-position:0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; Must be half of one side of the square */ } .tab.moving { background-color: transparent; __background-color: yellow; box-shadow: none; } .tab.moving > .tabText, .tab.moving > .saveMarker, .tab.moving > .pinIcon, .tab.moving > .tabPath { visibility:hidden; } .tab.moving:last-child { border-right:0; } .groupMarker.moving { visibility:hidden; } .tab.compareTab { outline:2px solid #bf9; outline-offset: -4px; } .tab.compareTab[data-score]::before { content: attr(data-score); position:absolute; top:0; left:0; background: green; color: white; border-radius:0.2em; } .tab.lockedScrolling::before { content: 'locked'; color:red !important; position:absolute; left:16px; top:2px; line-height:10px; font-size:10px; } .tab.is_split { __background:pink; } /* tab close */ .closeCross, .pinIcon { position:absolute; width:18px; height:18px; top:2px; top:calc(50% - 9px); right:4px; display:none; padding:4px; border-radius:2px; cursor:default; background-color: var(--hoverBackground); background-color: var(--headBackground); } .tab.leftCross > .closeCross, .tab.leftCross > .pinIcon { right:auto; left:4px; } .tab.active > .closeCross, .tab.active > .pinIcon { background-color: var(--codeBackground); } .closeCrossPath { pointer-events:none; stroke:var(--color); stroke-opacity: 0.5; stroke-width:14; } .closeCross:hover, .pinIcon:hover { background-color:var(--headBackground) !important; border-radius:2px; } .closeCross:hover > path { stroke:var(--color); stroke-opacity: 1; } .tab:hover > .closeCross { /* background-color: var(--hoverBackground) !important; background-color: var(--panelBackground) !important;*/ display:block; } .tab.hidecross > .closeCross { display:none !important; } .pinIcon { display:block; padding:1px; padding-top:2px; } .pinIconPath { fill: var(--pinColor); } .pinMenuIcon { display:none; float:right; position:relative; padding:3px; border-radius: var(--smallBorderRadius); top:3px; left:3px; cursor:default !important; } .menuItem:hover > .pinMenuIcon { display:block;} .pinMenuIcon:hover { background-color: #0002; } /* tab save */ .saveMarker { display:none; position:absolute; top:2.5px; __top:calc(50% - 8px); left:0px; left:calc(50% - 8px); width:12px; height:12px; fill:green; cursor:default; background-color: var(--headBackground); } .tab.active > .saveMarker { background-color: var(--codeBackground); } .saveMarkerPath, .saveMarkerRect {pointer-events:none !important} .tab.unsaved > .saveMarker { display:block; fill:var(--unsavedColor); } /* .tab.unsaved.untitled > .saveMarker { fill: var(--color); } */ .tab.untitled > .saveMarker { display:block; fill: var(--color); } .tab.unsaved > .saveMarker:hover { fill-opacity:0.8; border: none; } /* HOVER BOX */ #hoverBox { position:fixed; padding:1rem; border: var(--borderWidth) solid var(--mainBorder); border: 2px solid red; background-color: var(--codeBackground); width:300px; height:300px; overflow:hidden; display: flex; justify-content: center; /* Centers horizontally */ align-items: center; /* Centers vertically */ __z-index:999; } #hoverCode { __background-color:green; border:1px solid green; overflow:hidden; } #innerHoverCode { transform-origin: top left; __transform: scale(0.5); border:1px solid blue; width: max-content; width:10000px; white-space: pre-wrap; font-size: var(--codeFontSize); line-height:var(--codeLineHeight); } #innerHoverCode .___hline { outline: 1px solid orange; } /* .tab[title$=".js"] { outline:2px solid cyan; outline-offset: -4px; } .tab[title*="\\sub\\"] { outline:2px solid #fec; outline-offset: -4px; } */ /* @@@ TAB GROUPS @@@ */ /* var groupColors = ['blue', 'green', 'red', 'orange', 'violet', 'purple', 'brown', 'gray'] */ /* .tabGroupText[data-groupcolor="blue"] {background-color: blue;} .tabGroupText[data-groupcolor="green"] {background-color: green;} .tabGroupText[data-groupcolor="red"] {background-color: red;} .tabGroupText[data-groupcolor="orange"] {background-color: orange;} .tabGroupText[data-groupcolor="violet"] {background-color: violet;} .tabGroupText[data-groupcolor="purple"] {background-color: purple;} .tabGroupText[data-groupcolor="brown"] {background-color: brown;} .tabGroupText[data-groupcolor="gray"] {background-color: gray;} .groupMarker[data-groupcolor="blue"], .groupMarker[data-groupcolor="blue"] > .tabGroupText, .endGroupMarker[data-groupcolor="blue"] {background-color: blue;} .groupMarker[data-groupcolor="green"], .groupMarker[data-groupcolor="green"] > .tabGroupText, .endGroupMarker[data-groupcolor="green"] {background-color: green;} .groupMarker[data-groupcolor="red"], .groupMarker[data-groupcolor="red"] > .tabGroupText, .endGroupMarker[data-groupcolor="red"] {background-color: red;} .groupMarker[data-groupcolor="orange"], .groupMarker[data-groupcolor="orange"] > .tabGroupText, .endGroupMarker[data-groupcolor="orange"] {background-color: orange;} .groupMarker[data-groupcolor="violet"], .groupMarker[data-groupcolor="violet"] > .tabGroupText, .endGroupMarker[data-groupcolor="violet"] {background-color: violet;} .groupMarker[data-groupcolor="purple"], .groupMarker[data-groupcolor="purple"] > .tabGroupText, .endGroupMarker[data-groupcolor="purple"] {background-color: purple;} .groupMarker[data-groupcolor="brown"], .groupMarker[data-groupcolor="brown"] > .tabGroupText, .endGroupMarker[data-groupcolor="brown"] {background-color: brown;} .groupMarker[data-groupcolor="gray"], .groupMarker[data-groupcolor="gray"] > .tabGroupText, .endGroupMarker[data-groupcolor="gray"] {background-color: gray;} */ [data-groupcolor="blue"], [data-groupcolor="blue"] > .tabGroupText {background-color: blue;} [data-groupcolor="green"], [data-groupcolor="green"] > .tabGroupText {background-color: green;} [data-groupcolor="red"], [data-groupcolor="red"] > .tabGroupText {background-color: red;} [data-groupcolor="orange"], [data-groupcolor="orange"] > .tabGroupText {background-color: orange;} [data-groupcolor="violet"], [data-groupcolor="violet"] > .tabGroupText {background-color: violet;} [data-groupcolor="purple"], [data-groupcolor="purple"] > .tabGroupText {background-color: purple;} [data-groupcolor="brown"], [data-groupcolor="brown"] > .tabGroupText {background-color: brown;} [data-groupcolor="gray"], [data-groupcolor="gray"] > .tabGroupText {background-color: gray;} /* https://www.smashingmagazine.com/2023/01/level-up-css-skills-has-selector/ */ .groupMarker[data-groupcolor="blue"] ~ .tab:has(~ .endGroupMarker[data-groupcolor="blue"]) {border-top: 4px solid blue;} .groupMarker[data-groupcolor="green"] ~ .tab:has(~ .endGroupMarker[data-groupcolor="green"]) {border-top: 4px solid green;} .groupMarker[data-groupcolor="red"] ~ .tab:has(~ .endGroupMarker[data-groupcolor="red"]) {border-top: 4px solid red;} .groupMarker[data-groupcolor="orange"] ~ .tab:has(~ .endGroupMarker[data-groupcolor="orange"]) {border-top: 4px solid orange;} .groupMarker[data-groupcolor="violet"] ~ .tab:has(~ .endGroupMarker[data-groupcolor="violet"]) {border-top: 4px solid violet;} .groupMarker[data-groupcolor="purple"] ~ .tab:has(~ .endGroupMarker[data-groupcolor="purple"]) {border-top: 4px solid purple;} .groupMarker[data-groupcolor="brown"] ~ .tab:has(~ .endGroupMarker[data-groupcolor="brown"]) {border-top: 4px solid brown;} .groupMarker[data-groupcolor="gray"] ~ .tab:has(~ .endGroupMarker[data-groupcolor="gray"]) {border-top: 4px solid gray;} /* .groupMarker.group_is_closed ~ .tab:has(~ .endGroupMarker) {display:none;} doesn't work properly */ .endGroupMarker.group_is_closed {display:none;} .groupMarker.group_is_closed[data-groupcolor="blue"] ~ .tab:has(~ .endGroupMarker.group_is_closed[data-groupcolor="blue"]) {display:none;} .groupMarker.group_is_closed[data-groupcolor="green"] ~ .tab:has(~ .endGroupMarker.group_is_closed[data-groupcolor="green"]) {display:none;} .groupMarker.group_is_closed[data-groupcolor="red"] ~ .tab:has(~ .endGroupMarker.group_is_closed[data-groupcolor="red"]) {display:none;} .groupMarker.group_is_closed[data-groupcolor="orange"] ~ .tab:has(~ .endGroupMarker.group_is_closed[data-groupcolor="orange"]) {display:none;} .groupMarker.group_is_closed[data-groupcolor="violet"] ~ .tab:has(~ .endGroupMarker.group_is_closed[data-groupcolor="violet"]) {display:none;} .groupMarker.group_is_closed[data-groupcolor="purple"] ~ .tab:has(~ .endGroupMarker.group_is_closed[data-groupcolor="purple"]) {display:none;} .groupMarker.group_is_closed[data-groupcolor="brown"] ~ .tab:has(~ .endGroupMarker.group_is_closed[data-groupcolor="brown"]) {display:none;} .groupMarker.group_is_closed[data-groupcolor="gray"] ~ .tab:has(~ .endGroupMarker.group_is_closed[data-groupcolor="gray"]) {display:none;} .head.tabsLeft > .groupMarker[data-groupcolor="blue"] ~ .tab:has(~ .endGroupMarker[data-groupcolor="blue"]) {border-left: 4px solid blue; border-top:0;} .head.tabsLeft > .groupMarker[data-groupcolor="green"] ~ .tab:has(~ .endGroupMarker[data-groupcolor="green"]) {border-left: 4px solid green; border-top:0;} .head.tabsLeft > .groupMarker[data-groupcolor="red"] ~ .tab:has(~ .endGroupMarker[data-groupcolor="red"]) {border-left: 4px solid red; border-top:0;} .head.tabsLeft > .groupMarker[data-groupcolor="orange"] ~ .tab:has(~ .endGroupMarker[data-groupcolor="orange"]) {border-left: 4px solid orange; border-top:0;} .head.tabsLeft > .groupMarker[data-groupcolor="violet"] ~ .tab:has(~ .endGroupMarker[data-groupcolor="violet"]) {border-left: 4px solid violet; border-top:0;} .head.tabsLeft > .groupMarker[data-groupcolor="purple"] ~ .tab:has(~ .endGroupMarker[data-groupcolor="purple"]) {border-left: 4px solid purple; border-top:0;} .head.tabsLeft > .groupMarker[data-groupcolor="brown"] ~ .tab:has(~ .endGroupMarker[data-groupcolor="brown"]) {border-left: 4px solid brown; border-top:0;} .head.tabsLeft > .groupMarker[data-groupcolor="gray"] ~ .tab:has(~ .endGroupMarker[data-groupcolor="gray"]) {border-left: 4px solid gray; border-top:0;} .tabGroupMenuBit { pointer-events: none; } .groupMarker { width: 5px !important; overflow:visible; __max-width: max-content !important; min-width: 0; white-space: nowrap; border-left: var(--borderWidth) solid var(--mainBorder); border-top-left-radius: 5px; height: calc(var(--headHeight) - 0px); line-height: calc(var(--headHeight) - 20px); line-height:15px; cursor:pointer; user-select:none; position:relative; __top:-6px; left:0; z-index:4; /* can't go higher than z-index for menu */ } .groupMarker.group_is_closed { width: max-content !important; line-height: calc(var(--headHeight) - 2px); border-top-right-radius: 5px; } .endGroupMarker { width: 5px !important; border-left: var(--borderWidth) solid var(--mainBorder); border-top-right-radius: 5px; } .tab:has(+ .groupMarker), .tab:has(+ .endGroupMarker) { border-right-width: 0 !important; } #groupMenu { z-index:334; } .tabGroupText { width: max-content !important; __color: var(--codeBackground); color: white; padding:1px 5px; __padding-top:0; border-radius:5px; __outline: 1px solid cyan; } .groupMarker.group_is_closed > .tabGroupText, #fakeTab.is_group_marker { border-radius:8px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .tabText.tabGroupText { pointer-events: all !important; } .tabGroupText:hover { __font-weight:bold; opacity:0.75; } .tab[data-group] > .tabText { __padding-top:2px !important; } .groupColorChange { display:inline-block; width:1.1rem; } /*#endregion*/ /*#region @@@@ CODE WINDOWS @@@@ */ /* new island architecture */ /* .house, .innerHouse { background-color: transparent !important; border-width:0 !important; } .scunthorpe, .code { border-radius:10px !important; } .tab:not(.active) >.tabText { __line-height:20px !important; padding-top:2px; padding-bottom:6px; } .head { background-color: transparent !important; } */ .code { __background-color: var(--codeBackground); background-color: var(--panelBackground); __background-color: #fec; height:100%; position:relative; height: calc(100% - var(--headHeight)); __margin-top:6px; } .code:has(> .secondWindow[data-ext="___svg"]) { /* https://css-tricks.com/almanac/properties/o/order/*/ display:flex; flex-direction: column-reverse; } .__code::before { content: attr(id); position:absolute; background:yellow; z-index:99999; font-size:0.8em; } .__head::before { content: attr(id); position:absolute; background:cyan; z-index:99999; font-size:0.8em; } .editor { height:100%; width:100%; } /* @@@ TAB PLACEMENT @@@ */ .house.tabsBottom > .innerHouse { display:flex; flex-direction: column-reverse; } .head.tabsBottom { border-top: var(--borderWidth) solid var(--mainBorder); } .head.tabsLeft { __display:block; display:flex; flex-direction: column; float:left; width:var(--verticalTabsWidth); max-width: 50%; height:100%; overflow-y:auto; __border-right: var(--borderWidth) solid var(--mainBorder); } .code.tabsLeft { float:left; width: calc(100% - var(--verticalTabsWidth)); min-width:50%; height:100%; } .head.tabsLeft > .backTab { position:absolute; z-index:0; width:100%; height: 100%; border-right:var(--borderWidth) solid var(--mainBorder); margin-right:0; __background-color:yellow; } .head.tabsLeft > .backTab > .backSplit { display:none; position:absolute; right:-5px; width:10px; height:100%; background-color:red; z-index:9999; } .head.tabsLeft > .tab { max-width: 50000px; min-height: 24px; max-height: var(--headHeight); border-left:0; border-right:0; border-bottom: var(--borderWidth) solid var(--mainBorder); border-right: var(--borderWidth) solid var(--mainBorder); __display: flex; __align-items: center; __justify-content: center; text-align:left; } .head.tabsLeft > .tab > .tabText { __line-height:100%; __vertical-align: middle; padding-left:9px; __width:100%; } .head.tabsLeft > .tab.active { border-right: var(--borderWidth) solid var(--codeBackground); } #fakeTab.tabsLeft { border-left: 0; border-top: var(--borderWidth) solid var(--mainBorder); border-right: var(--borderWidth) solid var(--codeBackground); } #main1Head.tabsLeft.paddLeft > .backTab + .tab, #main1Head.tabsLeft.paddLeft > .backTab + .groupMarker { margin-left:14px; width: calc(100% - 14px); } #main1Head.tabsRight.paddRight > .backTab + .tab, #main1Head.tabsRight.paddRight > .backTab + .groupMarker { margin-right:14px; width: calc(100% - 14px); } .head.tabsLeft > .groupMarker { } .head.tabsLeft > .groupMarker {height:0.6rem; width:100% !important;} .head.tabsLeft > .groupMarker.group_is_closed {height:3rem; __width:100% !important; margin: 0 auto;} .head.tabsLeft > .endGroupMarker {display:block; width:100% !important; height:5px !important; border-radius:0; border-bottom-left-radius: 5px;} .head.tabsLeft > .groupMarker.group_is_closed > .tabGroupText {width:100% !important; text-align:center;} .head.tabsLeft > .endGroupMarker.group_is_closed {display:none;} /* border-top-right-radius: 5px; */ .head.tabsRight { display:block; float:right; width:var(--verticalTabsWidth); max-width:50%; height:100%; overflow-y:auto; __border-right: var(--borderWidth) solid var(--mainBorder); } .code.tabsRight { float:right; width: calc(100% - var(--verticalTabsWidth)); min-width:50%; height:100%; } .head.tabsRight > .backTab { position:absolute; z-index:0; width:100%; height: 100%; border-left:var(--borderWidth) solid var(--mainBorder); margin-right:0; } .head.tabsRight > .tab { max-width: 50000px; border-right:0; border-bottom: var(--borderWidth) solid var(--mainBorder); border-left: var(--borderWidth) solid var(--mainBorder); text-align:left; } .head.tabsRight > .tab.active { border-left: var(--borderWidth) solid var(--codeBackground); } #fakeTab.tabsRight { border-left: 0; border-top: var(--borderWidth) solid var(--mainBorder); border-left: var(--borderWidth) solid var(--codeBackground); } .head.tabsRight > .tab > .tabText { padding-left:9px; } /* .head::after {position:absolute;top:0;right:50px;} #main1Head::after {content: 'm1';background-color:yellow;} #main2Head::after {content: 'm2';background-color:yellow;} #main3Head::after {content: 'm3';background-color:yellow;} #ref1Head::after {content: 'r1';background-color:pink;} #ref2Head::after {content: 'r2';background-color:pink;} #ref3Head::after {content: 'r3';background-color:pink;} */ /* .code > textarea { width:100%; height:100%; resize:none; tab-size:4; cursor: auto; } .code > textarea:focus { outline-color:skyblue; outline:0px; border: 0px solid skyblue; __border-top:0px; } */ .closePane { position:absolute; top:7px; right:15px; right:3px; border-radius:12px; padding:4px; } #closeOutput { right:4px; } .closePane > path { pointer-events:none; stroke: var(--color); stroke-opacity: 0.5; stroke-width:14; } .closePane:hover { background-color:var(--hoverBackground); } .closePane:hover > path { stroke:var(--color); stroke-opacity: 1; } .resizeIcon { position:absolute; __top:0px; top: var(--margin); __right:15px; __right:0px; right: var(--margin); /* color:red; color: var(--warningColor); __border-radius:12px; padding:4px; width:20px; height:20px; z-index:5; */ } .house.maximized > .resizeIcon { display:inline !important; } #side.floatright.hide + #input > div > div > .resizeIcon { __outline: 2px dotted orange; right:22px; } #floatingWindow { position:absolute; background: var(--menuBackground); border:var(--borderWidth) solid var(--mainBorder); box-shadow: 1px 2px 6px var(--mainBorder); width: var(--floatingWindowWidth); height: var(--floatingWindowHeight); } .scunthorpe:has(+ #floatingWindow.dockDown.visible) { height:calc(100% - var(--floatingWindowHeight)); } #floatingWindow.dockDown.visible { clear:both; position: static; width:100%; height: var(--floatingWindowHeight); } .scunthorpe:has(+ #floatingWindow.dockRight.visible) { width:calc(100% - var(--floatingWindowWidth)); } #floatingWindow.dockRight.visible { float:right; position: relative; left:auto !important; /* need to override the left and top floating values */ top:auto !important; width:var(--floatingWindowWidth); height: 100%; } #floatingHead { height: var(--headHeight); user-select:none; } .dockFree > #floatingHead { cursor: move; } .active#floatingHead { background:#cfe; } #floatingClose { cursor:default; } #brResizer { position:absolute; bottom: 0; right: 0; background:#fde; cursor: nwse-resize; user-select: none; } #blResizer { position:absolute; bottom: 0; left: 0; background:#fde; cursor: nesw-resize; user-select: none; } #floatingHorizontalSplit { __background:blue; } #floatingCode { width:100%; float:left; } #floatingRef { position:relative; float:left; display:none; height:calc(100% - var(--headHeight)); border-left: var(--borderWidth) solid var(--mainBorder); overflow-y:hidden; overflow-x:hidden; background-color: var(--menuBackground); color: var(--codeColor); font-family: var(--codeFont), monospace; padding-left: 0.3rem; font-size:12px; /* TODO: variable? or just something like calc(--codeFontSize * 0.8) */ line-height: 1.35rem; } #floatingWindow.viewRefs > #floatingRef { display:block; width: calc(var(--refWidth) - 5px); user-select:none; } #floatingWindow.viewRefs > #floatingCode { width: calc(100% - var(--refWidth)); } #refList { height:100%; overflow:auto; } .refHead { __background:var(--focusBackground); line-height:1.8rem; __padding-left: 3rem; width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .refHead, .refItem {line-height: 1.63em;} .refItems { font-family: var(--codeFont), monospace; } .refItem { width:100%; white-space:nowrap; /* text-overflow:ellipsis; overflow:hidden; */ padding-left:4px; /* box-shadow: 0 1px 0 var(--activeLineBorder); */ border-bottom:1px dashed var(--mainBorder); cursor:pointer; } .refItem.active { background: var(--focusBackground); } .refItem:not(.active):hover { background: var(--hoverBackground); } .refItems { position:relative; } #refSplit { __background:red; border-left: var(--borderWidth) solid var(--mainBorder); bottom:0; left:0; height:100%; position:absolute; width: 8px; /* don't want this as wide as the other splitters */ } .refLineNumber { display: inline-block; color:var(--lineNumberColor); border-right: 1px dashed var(--mainBorder); margin-right: 0.5ch; padding-right: 0.5ch; text-align: right; } #searchAllRefFiles.active { background: var(--focusBackground) !important; } .refName { color: var(--secondColor); font-weight:var(--bold); } .arrowWrap { display:inline-block; position:relative; __background:cyan; width:2rem; } .arrowWrap:hover > .triDown > .triangle, .arrowWrap:hover > .triRight > .triangle {fill-opacity:1;} .refCaller { width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; __background: cyan; __padding-left: 2rem; } /*#endregion*/ /*#region @@@@ OUTPUT @@@@ */ #output { __background-color: var(--panelBackground); border-top: var(--borderWidth) solid var(--mainBorder); border-left: var(--borderWidth) solid var(--mainBorder); } #output.side { border-right:var(--borderWidth) solid var(--mainBorder); } #dockAndClose { position:absolute; top:0; right:0; } .outputPane { height: 100%; height:calc(100% - var(--sideHeadHeight) - var(--headerHeight)); overflow-y:auto; overflow-x:hidden; __padding-top:6px; padding-bottom:30px; outline:0px solid black; } .flyingPane { height: 100%; height:calc(100% - var(--sideHeadHeight) - env(titlebar-area-height, 0px)); overflow-y:auto; overflow-x:hidden; __padding-top:6px; padding-bottom:30px; } #dockOutputButton { height:1.8rem; position:absolute; right:26px; top:4px; padding-left:3px; padding-right:3px; } #openOutputButton { position:absolute; right:0; top:2px; padding-left:0; padding-right:0; __background:yellow !important; } #closeSlideOutputButton { position:absolute; left:2px; top:2px; padding-left:0; padding-right:0; __background:yellow !important; } #livePreview { position:relative; width:100%; padding-bottom:0; __height:100%; __height:calc(100% - var(--headHeight)); __height:calc(100% - 40px); height:100%; overflow:hidden; } #outputBody { position:relative; top:6px; width:100%; height:100%; height:calc(100% - 26px); __height:100%; } #outputFrame { box-sizing: border-box; __border-width:0px !important; border:2px solid red; width:100%; height:100%; __background:cornsilk; overflow:auto; } .checkered { /*TODO: has artefacts so look for better soln */ background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%); background-size:25px 25px; /* Must be a square */ background-position:0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */ } .outputButton { line-height:1em; height:22px; } .outputButton.active { background: var(--focusBackground) !important; } #previewHead { height:1.6rem; width:80%; } #___previewWrap { width: 100%; height:100%; position:relative; overflow:auto !important; background-color: white !important; } /* FEEDBACK */ #feedbackPane { height:100%; padding:1rem; } #feedbackText { width:100%; height:20rem; resize: vertical; white-space: nowrap; tab-size: 4; } .feedbackInput { display:block; width:100% !important; } .feedbackSelect { display:block; width:100% !important; } .feedbackTextArea { display:block; width:100% !important; resize:none; height:20rem; } #recordedFeedbackVideo { width: 100%; __height:10rem; } #screenshotImage { display:block; width:100%; } /*#endregion*/ /*#region @@@@ SEARCH @@@@ */ #searchHead { padding:4px; padding-top:0; /* height: var(--sideHeadHeight); */ /* line-height: var(--sideHeadHeight); */ height: 36px; line-height: 36px; overflow:hidden; background-color: var(--headBackground); border-bottom: 1px solid var(--mainBorder); } /* Most of the styles for the search box are in scunthorpe.css However there are some overrides needed which we do here */ #_searchBox { position:relative !important; top:0 !important; left:0 !important; margin-top: 6px; margin-bottom: 6px; margin-left:0 !important; width: 100%; max-width:40rem; overflow:hidden; box-shadow: none; background-color: var(--panelBackground); z-index: 10; } #_searchBox {width:calc(100% - 1rem);} #searchForFileBox { position:sticky !important; top:0; left:0; margin-top: 0px; z-index: 12; background-color: var(--panelBackground); padding:4px; padding-right:0px; border-bottom: 1px solid var(--mainBorder); } #filterFilesButton { width:20px; min-width:20px; height:1.9rem; margin-left:1px; margin-right:1px; margin-top:1px; } #searchForFileButton { margin-top:4px; margin-right:0px; /* padding-top:2px !important; */ width:30px; min-width:30px; } #numFilesResult { color: var(--secondColor); display:inline-block; width:100%; text-align:center; position:relative; top:3px; } #searchWrap { position:relative; padding: 1rem 0.75rem; padding-right:0; height:calc(100% - 2.8rem); __outline:1px solid red; } /* RESULTS */ #folderSearch { position:relative; width:100%; /* height:calc(100% - var(--headHeight)); */ height:100%; /* padding-left:0.5rem; padding-right: 0.5rem; */ padding-bottom:0.5rem; overflow:hidden; } #searchResults { margin-top:2rem; position:relative; background: var(--codeBackground); background: var(--panelBackground); line-height: 1.4; __width:100%; __height:calc(100% + 15rem); height:calc(100% - 5.6rem); overflow-y:scroll; overflow-x:auto; __border:var(--borderWidth) solid var(--mainBorder); padding-bottom:0; } #searchResults.replaceMode { height:calc(100% - 6rem); } #testInput { position:sticky; bottom:0 } .resChunk { width:max-content; min-width: calc(100% - 1rem); margin: 1rem 0rem; border: var(--borderWidth) solid var(--mainBorder); } .srHead { __margin-top:2rem; width:100%; __background:var(--focusBackground); background:var(--headBackground); __border-top: var(--borderWidth) solid var(--mainBorder); border-bottom: var(--borderWidth) solid var(--mainBorder); __position: sticky; __padding-left: 3rem; } .srHead:has(+ .hide.srItems) { border-bottom: 0px solid var(--mainBorder); } .srHead, #resHead { position:relative; line-height:1.8rem; __padding-left:0.3rem; } .srItem { line-height:1.8rem; } #resHead { position: sticky; top:0; left:0; background-color: var(--panelBackground); z-index:10; } .srFileName { font-weight:var(--bold); color: var(--secondColor); } .__headDismissButton, .___itemDismissButton { display: none; position:absolute; __float:right; right:0; color:red; font-weight: bold; padding-left:0.5rem; padding-right:0.5rem; __cursor:pointer; } /* Not using individual item dismiss. User can alsways click on the search result and replace one by one */ .headDismissButton, .itemDismissButton { display:none; position: static !important; } .srHead:hover > .headDismissButton, ._____srItem:hover > .itemDismissButton { display: inline; } .srItems { min-width:100%; width:max-content; position:relative; } .srItem { position:relative; font-family:Consolas, "Cascadia Mono", "Cascadia Code", "Lucida Sans Typewriter", "Courier New", Consolas, monospace; font-size:1.08rem; width:100%; __overflow:hidden; white-space: nowrap; text-overflow:ellipsis; cursor:pointer; } .srItem.active, .srItem.active > .searchLineNum { __outline:4px dotted orange; background:var(--focusBackground) !important; } .srItem.wordwrapped { white-space: normal; overflow:hidden; } .multiline.srItem, .singleline.srItem { width:100%; display:flex; border-bottom:1px dotted var(--mainBorder); } .multiline.srItem:last-child, .singleline.srItem:last-child { border-bottom:0px dotted var(--mainBorder); } .singleline.srItem > .singlelineSearchTerm { width:100%; pointer-events:none; padding-left:4px; background: var(--codeBackground); } .multiline.srItem > .multilineSearchTerm { pointer-events:none; white-space: pre; tab-size: 4; __float:left; } .multiline.srItem > .searchLineNum{ __float:left; } .srItem:hover { background: var(--hoverBackground); } .srSearchHighlight, .srSearchHighlightOut, .srSearchHighlightIn { pointer-events:none; background:var(--searchHighlight); border-radius:2px; } .srSearchHighlightOut { text-decoration: line-through; } .srSearchHighlightIn { background:var(--selection); } .srHighlight { background:var(--searchHighlight); } .____srReplaceHighlight { pointer-events:none; text-decoration: line-through; background:var(--replaceHighlight); border-radius:2px; } .res { color: var(--secondColor); } .searchLineNum { pointer-events:none; display:inline-block; border-right: var(--borderWidth) solid var(--mainBorder); color: var(--lineNumberColor); background: var(--stemBackground); min-width: 3rem; text-align:right; padding-right:0.3rem; } .srItem:hover > .searchLineNum { background: var(--hoverBackground); } .____searchLineNum[data-nums]::after { /* not using */ content: attr(data-nums); font-size:8px; background-color: red; color:white; border-radius: 5px; line-height:10px; display:inline-block; width:10px; text-align: center; position:relative; top:3px; } .srReplaceAllButton { position:absolute; __float:right; right:0; } .triDown, .triRight { position:absolute; width:8px; height:8px; pointer-events:none; right:0.5rem; top:0.6rem; } /*#endregion*/ /*#region @@@ TITLE BAR @@@ */ #titleBar { position: fixed; left: env(titlebar-area-x, 0); top: env(titlebar-area-y, 0); /* right:env(titlebar-area-width, 0); */ height: env(titlebar-area-height, 32px); width: env(titlebar-area-width, 100%); __width:1000px; __width:auto; /* -webkit-app-region: drag; */ background-color: var(--bodyBackground); background-color: transparent !important; __border: 1px solid orange; __margin-left:200px; __margin-left:200px; __width: calc(100% - 400px); user-select:none; /* https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay */ -webkit-app-region: drag; app-region: drag; /* -webkit-app-region: no-drag; app-region: no-drag; */ __z-index:-1; anchor-name: --arse; overflow-y: hidden; } #titleBar.unused {display:none;} #titleBarColor { display: inline-block; width:10px; height:20px; background-color:blue; cursor:default; } #____innerTitleBar /* only for buttons not search box in title bar */ { position:relative; height: env(titlebar-area-height, 32px); width: max-content; /* margin-left:auto; margin-right:0; */ float:right; /* border-left: var(--borderWidth) solid var(--mainBorder); border-right: var(--borderWidth) solid var(--mainBorder); */ /* border-left: 1px solid var(--color); border-right: 1px solid var(--color); */ /* padding-left:1rem; padding-right:1rem; */ -webkit-app-region: no-drag; app-region: no-drag; overflow-y: hidden; } #leftTitleIcons, #rightTitleIcons { position:relative; height: env(titlebar-area-height, 32px); width: max-content; -webkit-app-region: no-drag; app-region: no-drag; overflow-y: hidden; } #leftTitleIcons {float: left; margin-left: calc(var(--margin) * 2);} #rightTitleIcons {float: right; margin-right: calc(var(--margin) * 2);} #leftTitleButtons {float:left;} #rightTitleButtons {float:right;} .searchBox.inTitleBar { /* right:auto; left:160px; */ top:0px; display:block; position:relative; float:left; left:0; right:0; border-radius:0; border:0; __z-index:-1; height: env(titlebar-area-height, 32px) !important; -webkit-app-region: no-drag; app-region: no-drag; } .searchBox.inTitleBar > :is(.searchSection, .replaceSection) { __float:left; __width:40% !important; } #toggleOverlay { position:fixed; top:0; right:0; height:12px; width:24px; line-height:12px; background-color:cyan !important; } /*#endregion*/ /*#region @@@@ AI @@@@ */ #chatPane { position:relative; width:100%; height:100%; __padding-left:0.5rem; __padding-right: 0.5rem; padding-bottom:0.5rem; __user-select: none; overflow: hidden; } #chatHead { __padding-left:0.5rem; __padding-right:0.5rem; __background-color: var(--headBackground); __height:21px; padding:4px; padding-top:0; /* height: var(--sideHeadHeight); */ /* line-height: var(--sideHeadHeight); */ height: 36px; line-height: 36px; overflow:hidden; background-color: var(--headBackground); border-bottom: 1px solid var(--mainBorder); } #chatWrap { line-height: 1.4; width:100%; height:calc(100% - 2.8rem); padding-bottom:0; __margin-top:0.5rem; } #recentChats { margin: 0 auto; __text-align:center; } #ciTable { margin-top:1rem; border:var(--borderWidth) solid var(--mainBorder); width: 100%; border-collapse: collapse; border-spacing:0; table-layout: fixed; } #firstCiRow { border-bottom:var(--borderWidth) solid var(--mainBorder); } .customInstructionTd { padding-left:0.3rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; /* font-family: var(--codeFont), monospace; */ background: var(--codeBackground); } .ciTd { __padding-left:0.3rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; /* font-family: var(--codeFont), monospace; */ background: var(--codeBackground); } .ciMini { width:1.2em; margin:0.05em; } #ciModal { width:44rem; max-width:100%; padding:1rem; padding-top:2rem; cursor:default; } #ciTextArea { width:100%; height:7em; font-family: var(--uiFont); /* font-family: var(--codeFont), monospace; tab-size: var(--tabSize); */ tab-size: 4; resize: vertical; } .ciInput { height: 2rem; } #chatBox { position:relative; width:100%; __height: var(--chatBoxHeight); __border-top: 1px solid red; height: calc(var(--chatTextAreaHeight) + 68px); padding-left:0.5rem; padding-right:0.5rem; padding-top:0.5rem; } #chatCiSelect { __width: 50%; height: 1.5rem; } #chatTextArea { __display:none; __position: sticky; ___bottom:0; margin-top:0.5rem; margin-bottom:0.25rem; width:100%; __height:calc(100% - 1.6rem); height: var(--chatTextAreaHeight); resize:none; overflow:hidden; line-height:1.5; border: 1px solid var(--mainBorder); color: var(--color); background: var(--codeBackground); font-size: var(--fontSize); font-family: var(--uiFont), sans-serif; padding:7px 5px; } #chatTextArea.height0 { height:0px !important; min-height:34px; /* must set --chatTextAreaHeight equal to this where val = 20 + paddingTop + paddingBottom */ overflow-y: auto !important; } #chatResults, #chatDashboard { position:relative; width:100%; __height:calc(100% - var(--chatBoxHeight)); height:calc(100% - var(--chatTextAreaHeight) - 68px); __border-top: var(--borderWidth) solid var(--mainBorder); overflow-y:auto; __border-top: 1px solid var(--mainBorder); border-bottom: 1px solid var(--mainBorder); __border-radius: 3px; } #chatDashboard { padding:1rem; } #recentChatList { padding-left:1rem; padding-left:1rem; } .chatItem { position: relative; height:2rem; overflow:hidden; list-style-position:inside; white-space:nowrap; text-overflow:ellipsis; width:calc(100% - 0rem); overflow:hidden; } .chatItem:hover { text-decoration: underline; cursor: pointer; } .removeChat, .renameChat, .exportChat { display: none; position:absolute; right:0; top:0; } .renameChat {right:12px;} .exportChat {right:24px;} .removeChat:hover, .renameChat:hover, .exportChat:hover { background-color: var(--hoverBackground); } .chatItem:hover > .removeChat, .chatItem:hover > .renameChat, .chatItem:hover > .exportChat { display:block; } #chatSplit { } #chatProcessing { font-size: 0.8rem; color:var(--secondColor); } #chatChars { font-size: 0.8rem; } #__cancelChat { text-decoration: underline; cursor:pointer } .chatQA { margin-left: 1rem; margin-right: 1rem; margin-top: 1rem; padding-bottom:2rem; __border-radius:3px; border-bottom: var(--borderWidth) solid var(--mainBorder); } .chatQuestion { position: relative; white-space: pre-wrap; padding:0.5rem; padding-right:3rem; background-color: var(--headBackground); border-radius:3px; border: var(--borderWidth) solid var(--mainBorder); cursor: pointer; max-height:400px; overflow-y: auto; } .chatQA.hideFromSubmit > .chatQuestion > .qtext, .chatQA.hideFromSubmit > .chatAnswer { opacity:0.5; } .qtext { __opacity:0.1; cursor: text; } .eyeIcon { display:none; position: absolute; cursor:default; top:3px; right:20px; } .copyIcon { display:none; position: absolute; cursor:default; top:3px; right:36px; } .chatQuestion::before { content: 'You: '; font-weight:var(--bold); } .chatQuestion:hover > .closeCross { display:block; top:3px; right:3px; } .chatQuestion:hover > .eyeIcon { display:block; } .chatQuestion:hover > .copyIcon { display:block; } .chatAnswer { white-space: pre-wrap; padding-top:0.5rem; } .chatAnswer::before { content: 'AI: '; font-weight:var(--bold); } .chatCodeBlock { position:relative; width:100%; overflow-x:auto; overflow-y:hidden; white-space: pre; background-color: var(--codeBackground); font-family: var(--codeFont), monospace; font-size: var(--fontSize); border:var(--borderWidth) solid var(--mainBorder); padding:0.5rem; __cursor: text; /* would like to have text cursor everywhere in the code block, but then we get a text cursor over the horizontal scrollbar which looks bad */ __user-select: text; border-radius:3px; } .copyButtonWrap { text-align:right } .copyButton { font-size:0.9rem; line-height:1rem; } .chatCodeLine { font-family: var(--codeFont), monospace; font-size: var(--fontSize); } #aiText { position:fixed; bottom:2rem; right:2rem; height:90vh; height:12rem; width:30rem; outline:3px solid orange; font-size:11px } #aiText2 { position:fixed; bottom:15rem; right:2rem; height:4rem; width:30rem; outline:3px solid orange; font-size:11px } .offlineMessage { color: var(--warningColor); } /*#endregion*/ /*#region @@@@ LATEX @@@@ */ #texPreview { height:100%; padding:0; } #texHead { padding:4px; padding-top:0; /* height: var(--sideHeadHeight); */ /* line-height: var(--sideHeadHeight); */ height: 36px; line-height: 36px; overflow:hidden; background-color: var(--headBackground); border-bottom: 1px solid var(--mainBorder); } #texWrap { width:100%; height:calc(100% - 36px); padding-bottom:0; overflow:hidden; } #texliveFrame { __display:none; width:calc(100% - 8px); height:calc(100% - 10px); border:0; padding:4px; margin:4px; outline:1px solid red; } #pdfOutput { width:calc(100% - 8px); height:calc(100% - 10px); border:0; padding:4px; margin:4px; outline:1px solid blue; } #weblatexDiv { width:calc(100% - 8px); height:calc(100% - 10px); border:0; padding:4px; margin:4px; outline:1px solid orange; overflow:auto; } /*#endregion */ /*#region @@@@ FLYING BOX @@@@ */ .flyingHead { height: var(--flyingHeadHeight); border-bottom:var(--borderWidth) solid var(--mainBorder); background-color: var(--headBackground); } .headTitle { padding-left:0.5rem; font-size:1.2rem; line-height:32px; __width:max-content; __text-align: center; } .flyingBox { z-index:3; user-select:none; position:fixed; position:absolute; right:0px; width:24rem; __width:320px; width: var(--settingsWidth); __top: calc(var(--sideHeadHeight) + var(--headerHeight) + 0px); top:0; height:100%; __height: calc(100% - 20px); __height:calc(100% - var(--sideHeadHeight) - var(--headerHeight)); background: var(--panelBackground); border-left: var(--borderWidth) solid var(--mainBorder); __border-top: var(--borderWidth) solid var(--mainBorder); transition: right 0.2s ease; __box-shadow: 1px 2px 6px var(--mainBorder); __border-top-left-radius:4px; __overflow:auto !important; visibility:visible; overflow:hidden; } .flyingBox[data-panelstyle] { __border:0 !important; __margin: var(--margin) !important; top: var(--margin); right: var(--margin); width: calc(var(--settingsWidth) - var(--margin) - var(--margin)); height: calc(100% - var(--margin) - var(--margin)); } .flyingBox.hidden { __display:none; right: -24rem; __right:-320px; right: calc(var(--settingsWidth) * -1 - 10px); __width:0; __visibility:hidden; __left: -24rem; } /*#endregion*/ /*#region @@@@ SETTINGS @@@@ */ #settings { width:100%; __height:calc(100% - var(--flyingHeadHeight)); __height:100%; __height:100%; overflow:hidden; padding:0; margin:0; ___height:1000px; } #settingsWrap { __height:1000px; z-index:0 !important; } #newSettingsList { __height:calc(100% - 5rem); } #___searchSettingsWrap { height:3rem; border-bottom: 1px solid var(--mainBorder); } #settingsHead { __border:0; __height:60px; __border:0; __padding:4px; overflow:hidden; background-color: var(--headBackground); __background-color: var(--panelBackground); } #__resetSettingsLink { position:absolute; top:3px; right:40px; } .switcheroo { font-size: 13px; float:right; margin-right:2rem; } #commonSettings { height:calc(100% - var(--sideHeadHeight) - env(titlebar-area-height, 0px)); overflow-y:auto; overflow-x:hidden; padding-top:1rem; } .commonHr { margin-left:0.5rem; margin-right:0.5rem; } #searchSettingsWrap, #searchThemeWrap, #searchShortcutsWrap { height:var(--basketHeight); height:36px; height:40px; position:relative; border-bottom: 1px solid var(--mainBorder); } #headFiller { position:absolute; top:0; left:0; width:100%; height: var(--basketHeight); background-color:yellow; border-bottom: 1px solid var(--mainBorder); } #__searchSettings { border:var(--borderWidth) solid var(--mainBorder); } #settings { overflow:hidden; padding:0; margin:0; } /* #settingsList, #newSettingsList { height: calc(100% - 0.3rem); height:100%; height:calc(100% - var(--flyingHeadHeight)); overflow-x: hidden; overflow-y: auto; padding-bottom:3rem; } */ /* #newSettingsList */ .innerSettings { __height: calc(100% - 5rem); height: calc(100% - var(--sideHeadHeight) - var(--textBoxWrapHeight)); height: calc(100% - var(--textBoxWrapHeight)); overflow-x: hidden; overflow-y: auto; padding-bottom:3rem; } #settingsList {display:none;} #___newSettingsList { white-space:pre; } #settingsHouse { width:100%; height:100%; overflow-y: scroll; overflow-x:hidden; } .slider { display: block; width:48%; float:right; } .sliderResult { color:var(--secondColor); } .settingsItem { clear:both; display:flex; justify-content: space-between; padding:0.5rem; } .settingsItem:hover { __background: var(--hoverBackground); __outline: var(--borderWidth) solid var(--mainBorder); } .settingsHeading { position:relative; clear:both; font-weight:var(--bold); padding-left:0.5rem; padding-top:0.3rem; padding-bottom:0.3rem; font-size:1.05rem; __margin-top:0.6rem; __background:#ddd; cursor:pointer; __border-top: var(--borderWidth) solid var(--mainBorder); } .settingsDetails { border-bottom: var(--borderWidth) solid var(--mainBorder); } /* https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025 */ details { __inline-size: 50ch; @media (prefers-reduced-motion: no-preference) { interpolate-size: allow-keywords; } &::details-content { opacity: 0; height: 0; overflow-y: clip; transition: content-visibility 0.12s allow-discrete, opacity 0.12s, height 0.12s; } &[open]::details-content { opacity: 1; height: auto; } } .__settingsHeading::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .08; background-color: var(--color); __background-color: red; } .settingsHeading:hover { background-color:var(--hoverBackground); } .settingsHeading.first { padding-top:0; } #___searchSettings { /* margin-top:3px; margin-left:3px; */ width:150px; __float:right; margin-right:0.2rem; vertical-align:top; filter: grayscale(100%); } .textBoxWrap { height: var(--textBoxWrapHeight); } .settingsText { width:100%; width: 50%; line-height:1.5; float:left; position: relative; top:3px; } .settingsSelect, .settingsInput, .settingsTable, .searchSelect, .settingsIncOuter, .settingsTextArea { width: 50%; height: 2rem; font-family: var(--uiFont), sans-serif; font-size: 1rem; color: var(--color); background: var(--codeBackground); __background: red; border:var(--borderWidth) solid var(--mainBorder); border-radius:2px; border-radius:var(--smallBorderRadius); /* border-radius:1rem; padding-left:0.6rem; padding-right:0.6rem; */ } .smaller.settingsSelect { width: calc(50% - 37px); } textarea { font-size: 1rem; color: var(--color); background: var(--codeBackground); border:var(--borderWidth) solid var(--mainBorder); border-radius:2px; } .settingsText:has(+.settingsSelect.modified) { font-weight:bold; __text-decoration: underline; } .searchSelect { width:99%; max-width:200px; min-width:100px; } .settingsIncOuter { display:flex; cursor: default; user-select: none; } .incInner { width: 33.333%; text-align:center; } .incInner.plusMinus { font-size:1.25rem; line-height:1.75rem; } .incInner.plusMinus:hover { background-color: var(--hoverBackground); } .incInner.value { border-left: var(--borderWidth) solid var(--mainBorder); border-right: var(--borderWidth) solid var(--mainBorder); line-height:2rem; } .settingsTable { width:50% !important; border:0; height:2rem; border-top:var(--borderWidth) solid var(--mainBorder); border-bottom:var(--borderWidth) solid var(--mainBorder); /* background: inherit; */ background: var(--codeBackground); /* border-radius:var(--smallBorderRadius); doesn't work on tables that are collapsed*/ } .plusMinus.miniButton { height: 1.9rem; font-size:1.25rem; line-height:0.7rem; } .settingsValue { pointer-events: none; text-align:center; __color:var(--secondColor); } .settingsSelect > option { height:2rem; font-family: var(--uiFont), sans-serif; cursor:pointer; __background: var(--codeBackground); } .settingsSelect { __color:green; cursor:pointer; } .optionTitle { color:var(--color) !important; opacity:1 !important; font-weight:bold; } .___optionHr { /* border-color: red; color:red; */ border-bottom-color:blue !important; background-color: red !important; height: 1px; border: 0; } /* .settingsSelect:has(> option.offy) > option, .settingsSelect:has(> option.offy) { color:rgb(5, 187, 5); } option.offy, .settingsSelect:has(> option.offy:checked) { color:rgb(255, 100, 100) !important; } */ select:focus, button:focus-visible, input:focus, textarea:focus { outline: 2px solid var(--focusBackground); __box-shadow: 1px 2px 6px var(--mainBorder); } .info { display:inline-block; display:none; text-align:center; __vertical-align: baseline; width:1rem; margin-left:0.3rem; __border: var(--borderWidth) solid var(--mainBorder); border-radius: 0.5rem; cursor:default; font-family: 'Comic Sans Ms', Arial; } .info:hover { background-color: var(--hoverBackground); } .__________settingsText:hover > .info {display:inline-block;} .settingsHr { display:none; margin-top: 28px; } .boldButton {font-weight: var(--bold);} .italicButton {font-style: italic;} .boldButton, .italicButton { font-size:1rem !important; border:var(--borderWidth) solid var(--mainBorder) !important; width:10px !important; height:2rem !important; } .settingsTextArea { height:3rem; resize:vertical; } a.link { text-decoration: none; color: var(--secondColor); cursor:pointer; } a.link:hover { text-decoration: underline; } a.slink { position:absolute; right:5px; font-weight: normal; } a.slink2 { position:relative; top:3px; __right:4px; font-weight: normal; } .menuSelect { margin-left:18px; margin-bottom:2px; margin-top:2px; width: calc(100% - 36px); } .menuSelectText { margin-left:18px; } /* Testing new customizable select*/ /* select, ::picker(select) { appearance: base-select; } */ /* option[data-default="true"] { color:blue; text-decoration: underline; } */ __option[data-default="true"]::after { content: ' (default)' /* doesn't work */ } /* selectedcontent { text-decoration: underline; font-weight:bold; } */ /* select:has(> option[data-default="true"]:selected) { color:red; } */ /* #endregion */ /*#region @@@@ THEME @@@@ */ :root { --margin:0; --mildRadius: 0.35rem; --mediumRadius: 0.5rem; --megaRadius: 0.8rem; } body[data-panelstyle] { /* --margin:0.35rem; */ --margin:4px; padding: var(--margin); /* padding-top: calc(env(titlebar-area-height, 0) + var(--margin)); */ padding-top: env(titlebar-area-height, 0); __padding-top: var(--margin); } body[data-panelstyle="mild_rounded"] {--margin:4px;} body[data-panelstyle="rectangular"] {--margin:4px;} body[data-panelstyle="medium_rounded"] {--margin:4.5px;} body[data-panelstyle="mega_rounded"] {--margin:5px;} .outerPanel[data-panelstyle] { border:0 !important; padding: var(--margin) !important; } .innerPanel[data-panelstyle] { border: 1px solid var(--mainBorder); __border: 0px solid var(--mainBorder); /* Can look cleaner without a border, but relies on a decent contrast between panel and body color */ } .innerPanel[data-panelstyle="mild_rounded"] {border-radius: var(--mildRadius);} .innerPanel[data-panelstyle="medium_rounded"] {border-radius: var(--mediumRadius);} .innerPanel[data-panelstyle="mega_rounded"] {border-radius: var(--megaRadius);} body[data-panelstyle]:not(.local) > #middle, body[data-panelstyle]:not(.local) > #settingsPanel { margin-top: calc(-1 * var(--margin)); height: calc(100% + var(--margin) - var(--headerHeight) - var(--footerHeight) - var(--donateBoxHeight)); } #theme { overflow:hidden; padding:0; margin:0; } #___themeList { height: calc(100% - 3rem); overflow-x: hidden; overflow-y: auto; } .themeColorBox { position:absolute; top:-0.24rem; right:-1px; width:10px; height:2rem; border: var(--borderWidth) solid var(--mainBorder); /* border-radius: 0.5rem; cursor:default; */ } .themeColorBox.halfling { height:1rem; } .themeColorBox.bottom.halfling { top:0.76rem; } .themeHeading:has(+.themeHeading), .themeHeading:last-child { display:none; } .themeOverride { font-weight:bold; } .themeFallback { font-style:italic; } /* #endregion */ /*#region @@@@ SHORTCUTS @@@@ */ #___searchShortcutsWrap { height:3rem; } #searchShortcuts, #searchShortcuts2 { border:var(--borderWidth) solid var(--mainBorder); } .keyWrap.modified { color: var(--secondColor); } .keyWrap.empty { opacity: 0.4; } .keyButton { margin-left: auto; } #shortcuts { overflow:hidden; padding:0; margin:0; } #___shortcutsList { height: calc(100% - 3rem); overflow-x: hidden; overflow-y: auto; } #shortcutMenu { position:fixed; } .keyCommand, .keyBit { pointer-events: none; } .keyBit { margin-left:auto; text-align: right; } .other > .keyCommand { padding-left:2rem; } .keyCommand { padding-left:1rem; } .keyWrap:hover > .keyCommand::before { position:absolute; left:-4px; top:0; content: '\1F589'; } #fakeInput { display:block; height:0.8rem; font-size: 0.5rem; opacity:0; } #shortcutModal, #snippetModal, #templateModal { width:24rem; padding:1rem; padding-top:2rem; cursor:default; } #comboResult { border: 1px dashed var(--mainBorder); width:100%; height:2rem; text-align:center; } #conflictText { margin-top:1rem; margin-bottom:1rem; font-weight:bold; } #saveCombo.disabled { opacity: 0.4; pointer-events: none; } #shortcutModifierSelect { width:48%; } #shortcutKeySelect { width:48%; } #shortcutKeySelect > option.taken { font-weight:bold; color:var(--secondColor); } /*#endregion*/ /*#region @@@@ SNIPPETS @@@@ */ #snippets { margin-left:1rem; margin-right: 1rem; } #snippetsList, #templatesList { __margin:0.7rem; } #__templatesList {margin-top:4rem;} #snippetTable, #templateTable { border:var(--borderWidth) solid var(--mainBorder); width: 100%; border-collapse: collapse; border-spacing:0; table-layout: fixed; } #firstSnippetRow, #firstTemplateRow { border-bottom:var(--borderWidth) solid var(--mainBorder); background-color: var(--headBackground); } .snippetTd, .templateTd { padding-left:0.3rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; /* font-family: var(--codeFont), monospace; */ background: var(--codeBackground); } .disabled.snippetTd, .disabled.templateTd { opacity:0.3; } .snippetMini, .templateMini { width:1.2em; margin:0.05em; } #snippetTextArea, #templateTextArea { width:100%; height:7em; font-family: var(--codeFont), monospace; /* tab-size: var(--tabSize); */ tab-size: 4; resize: vertical; white-space: nowrap; } #templateTextArea {height:16em;} .snippetInput { height: 2rem; } /*#endregion*/ /*#region @@@@ DROP AREAS @@@@ */ .drop { display:none; position:absolute; width:25%; height:25%; __background:skyblue; background-color:rgba(102, 119, 253, 0.25); font-size:2rem; } /* .dragging .drop {display:block;opacity:0.2;} */ /* .dragging .drop:hover {opacity:1;} */ .drop.showDropBox { display:block; /* display: grid; grid-template-rows: 100vh; grid-template-columns: 100vw; */ } .big.drop{ display:none !important; top:0; left:0;/* */ width:100%; height:100%; background:#afa; } .left.drop { left:5%; top: 35%; } .drop::before { position:absolute; padding:6px; top:calc(50% - 22px); __text-align: center; __margin:0 auto; display: inline-block; __width: 100%; left: 0; right: 0; text-align: center; text-align: center; color: var(--codeBackground); __background-color:rgba(102, 119, 253, 1); font-size:24px; opacity:1; __text-shadow: 0px 2px 8px var(--color); } .left.drop::before {content: 'Move Left';} .right.drop::before {content: 'Move Right';} .bottom.drop::before {content: 'Move Below';} .right.drop { right:5%; top:35%; } .bottom.drop { bottom:5%; left:37.5%; } /*#endregion*/ /*#region @@@@ COLOR PICKER @@@@ */ #colorPicker { /* position:fixed; top:0; left:0; width:100%; height:100%; */ width:414px; height:394px; padding:8px; padding-top:30px; padding-bottom:14px; background-color: var(--menuBackground); z-index: 1000; cursor: default; __user-select:unset; } #colorMoveStrip { __background:yellow; width:100%; height:20px; position:absolute; top:0; left:0; cursor: move; } #colorPicker.active {cursor: move;} #closeColorPicker { top:0px; } div#colorPicker {} #closeColorPicker { float: right; /* position: absolute; top:0; right:0; */ } #colorPickerHead { height: var(--headHeight); } #colorPickerMain { __width:400px; __height:400px; border-top: var(--borderWidth) solid var(--mainBorder); height: calc(100% - var(--headHeight) - 5px); overflow: auto; } #colorRodWrap { height:30px; position: relative; } #colorRod { height:100%; outline:1px solid var(--mainBorder); width:100%; background: linear-gradient(in hsl longer hue to right, hsl(0, 100%, 50%), hsl(360, 100%, 50%)); } #rodMarker { pointer-events: none; position:absolute; width:1px; height:20px; background-color:black; __border-radius: 2px; left:50px; bottom:-4px; } #colorMidWrap { height: calc(100% - 156px); width: 100%; position:relative; margin-top:8px; margin-bottom:8px; } #boxMarker { pointer-events: none; position:absolute; width:10px; height:10px; border: 1px solid black; border-radius: 5px; background-color:transparent; box-shadow: 0px 0px 2px 2px white; __filter: invert(100%) hue-rotate(180deg); __filter: invert(100%); } /* #innerBoxMarker { display:none; position:absolute; top:0.5px; left:0.5px; width:8px; height:8px; border: 1px solid white; border-radius: 4px; } */ #grayscaleRodWrap { position:relative; float:left; width:30px; height:100%; border:1px solid var(--mainBorder); margin-right: 8px; } #grayscaleRod { width:100%; height:100%; background: linear-gradient(in hsl longer hue to bottom, hsl(0, 0%, 0%), hsl(360, 0%, 100%)); } #grayscaleMarker { pointer-events: none; position:absolute; width:20px; height:1px; background-color:orange; top:50px; right:-4px; } #colorBoxWrap { __height: 100%; float:left; position:relative; height: 100%; width: calc(100% - 38px); border: 1px solid var(--mainBorder); } #colorBox { width:100%; height:100%; } #namedColors { height: calc(100% - 112px); width: 100%; position:relative; __margin-top:8px; margin-bottom:8px; border: 1px solid var(--mainBorder); } .namedColor { font-size:0.6rem; line-height:0.6rem; float:left; width:10%; height:6.67%; } #namedColorsSelect { width: 100%; } #colorPreviewWrap { position:relative; float: left; width:100px; height:116px; border:1px solid var(--mainBorder); __background-color: transparent; overflow:hidden; background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%); background-size:25px 25px; /* Must be a square */ background-position:0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */ } #colorPreview { width:100%; height: 100%; } #colorTests { __float: left; position:absolute; top:calc(50% + 7px); height: 53px; width:100px; __height:100px; __border:1px solid red; } .colorTest { float:left; padding-left:2px; height: 26px; width:50px; } #colorOptions { position:relative; float: left; margin-left:8px; padding: 2px; __width: calc(100% - 188px); width: 142px; height:116px; border:1px solid var(--mainBorder); } .colorInput { width:48px; margin-left:3px; } .colorDetailsSet { display: none; } [data-format="hsl"] > #hslDetails, [data-format="modern_hsl"] > #hslDetails, [data-format="hex"] > #hexDetails, [data-format="rgb"] > #rgbDetails, [data-format="modern_rgb"] > #rgbDetails, [data-format="hwb"] > #hwbDetails, [data-format="lch"] > #lchDetails, [data-format="lab"] > #labDetails { display: block; } /* .hslText, .oklchText, .rgbText, .hexText */ .colorText { display: inline-block; width: 60px; } .colorUnit { display:inline-block; __color:transparent; border:var(--borderWidth) solid var(--mainBorder); border-radius:4px; height:1.4rem; line-height:1.4rem; width:24px; position:relative; top:1px; } .colorUnit:hover { background-color: var(--hoverBackground); } #hueUnit { font-size:11px; } .colorUnit.modernOnly {display:none;} [data-format="modern_hsl"] .colorUnit.modernOnly {display:inline-block;} [data-format="modern_rgb"] .colorUnit.modernOnly {display:inline-block;} #colorFormatSelect {width:8.5rem; height:1.55rem;} #namedColorsSelect {height:1.55rem;} #eyeDropperButton {width:1.5rem; } #colorHistoryWrap { float: left; margin-left:8px; padding: 2px; __width: calc(100% - 188px); width: 138px; height:116px; border:1px solid var(--mainBorder); overflow:auto; } .colorHistoryItem { width:max-content; min-width:100%; overflow: hidden; __height:1rem; font-size:11px; } .colorSquare { pointer-events:none; display:inline-block; width:10px; height:18px; border:var(--borderWidth) solid var(--mainBorder); } .colorHistoryItem:hover { background-color: var(--hoverBackground); } /*#endregion */ #testyDiv { display: none; position:fixed; top:0; right:200px; height:100%; width:100px; background:cornsilk; overflow:hidden; font-size:2px; white-space: pre; } #refreshButton { __anchor position:fixed; bottom:22px; right:22px; position-anchor: --searchAnchor; top: anchor(0%); left:anchor(0%); position-area: top span-all; } #refreshButton:hover { outline:2px solid orange; } body.live > #refreshButton { background:yellow !important; } .anchor { background: goldenrod; anchor-name: --anchortome; aspect-ratio: 1; } .anchored { background: olive; /* position-anchor: --anchortome; */ position-anchor: --searchAnchor; position: absolute; top: anchor(start); left: anchor(start); }