Showing preview only (515K chars total). Download the full file or copy to clipboard to get everything.
Repository: tavyandy97/span-tree
Branch: master
Commit: f345c17845a9
Files: 82
Total size: 486.4 KB
Directory structure:
gitextract_3ye_7l94/
├── .babelrc
├── .gitattributes
├── .github/
│ └── FUNDING.yml
├── .gitignore
├── README.md
├── content/
│ ├── src/
│ │ └── scripts/
│ │ ├── components/
│ │ │ ├── Backdrop/
│ │ │ │ ├── Backdrop.jsx
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ ├── Loader/
│ │ │ │ ├── Loader.jsx
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ ├── Pane/
│ │ │ │ ├── Pane.jsx
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ ├── SVG/
│ │ │ │ ├── SVG.jsx
│ │ │ │ ├── assets/
│ │ │ │ │ ├── Branch.jsx
│ │ │ │ │ ├── Close.jsx
│ │ │ │ │ ├── Half.jsx
│ │ │ │ │ ├── Repo.jsx
│ │ │ │ │ └── Search.jsx
│ │ │ │ └── index.js
│ │ │ ├── Toggler/
│ │ │ │ ├── Toggler.jsx
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ └── TreeItem/
│ │ │ ├── TreeItem.jsx
│ │ │ ├── index.js
│ │ │ └── styles.css
│ │ ├── containers/
│ │ │ ├── Resizer/
│ │ │ │ ├── Resizer.jsx
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ ├── SearchBar/
│ │ │ │ ├── SearchBar.jsx
│ │ │ │ ├── SearchBarResult.jsx
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ ├── TreeList/
│ │ │ │ ├── TreeList.jsx
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ └── app/
│ │ │ ├── App.css
│ │ │ ├── App.jsx
│ │ │ └── WebWorker.js
│ │ ├── contexts/
│ │ │ └── OptionsContext.js
│ │ ├── index.js
│ │ ├── libs/
│ │ │ ├── contentDark.js
│ │ │ ├── file-icons.css
│ │ │ └── gitlab-dark.css
│ │ └── utils/
│ │ ├── backgroundColor.js
│ │ ├── browser.js
│ │ ├── file-icons.js
│ │ ├── searchBarWorker.js
│ │ ├── styling.js
│ │ ├── themeList.js
│ │ ├── throttle.js
│ │ ├── url.js
│ │ └── useEventListener.js
│ └── webpack.config.js
├── event/
│ ├── axios.js
│ ├── src/
│ │ ├── actions/
│ │ │ ├── API/
│ │ │ │ └── index.js
│ │ │ └── UI/
│ │ │ └── index.js
│ │ ├── index.js
│ │ ├── reducers/
│ │ │ ├── API/
│ │ │ │ ├── searchTerms.js
│ │ │ │ └── tree.js
│ │ │ ├── UI/
│ │ │ │ ├── clicked.js
│ │ │ │ ├── opened.js
│ │ │ │ ├── options.js
│ │ │ │ ├── pinned.js
│ │ │ │ └── width.js
│ │ │ └── index.js
│ │ └── types/
│ │ ├── API.js
│ │ └── UI.js
│ └── webpack.config.js
├── gulpfile.babel.js
├── license
├── manifest.json
├── package.json
└── popup/
├── src/
│ ├── index.html
│ └── scripts/
│ ├── components/
│ │ ├── app/
│ │ │ ├── App.jsx
│ │ │ └── styles.css
│ │ └── options/
│ │ ├── index.js
│ │ ├── options.jsx
│ │ └── styles.css
│ └── index.js
└── webpack.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": ["es2015"],
"plugins": ["transform-es2015-destructuring", "transform-object-rest-spread"]
}
================================================
FILE: .gitattributes
================================================
content/src/scripts/libs/gitlab-dark.css binary
content/src/scripts/libs/file-icons.css binary
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: ["https://www.buymeacoffee.com/tavyandy97"]# Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
================================================
FILE: .gitignore
================================================
node_modules
build
.idea
*.DS_Store*
================================================
FILE: README.md
================================================
# 🌳 SpanTree
[](https://github.com/tavyandy97/span-tree)
[](https://chrome.google.com/webstore/detail/spantree-gitlab-tree/gcjikeldobhnaglcoaejmdlmbienoocg)
[](https://chrome.google.com/webstore/detail/spantree-gitlab-tree/gcjikeldobhnaglcoaejmdlmbienoocg)
[](https://addons.mozilla.org/en-GB/firefox/addon/spantree-gitlab-tree/)
[](https://reactjs.org/)
## 📖 About
Browser extension that makes navigating a GitLab repository feel like a breeze by providing a familiar tree structure.<br>
- [Chrome Extension](https://chrome.google.com/webstore/detail/spantree-gitlab-tree/gcjikeldobhnaglcoaejmdlmbienoocg)<br>
- [Firefox Add-on](https://addons.mozilla.org/en-GB/firefox/addon/spantree-gitlab-tree)<br>
## ✨ Stargazers
[](https://github.com/tavyandy97/span-tree/stargazers)
## 💻 Development Setup
Pre-Requisites:
1. Install Node.js (v16.16.0)
2. Install gulp-cli
```
$ npm install -g gulp-cli
```
Steps:
1. Clone the repository to your local system
2. Install all the dependencies
```bash
$ npm install
```
3. Now to start the server which shall compile the extension in real time
```
$ npm start
```
(You'll observe a build folder being formed inside the project folder)
4. Load the chrome extension from the build folder. ( first enable developer mode inside Chrome)
(For reference follow: https://thoughtbot.com/blog/how-to-make-a-chrome-extension)
## 💳 Credits
SpanTree uses the following open-source packages:
- [react](https://github.com/facebook/react)
- [redux](https://github.com/reduxjs/redux)
- [webext-redux](https://github.com/tshaddix/webext-redux) (Now using [a fork](https://github.com/eduardoacskimlinks/webext-redux) - [ref](https://github.com/tshaddix/webext-redux/issues/244))
- [file-icons](https://github.com/file-icons/atom)
- [dark-gitlab](https://gitlab.com/vednoc/dark-gitlab)
- [axios](https://github.com/axios/axios)
- [immer](https://github.com/immerjs/immer)
- [fzy.js](https://github.com/jhawthorn/fzy.js)
================================================
FILE: content/src/scripts/components/Backdrop/Backdrop.jsx
================================================
import React from "react";
import "./styles.css";
function Backdrop({ showSearchbar, setShowSearchbar }) {
return showSearchbar ? (
<div
className="spantree-backdrop"
onClick={() => setShowSearchbar(false)}
></div>
) : null;
}
export default Backdrop;
================================================
FILE: content/src/scripts/components/Backdrop/index.js
================================================
export { default } from "./Backdrop";
================================================
FILE: content/src/scripts/components/Backdrop/styles.css
================================================
.spantree-backdrop {
width: 100%;
height: 100%;
position: fixed;
z-index: 5000;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.3);
}
================================================
FILE: content/src/scripts/components/Loader/Loader.jsx
================================================
import React from "react";
import "./styles.css";
function Loader({ size }) {
const dimInPixel = Number(size.replace(/[^0-9\.]+/g, ""));
return (
<div
style={{
borderWidth: `${(16 * dimInPixel) / 120}px`,
width: size,
height: size,
}}
className="spantree-loader"
></div>
);
}
export default Loader;
================================================
FILE: content/src/scripts/components/Loader/index.js
================================================
export { default } from "./Loader";
================================================
FILE: content/src/scripts/components/Loader/styles.css
================================================
.spantree-loader {
border-color: #f3f3f3;
border-radius: 50%;
border-style: solid;
border-top-color: rgb(237, 153, 44);
-webkit-animation: spantree-loader-spin 2s linear infinite; /* Safari */
animation: spantree-loader-spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spantree-loader-spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spantree-loader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
================================================
FILE: content/src/scripts/components/Pane/Pane.jsx
================================================
import React, { useState, useEffect, useContext } from "react";
import { TabIdentifierClient } from "chrome-tab-identifier";
import SVG from "../SVG";
import TreeList from "../../containers/TreeList/TreeList";
import Resizer from "../../containers/Resizer";
import { OptionsContext } from "../../contexts/OptionsContext";
import { fetchURLDetails } from "../../utils/url";
import { switchTheme } from "../../utils/themeList";
import getHeaderBackgroundColor from "../../utils/backgroundColor";
import useEventListener from "../../utils/useEventListener";
import "./styles.css";
const tabIdClient = new TabIdentifierClient();
function Pane({
toggleOpened,
width,
firstPageLoad,
setFirstPageLoad,
setShowSearchbarTrue,
reloading,
setReloading,
}) {
const { options } = useContext(OptionsContext);
const [tabId, setTabId] = useState();
const [headerStyle, setHeaderStyle] = useState(
getHeaderBackgroundColor(options),
);
useEffect(() => {
tabIdClient.getTabId().then((tab) => {
setTabId(tab);
});
}, []);
useEffect(() => {
if (reloading) {
setReloading(false);
}
}, [reloading]);
useEventListener("popstate", () => {
setReloading(true);
});
useEffect(() => {
setHeaderStyle(getHeaderBackgroundColor(options));
}, [options]);
const URLDetails = fetchURLDetails();
return (
<div className="spantree-tree-pane" style={{ width: width + "px" }}>
<div className="spantree-pane-main">
<div className="spantree-pane-header" style={headerStyle}>
<div className="spantree-spread">
<div className="spantree-pane-details">
<SVG
icon="repo"
height="12"
style={{ verticalAlign: "middle" }}
/>{" "}
{URLDetails.dirFormatted}
</div>
<div className="spantree-pane-icons">
<span
onClick={() => {
switchTheme();
setTimeout(() => {
setHeaderStyle(getHeaderBackgroundColor(options));
}, 100);
}}
className="spantree-close-button"
>
<SVG icon="half" height="9" />
</span>
<span onClick={toggleOpened} className="spantree-close-button">
<SVG icon="close" height="12" />
</span>
</div>
</div>
<div className="spantree-spread">
<div
className="spantree-pane-details"
style={{ width: width - 12 + "px" }}
>
<SVG
icon="branch"
height="12"
style={{ verticalAlign: "middle" }}
/>{" "}
{URLDetails.branchName}
</div>
<span
onClick={setShowSearchbarTrue}
className="spantree-close-button"
>
<SVG icon="search" height="9" />
</span>
</div>
</div>
<div className="spantree-tree-body">
{tabId ? (
<TreeList
firstPageLoad={firstPageLoad}
setFirstPageLoad={setFirstPageLoad}
tabId={tabId}
/>
) : null}
</div>
</div>
<Resizer />
</div>
);
}
export default Pane;
================================================
FILE: content/src/scripts/components/Pane/index.js
================================================
export { default } from "./Pane";
================================================
FILE: content/src/scripts/components/Pane/styles.css
================================================
.spantree-tree-pane {
position: fixed;
display: flex;
box-sizing: border-box;
height: 100%;
right: 0px !important;
top: calc(0px + var(--header-height, 0px)) !important;
bottom: 0px !important;
left: 0px !important;
font-size: 0.8em;
z-index: 1000;
transform: translate3d(0px, 0px, 0px);
transition: transform 0.2s ease 0s;
box-shadow: 2px 0px 8px #00000070;
}
.spantree-pane-main {
height: 100%;
width: 100%;
position: absolute;
}
.spantree-pane-header {
height: var(--top-bar-height, 40px);
background-color: rgb(77, 61, 146);
border-bottom: 1px #404040 solid;
color: white;
padding: 5px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.spantree-close-button {
cursor: pointer;
margin: 0 4px;
}
.spantree-spread {
display: flex;
justify-content: space-between;
}
.spantree-tree-body {
height: 100%;
width: 100%;
}
.spantree-pane-details {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: bold;
}
.spantree-pane-icons {
min-width: 35px;
}
================================================
FILE: content/src/scripts/components/SVG/SVG.jsx
================================================
import React from "react";
import Branch from "./assets/Branch";
import Repo from "./assets/Repo";
import Close from "./assets/Close";
import Half from "./assets/Half";
import Search from "./assets/Search";
function SVG({ icon, height, style }) {
switch (icon) {
case "branch":
return <Branch height={height} style={style} />;
case "repo":
return <Repo height={height} style={style} />;
case "close":
return <Close height={height} style={style} />;
case "half":
return <Half height={height} style={style} />;
case "search":
return <Search height={height} style={style} />;
default:
return "faulty svg";
}
}
export default SVG;
================================================
FILE: content/src/scripts/components/SVG/assets/Branch.jsx
================================================
import React from "react";
function Branch({ height, style }) {
let heightSVG = height ? height : "16";
let widthSVG = height ? `${(10 * height) / 16}` : "10";
return (
<svg height={heightSVG} width={widthSVG} viewBox="0 0 10 16" style={style}>
<path d="M10 5c0-1.11-.89-2-2-2a1.993 1.993 0 00-1 3.72v.3c-.02.52-.23.98-.63 1.38-.4.4-.86.61-1.38.63-.83.02-1.48.16-2 .45V4.72a1.993 1.993 0 00-1-3.72C.88 1 0 1.89 0 3a2 2 0 001 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2 1.11 0 2-.89 2-2 0-.53-.2-1-.53-1.36.09-.06.48-.41.59-.47.25-.11.56-.17.94-.17 1.05-.05 1.95-.45 2.75-1.25S8.95 7.77 9 6.73h-.02C9.59 6.37 10 5.73 10 5zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm0 12.41c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm6-8c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z" />
</svg>
);
}
export default Branch;
================================================
FILE: content/src/scripts/components/SVG/assets/Close.jsx
================================================
import React from "react";
function Close({ height, style }) {
let heightSVG = height ? height : "16";
let widthSVG = height ? `${(3 * height) / 4}` : "12";
return (
<svg width={widthSVG} height={heightSVG} viewBox="0 0 12 12" style={style}>
<path d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z" />
</svg>
);
}
export default Close;
================================================
FILE: content/src/scripts/components/SVG/assets/Half.jsx
================================================
import React from "react";
function Half({ height, style }) {
let heightSVG = height ? height : "9";
let widthSVG = height ? height : "9";
return (
<svg height={heightSVG} width={widthSVG} viewBox="0 0 20 20" style={style}>
<g
id="Page-1"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<g
id="Dribbble-Light-Preview"
transform="translate(-180.000000, -4199.000000)"
fill="#ffffff"
>
<g id="icons" transform="translate(56.000000, 160.000000)">
<path
d="M126,4049 C126,4044.589 129.589,4041 134,4041 L134,4057 C129.589,4057 126,4053.411 126,4049 M134,4039 C128.477,4039 124,4043.477 124,4049 C124,4054.523 128.477,4059 134,4059 C139.523,4059 144,4054.523 144,4049 C144,4043.477 139.523,4039 134,4039"
id="contrast-[#907]"
></path>
</g>
</g>
</g>
</svg>
);
}
export default Half;
================================================
FILE: content/src/scripts/components/SVG/assets/Repo.jsx
================================================
import React from "react";
function Repo({ height, style }) {
let heightSVG = height ? height : "16";
let widthSVG = height ? `${(3 * height) / 4}` : "12";
return (
<svg width={widthSVG} height={heightSVG} viewBox="0 0 12 16" style={style}>
<path d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z" />
</svg>
);
}
export default Repo;
================================================
FILE: content/src/scripts/components/SVG/assets/Search.jsx
================================================
import React from "react";
function Search({ height, style }) {
let heightSVG = height ? height : "9";
let widthSVG = height ? height : "9";
return (
<svg
height={heightSVG}
width={widthSVG}
style={style}
viewBox="0 0 515.558 515.558"
xmlns="http://www.w3.org/2000/svg"
>
<path d="m378.344 332.78c25.37-34.645 40.545-77.2 40.545-123.333 0-115.484-93.961-209.445-209.445-209.445s-209.444 93.961-209.444 209.445 93.961 209.445 209.445 209.445c46.133 0 88.692-15.177 123.337-40.547l137.212 137.212 45.564-45.564c0-.001-137.214-137.213-137.214-137.213zm-168.899 21.667c-79.958 0-145-65.042-145-145s65.042-145 145-145 145 65.042 145 145-65.043 145-145 145z" />
</svg>
);
}
export default Search;
================================================
FILE: content/src/scripts/components/SVG/index.js
================================================
export { default } from "./SVG";
================================================
FILE: content/src/scripts/components/Toggler/Toggler.jsx
================================================
import React from "react";
import "./styles.css";
function Toggle({ pinned, handleClick }) {
return (
<div className="spantree-toggler" onClick={handleClick}>
SpanTree ▼
</div>
);
}
export default Toggle;
================================================
FILE: content/src/scripts/components/Toggler/index.js
================================================
export { default } from "./Toggler";
================================================
FILE: content/src/scripts/components/Toggler/styles.css
================================================
.spantree-toggler {
position: fixed;
padding: 4px 8px;
top: calc(
40% + var(--header-height, 0px) + var(--top-bar-height, 0px) +
var(--system-header-height, 0px) + var(--performance-bar-height, 0px)
);
transform: rotate(-90deg);
transform-origin: top left;
border-radius: 0px 0px 4px 4px;
cursor: pointer;
z-index: 10;
box-shadow: 0px 0px 5px #000000d9;
color: white;
background: rgb(77, 61, 146);
}
================================================
FILE: content/src/scripts/components/TreeItem/TreeItem.jsx
================================================
import React, { useEffect, useState, useContext } from "react";
import { OptionsContext } from "../../contexts/OptionsContext";
import { fetchURLDetails } from "../../utils/url";
import fileIcons from "../../utils/file-icons";
import "./styles.css";
function TreeItem({
width,
name,
isTree,
path,
close,
open,
children,
remainingURL,
rendering,
setRendering,
setClicked,
scrolling,
setScrolling,
}) {
const [opening, setOpening] = useState(false);
const { options } = useContext(OptionsContext);
const getItemURL = () => {
const URLDetails = fetchURLDetails();
return ("compatibility-mode" in options && options["compatibility-mode"]) ?
`${window.location.origin}/${
URLDetails.dirFormatted
}/blob/${URLDetails.branchName}/${path.join("/")}`:
`${window.location.origin}/${
URLDetails.dirFormatted
}/-/blob/${URLDetails.branchName}/${path.join("/")}`;
}
const handleClick = (event) => {
if (isTree) {
event.preventDefault();
if (isTree.isOpen) {
close(path);
} else {
open(path);
}
} else {
setClicked(true);
}
};
const tryTreeItemActiveBeforeReload = () => {
let isItemActive = false;
if (remainingURL.length != 0) {
let activeIconName = remainingURL.split("/")[0];
let urlRemaining = remainingURL.substring(activeIconName.length + 1);
if (decodeURIComponent(activeIconName) === name) {
if (isTree && !isTree.isOpen) {
isTree.isOpen = true;
open(path);
setOpening(true);
}
if (urlRemaining.length === 0) {
isItemActive = true;
setRendering(false);
setClicked(false);
}
} else {
urlRemaining = "";
}
return { urlRemaining, isItemActive };
} else {
return { urlRemaining: "", isItemActive };
}
};
const tryTreeItemActiveAfterReload = () => {
let isItemActive = false;
if (remainingURL.length != 0) {
let activeIconName = remainingURL.split("/")[0];
let urlRemaining = remainingURL.substring(activeIconName.length + 1);
if (decodeURIComponent(activeIconName) === name) {
if (urlRemaining.length === 0) {
isItemActive = true;
}
} else {
urlRemaining = "";
}
return { urlRemaining, isItemActive };
} else {
return { urlRemaining: "", isItemActive };
}
};
let treeItemActive = null;
if (rendering) {
treeItemActive = tryTreeItemActiveBeforeReload();
} else {
treeItemActive = tryTreeItemActiveAfterReload();
}
useEffect(() => {
if (treeItemActive.isItemActive) {
setOpening(true);
}
}, []);
useEffect(() => {
if (opening && scrolling) {
const treeList = document.querySelector(".spantree-tree-list");
const openingItem = document.querySelector(".opening");
document
.querySelector(".spantree-tree-list")
.scrollTo(
openingItem.offsetLeft - 25,
openingItem.offsetTop - treeList.clientHeight / 2,
);
setOpening(false);
if (treeItemActive.isItemActive) {
setScrolling(false);
}
}
}, [opening]);
return (
<li>
<a href={getItemURL()}
className={
opening ? "spantree-tree-element opening" : "spantree-tree-element"
}
onClick={handleClick}
>
<div
className={
treeItemActive.isItemActive
? "spantree-full-width-row spantree-active-row"
: "spantree-full-width-row"
}
></div>
<div className="spantree-tree-icon">
{isTree ? (
isTree.isOpen ? (
<i className="tree-arrow-down-icon spantree-arrow"></i>
) : (
<i className="tree-arrow-right-icon spantree-arrow"></i>
)
) : (
" "
)}
</div>
<div className="spantree-file-icon">
<i className={fileIcons.getClassWithColor(name, isTree)}></i>
</div>
<div className="spantree-item-name">{name}</div>
</a>
{isTree && isTree.isOpen && (
<ul className="spantree-child-list">
{Object.keys(children).map((key) => (
<TreeItem
key={key}
width={width}
name={children[key].name}
isTree={children[key].isTree}
path={children[key].path}
children={children[key].children}
open={open}
close={close}
remainingURL={treeItemActive.urlRemaining}
rendering={rendering}
setRendering={setRendering}
setClicked={setClicked}
scrolling={scrolling}
setScrolling={setScrolling}
/>
))}
</ul>
)}
</li>
);
}
export default TreeItem;
================================================
FILE: content/src/scripts/components/TreeItem/index.js
================================================
export { default } from "./TreeItem";
================================================
FILE: content/src/scripts/components/TreeItem/styles.css
================================================
.spantree-tree-element {
padding: 2px 15px 2px 0px;
display: flex;
height: 24px;
align-items: center;
width: max-content;
text-decoration: none;
color: inherit;
}
.spantree-tree-element:hover {
text-decoration: none;
color: inherit;
}
.spantree-child-list {
list-style-type: none;
padding: 0px 0px 0px 20px;
}
.spantree-tree-icon {
width: 16px;
text-align: center;
margin-right: 2px;
padding-bottom: 2px;
}
.spantree-file-icon {
width: 22px;
text-align: left;
}
.spantree-file-icon i {
font-style: normal;
}
.spantree-item-name {
width: max-content;
}
.spantree-arrow {
font-style: normal;
}
.spantree-full-width-row {
position: absolute;
height: 24px;
width: 100%;
left: 0px;
z-index: 5;
opacity: 25%;
background: transparent;
transition: 0.2s background;
box-sizing: border-box;
}
.spantree-full-width-row:hover {
background: #6464ff;
cursor: pointer;
}
.spantree-full-width-row:active {
background: blue;
}
.spantree-active-row {
border: 3px solid black;
background: darkslategrey;
}
================================================
FILE: content/src/scripts/containers/Resizer/Resizer.jsx
================================================
import React, { useRef } from "react";
import { connect } from "react-redux";
import { setWidth } from "../../../../../event/src/actions/UI";
import { throttle } from "../../utils/throttle";
import "./styles.css";
const Resizer = ({ width, setWidth }) => {
const transitionProps = useRef("");
const mouseDownListener = () => {
document.body.style.userSelect = "none";
const sidebar =
document.querySelector(".nav-sidebar") ||
document.querySelector(".super-sidebar");
transitionProps.current = sidebar.style.transition;
sidebar.style.transition = "none";
document.addEventListener("mousemove", throttledMouseMoveListener);
document.addEventListener("mouseup", mouseUpListener);
};
const mouseUpListener = () => {
document.body.style.userSelect = "auto";
const sidebar =
document.querySelector(".nav-sidebar") ||
document.querySelector(".super-sidebar");
sidebar.style.transition = transitionProps.current;
document.removeEventListener("mousemove", throttledMouseMoveListener);
document.removeEventListener("mouseup", mouseUpListener);
};
const mouseMoveListener = (event) => {
setWidth(event.clientX);
};
const throttledMouseMoveListener = throttle(mouseMoveListener, 16);
return (
<div
className="spantree-resizer"
unselectable="on"
style={{ left: width + "px" }}
onMouseDown={mouseDownListener}
/>
);
};
const mapStateToProps = (state) => {
return {
width: state.width,
};
};
const mapDispatchToProps = { setWidth };
export default connect(mapStateToProps, mapDispatchToProps)(Resizer);
================================================
FILE: content/src/scripts/containers/Resizer/index.js
================================================
export { default } from "./Resizer";
================================================
FILE: content/src/scripts/containers/Resizer/styles.css
================================================
.spantree-resizer {
width: 8px;
position: relative;
opacity: 100%;
}
.spantree-resizer:hover {
cursor: col-resize;
}
================================================
FILE: content/src/scripts/containers/SearchBar/SearchBar.jsx
================================================
import React, { useState, useEffect, useCallback, Fragment } from "react";
import { connect } from "react-redux";
import Backdrop from "../../components/Backdrop";
import SearchBarResult from "./SearchBarResult";
import { getSearchTerms } from "../../../../../event/src/actions/API";
import { fetchURLDetails } from "../../utils/url";
import useEventListener from "../../utils/useEventListener";
import "./styles.css";
function SearchBar({
worker,
showSearchbar,
setShowSearchbar,
searchTerms,
getSearchTerms,
options,
}) {
const [searchResults, setSearchResults] = useState([]);
const [searchFor, setSearchFor] = useState("");
const [activeResult, setActiveResult] = useState(0);
const [resultsLoading, setResultsLoading] = useState(0);
const [debounceTimerId, setDebounceTimerId] = useState(null);
const defaultOptions = { "auto-theme": false, "compatibility-mode": true };
Object.keys(defaultOptions).forEach((key) => {
if (key in options) {
defaultOptions[key] = options.data[key];
}
});
useEffect(() => {
const URLDetails = fetchURLDetails();
getSearchTerms({
repoName: URLDetails.dirFormatted,
branchName: URLDetails.branchName,
compatibilityMode:
"compatibility-mode" in defaultOptions &&
defaultOptions["compatibility-mode"],
});
worker.addEventListener("message", (event) => {
const searchResultsFromWorker = event.data;
setSearchResults(searchResultsFromWorker);
setResultsLoading((resultsLoading) => resultsLoading - 1);
});
}, []);
const handleRedirect = (id, inNewTab) => {
const URLDetails = fetchURLDetails();
let finalURL = null;
if (
"compatibility-mode" in defaultOptions &&
defaultOptions["compatibility-mode"]
) {
finalURL = `${window.location.origin}/${URLDetails.dirFormatted}/blob/${
URLDetails.branchName
}/${encodeURI(searchResults[id])}`;
} else {
finalURL = `${window.location.origin}/${URLDetails.dirFormatted}/-/blob/${
URLDetails.branchName
}/${encodeURI(searchResults[id])}`;
}
if (inNewTab) {
window.open(finalURL, "_blank");
// for overwriting default behavior on Firefox
window.focus();
} else {
window.location.href = finalURL;
}
};
const handleKeyDown = useCallback(
(event) => {
const isActionKey = isMac ? event.metaKey : event.ctrlKey;
if (isActionKey && (event.key === "p" || event.key === "P")) {
event.preventDefault();
event.stopPropagation();
setShowSearchbar(true);
} else if (isActionKey && event.key === "Enter" && showSearchbar) {
handleRedirect(activeResult, true);
} else if (event.key === "Enter" && showSearchbar) {
handleRedirect(activeResult, false);
} else if (event.key === "ArrowUp" && showSearchbar) {
event.preventDefault();
setActiveResult(
(activeResult) =>
(searchResults.length + activeResult - 1) % searchResults.length,
);
} else if (event.key === "ArrowDown" && showSearchbar) {
event.preventDefault();
setActiveResult(
(activeResult) => (activeResult + 1) % searchResults.length,
);
} else if (event.key === "Escape" && showSearchbar) {
setShowSearchbar(false);
}
},
[showSearchbar, activeResult, searchResults],
);
useEventListener("keydown", handleKeyDown);
useEffect(() => {
setResultsLoading((resultsLoading) => resultsLoading + 1);
workerCall();
}, [searchTerms]);
useEffect(() => {
setActiveResult(0);
debouncedWorkerCall();
}, [searchFor.replace(/ /g, "")]);
useEffect(() => {
const activeItem = document.querySelector(".spantree-result-active");
if (activeItem) {
activeItem.scrollIntoView({
behavior: "auto", // Defines the transition animation.
block: "nearest", // Defines vertical alignment.
inline: "start", // Defines horizontal alignment.
});
}
}, [activeResult]);
const isMac = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"].reduce(
(accumulator, currentValue) => {
return (
window.navigator.platform.indexOf(currentValue) !== -1 || accumulator
);
},
false,
);
const workerCall = () => {
worker.postMessage({
searchTerms: searchTerms,
URLDetails: fetchURLDetails(),
query: searchFor.replace(/ /g, ""),
});
};
const debouncedWorkerCall = () => {
if (debounceTimerId) {
clearTimeout(debounceTimerId);
} else {
setResultsLoading((resultsLoading) => resultsLoading + 1);
}
setDebounceTimerId(
setTimeout(() => {
workerCall();
setDebounceTimerId(null);
}, 500),
);
};
if (!showSearchbar) return null;
return (
<Fragment>
<Backdrop
showSearchbar={showSearchbar}
setShowSearchbar={setShowSearchbar}
/>
<div className="spantree-search">
<div className="spantree-searchbar">
<input
type="text"
value={searchFor}
placeholder="🔍 Search in Repository Branch"
onChange={(e) => setSearchFor(e.target.value)}
autoFocus
/>
</div>
<div
className={
resultsLoading <= 0
? "spantree-search-results"
: "spantree-search-results spantree-results-loading"
}
>
{searchResults.map((resultTerm, index) => {
return (
<SearchBarResult
key={index}
index={index}
query={searchFor.replace(/ /g, "")}
term={resultTerm}
activeResult={activeResult}
setActiveResult={setActiveResult}
resultsLoading={resultsLoading}
handleRedirect={handleRedirect}
/>
);
})}
</div>
<div className="spantree-search-help">
<span className="spantree-search-help-item">
<code>
{isMac ? (
<span className="spantree-search-help-item-icon">⌘</span>
) : (
"Ctrl"
)}{" "}
+ P
</code>{" "}
to Search
</span>
<span className="spantree-search-help-item">
<code>{isMac ? "return" : "Enter"}</code> to Open
</span>
<span className="spantree-search-help-item">
<code>
{isMac ? (
<span className="spantree-search-help-item-icon">⌘</span>
) : (
"Ctrl"
)}{" "}
+ {isMac ? "return" : "Enter"}
</code>{" "}
to Open in New Tab
</span>
</div>
</div>
</Fragment>
);
}
const mapStateToProps = (state) => {
return {
searchTerms: state.searchTerms,
options: state.options,
};
};
const mapDispatchToProps = { getSearchTerms };
export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);
================================================
FILE: content/src/scripts/containers/SearchBar/SearchBarResult.jsx
================================================
import React, { Fragment } from "react";
import * as fzy from "fzy.js";
import fileIcons from "../../utils/file-icons";
function getAlternatingArray(resultsLoading, query, term) {
const arr = fzy.positions(query, term);
if (resultsLoading > 0 || query.length === 0) {
return [];
}
let l = 1;
const res = [arr[0]];
for (let i = 1; i <= arr.length - 1; i++) {
let diff = arr[i] - arr[i - 1];
if (diff === 1) {
l++;
} else {
res.push(l);
res.push(diff - 1);
l = 1;
}
}
res.push(l);
return res;
}
function renderHighlightedFileLocation(resultsLoading, query, term) {
const arr = getAlternatingArray(resultsLoading, query, term);
let isFzy = false;
return (
<Fragment>
{arr.map((len, i) => {
let charClass = "";
if (isFzy) {
charClass = "spantree-in-fzy";
}
isFzy = !isFzy;
const currString = term.substr(0, len);
term = term.substr(len);
return currString.length === 0 ? null : (
<span key={i} className={charClass}>
{currString}
</span>
);
})}
{term.length === 0 ? null : (
<span className="spantree-search-term">{term}</span>
)}
</Fragment>
);
}
function SearchBarResult({
index,
term,
query,
activeResult,
setActiveResult,
resultsLoading,
handleRedirect,
}) {
const fileLocation = term.split("/");
const fileName = fileLocation.splice(-1);
const resultClass =
index === activeResult
? "spantree-search-result spantree-result-active"
: "spantree-search-result";
return (
<div
className={resultClass}
onClick={() => {
handleRedirect(index);
}}
onMouseEnter={() => {
setActiveResult(index);
}}
>
<div className="spantree-search-file">
<div className="spantree-file-icon">
<i className={fileIcons.getClassWithColor(fileName, false)}></i>
</div>
<div className="spantree-search-filename">{fileName}</div>
</div>
<div className="spantree-search-filelocation">
{renderHighlightedFileLocation(resultsLoading, query, term)}
</div>
</div>
);
}
export default SearchBarResult;
================================================
FILE: content/src/scripts/containers/SearchBar/index.js
================================================
export { default } from "./SearchBar";
================================================
FILE: content/src/scripts/containers/SearchBar/styles.css
================================================
.spantree-search {
position: fixed;
z-index: 6000;
background-color: white;
min-width: 40%;
border: 1px solid #ccc;
box-shadow: 0px 0px 10px #00000040;
left: 30%;
top: 12%;
box-sizing: border-box;
border-radius: 3px;
transition: all 0.3s ease-out;
}
.spantree-searchbar {
padding: 10px;
}
.spantree-searchbar input {
width: 100%;
padding: 8px;
border: 1px solid #bbbbbb;
box-sizing: border-box;
}
.spantree-searchbar input:focus {
border: 1px solid rgb(77, 61, 146);
outline: none;
box-shadow: 0px 0px 10px rgba(77, 61, 146, 0.25);
}
.spantree-search-results {
overflow-y: scroll;
overflow-x: hidden;
max-height: 35vh;
}
.spantree-results-loading {
color: grey;
}
.spantree-search-result {
overflow-x: auto;
padding: 5px 15px;
}
.spantree-search-result:hover {
cursor: pointer;
}
.spantree-result-active {
background: rgba(211, 211, 211, 0.5);
}
.spantree-search-result::-webkit-scrollbar {
height: 0px;
}
.spantree-search-file {
display: flex;
font-size: 15px;
}
.spantree-search-filename {
font-weight: 600;
padding-left: 2px;
}
.spantree-search-filelocation {
color: #919191;
padding-left: 23px;
}
.spantree-in-fzy {
color: rgb(77, 61, 146);
font-weight: bold;
}
.spantree-search-term {
margin-right: 10px;
}
.spantree-search-help {
padding: 3px 8px 6px 8px;
border-top: 1px solid #dddddd;
font-size: 14px;
}
.spantree-search-help code {
padding: 4px 6px;
}
.spantree-search-help-item {
padding-right: 16px;
}
.spantree-search-help-item-icon {
position: relative;
font-size: 18px;
top: 2px;
}
================================================
FILE: content/src/scripts/containers/TreeList/TreeList.jsx
================================================
import React, { useState, useEffect, useRef, useCallback } from "react";
import { connect } from "react-redux";
import Loader from "../../components/Loader";
import TreeItem from "../../components/TreeItem";
import { fetchURLDetails } from "../../utils/url";
import {
getInitialTree,
openDir,
closeDir,
} from "../../../../../event/src/actions/API";
import { setClicked } from "../../../../../event/src/actions/UI";
import "./styles.css";
const renderTreeItems = (
tree,
width,
setClicked,
close,
open,
rendering,
setRendering,
scrolling,
setScrolling,
) => {
const URLDetails = fetchURLDetails();
return (
<div className="spantree-tree-list">
<ul className="spantree-parent-list">
{Object.keys(tree).map((key) => (
<TreeItem
width={width}
key={key}
name={tree[key].name}
isTree={tree[key].isTree}
path={tree[key].path}
children={tree[key].children}
open={open}
close={close}
remainingURL={URLDetails.baseRemovedURL}
rendering={rendering}
setRendering={setRendering}
setClicked={setClicked}
scrolling={scrolling}
setScrolling={setScrolling}
/>
))}
</ul>
</div>
);
};
function TreeList({
firstPageLoad,
setFirstPageLoad,
tabId,
tree,
width,
clicked,
setClicked,
getInitialTree,
closeDir,
}) {
const [loading, setLoading] = useState(true);
const [rendering, setRendering] = useState(false);
const [scrolling, setScrolling] = useState(false);
const initialMount = useRef(true);
const URLDetails = fetchURLDetails();
const shouldGetTree = () => {
if (!(tree && tree[tabId])) {
return true;
}
if (clicked) {
return false;
}
return firstPageLoad;
};
useEffect(() => {
if (URLDetails.baseRemovedURL.length === 0) {
setRendering(false);
setScrolling(false);
} else {
setRendering(true);
setScrolling(true);
}
if (shouldGetTree()) {
getInitialTree(
URLDetails.projectId ? URLDetails.projectId : URLDetails.dirURLParam,
{
ref: URLDetails.branchNameURL,
},
{
repoName: URLDetails.dirFormatted,
branchName: URLDetails.branchName,
tabId,
},
);
}
setFirstPageLoad(false);
}, []);
useEffect(() => {
if (initialMount.current && shouldGetTree()) {
initialMount.current = false;
} else if (loading && tree && tree[tabId]) {
setLoading(false);
}
}, [tree[tabId]]);
if (loading)
return (
<div className="spantree-loader-wrapper">
<Loader size="64px" />
</div>
);
const closeDirectory = (path) => {
closeDir(path, {
repoName: URLDetails.dirFormatted,
branchName: URLDetails.branchName,
tabId,
});
};
const openDirectory = (path) => {
openDir(
URLDetails.projectId ? URLDetails.projectId : URLDetails.dirURLParam,
path,
{
ref: URLDetails.branchNameURL,
path: encodeURIComponent(path.join("/")),
},
{
repoName: URLDetails.dirFormatted,
branchName: URLDetails.branchName,
path: path,
tabId,
},
);
};
return renderTreeItems(
tree[tabId],
width,
setClicked,
closeDirectory,
openDirectory,
rendering,
setRendering,
scrolling,
setScrolling,
);
}
const mapStateToProps = (state) => {
return {
tree: state.tree,
width: state.width,
clicked: state.clicked,
};
};
const mapDispatchToProps = { getInitialTree, closeDir, setClicked };
export default connect(mapStateToProps, mapDispatchToProps)(TreeList);
================================================
FILE: content/src/scripts/containers/TreeList/index.js
================================================
export { default } from "./TreeList";
================================================
FILE: content/src/scripts/containers/TreeList/styles.css
================================================
.spantree-loader-wrapper {
height: 100%;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.spantree-tree-list {
scroll-behavior: smooth;
overflow-y: auto;
height: calc(100vh - 40px);
}
.spantree-tree-list::-webkit-scrollbar-track {
background-color: #c9c9c9;
}
.spantree-tree-list::-webkit-scrollbar-corner {
background-color: #c9c9c9;
}
.spantree-tree-list::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.spantree-tree-list::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: rgba(0, 0, 0, 0.5);
}
.spantree-parent-list {
font-size: 0.875rem;
padding: 0px 0px 0px 5px;
list-style-type: none;
width: max-content;
min-width: 100%;
position: relative;
}
================================================
FILE: content/src/scripts/containers/app/App.css
================================================
================================================
FILE: content/src/scripts/containers/app/App.jsx
================================================
import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";
import { connect } from "react-redux";
import { TabIdentifierClient } from "chrome-tab-identifier";
import Toggler from "../../components/Toggler";
import Pane from "../../components/Pane";
import SearchBar from "../SearchBar";
import {
toggleOpened,
optionsChanged,
} from "../../../../../event/src/actions/UI";
import {
applyClosedPageStyling,
applyOpenedPageStyling,
} from "../../utils/styling";
import { browserKey } from "../../utils/browser";
import searchBarWorkerJS from "../../utils/searchBarWorker";
import WebWorker from "./WebWorker";
import "./App.css";
import { defaultOptions } from "../../contexts/OptionsContext";
const importFileIconCSS = `${browserKey()}-extension://${chrome.i18n.getMessage(
"@@extension_id",
)}/libs/file-icons.css`;
const tabIdClient = new TabIdentifierClient();
const parentDiv = document.querySelector("body");
class App extends Component {
constructor(props) {
super(props);
this.state = {
firstPageLoad: true,
reloading: true,
showSearchbar: false,
tabId: null,
};
this.toggleOpenedThisTab = () => {
this.props.toggleOpened({
tabId: this.state.tabId,
});
};
this.setFirstPageLoad = (firstPageLoad) => {
this.setState({ firstPageLoad });
};
this.setReloading = (reloading) => {
this.setState({ reloading });
};
this.shouldShowSpanTree = () => {
return (
(document.querySelector(".qa-branches-select") !== null ||
document.querySelector(".ref-selector") !== null ||
document.querySelector("[data-qa-selector='branches_dropdown']")
.children[0] !== null) &&
(document.querySelector(".nav-sidebar") !== null ||
document.querySelector(".super-sidebar") !== null)
);
};
this.setShowSearchbar = (showSearchbar) => {
this.setState({ showSearchbar });
};
this.searchBarWorker = new WebWorker(searchBarWorkerJS);
}
componentDidMount() {
tabIdClient.getTabId().then((tab) => {
this.setState({
tabId: tab,
});
});
if (!this.props.options.version || this.props.options.version === 0) {
const initialState =
JSON.parse(localStorage.getItem("spantree-options")) || defaultOptions;
this.props.optionsChanged(initialState);
}
}
componentDidUpdate(prevProps, prevState) {
const { tabId } = this.state;
if (tabId !== prevState.tabId) {
if (this.props.opened[tabId] && this.shouldShowSpanTree()) {
applyOpenedPageStyling(this.props.width);
} else {
applyClosedPageStyling();
}
}
if (tabId) {
if (this.props.opened[tabId] && this.shouldShowSpanTree()) {
applyOpenedPageStyling(this.props.width);
} else {
applyClosedPageStyling();
}
}
if (prevProps.options !== this.props.options) {
localStorage.setItem(
"spantree-options",
JSON.stringify(this.props.options.data),
);
}
}
render() {
const { tabId } = this.state;
if (!tabId) return null;
if (!this.shouldShowSpanTree()) {
if (this.props.opened[tabId]) this.toggleOpenedThisTab();
applyClosedPageStyling();
return null;
}
return (
<Fragment>
<link rel="stylesheet" type="text/css" href={importFileIconCSS} />
{this.props.opened[tabId]
? ReactDOM.createPortal(
<Pane
toggleOpened={this.toggleOpenedThisTab}
width={this.props.width}
firstPageLoad={this.state.firstPageLoad}
setFirstPageLoad={this.setFirstPageLoad}
reloading={this.state.reloading}
setReloading={this.setReloading}
setShowSearchbarTrue={() => this.setShowSearchbar(true)}
/>,
parentDiv,
)
: ReactDOM.createPortal(
<Toggler
handleClick={this.toggleOpenedThisTab}
pinned={this.props.pinned}
/>,
document.getElementById("rcr-anchor"),
)}
<SearchBar
worker={this.searchBarWorker}
showSearchbar={this.state.showSearchbar}
setShowSearchbar={this.setShowSearchbar}
/>
</Fragment>
);
}
}
const mapStateToProps = (state) => {
return {
opened: state.opened,
pinned: state.pinned,
width: state.width,
options: state.options,
};
};
const mapDispatchToProps = { toggleOpened, optionsChanged };
export default connect(mapStateToProps, mapDispatchToProps)(App);
================================================
FILE: content/src/scripts/containers/app/WebWorker.js
================================================
export default class WebWorker {
constructor(worker) {
const code = worker.toString();
const blob = new Blob(["(" + code + ")()"]);
return new Worker(URL.createObjectURL(blob));
}
}
================================================
FILE: content/src/scripts/contexts/OptionsContext.js
================================================
import React, { createContext } from "react";
import { connect } from "react-redux";
const OptionsContext = createContext({
options: {},
});
export const defaultOptions = {
"auto-theme": false,
"compatibility-mode": true,
};
function OptionsProvider({ children, options }) {
Object.keys(defaultOptions).forEach((key) => {
if (key in options.data) {
defaultOptions[key] = options.data[key];
}
});
return (
<OptionsContext.Provider
value={{
options: defaultOptions,
}}
>
{children}
</OptionsContext.Provider>
);
}
const mapStateToProps = (state) => {
return {
options: state.options,
};
};
const ConnectedOptionsConext = connect(mapStateToProps)(OptionsProvider);
export { ConnectedOptionsConext as OptionsProvider, OptionsContext };
================================================
FILE: content/src/scripts/index.js
================================================
import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { Store } from "@eduardoac-skimlinks/webext-redux";
import App from "./containers/app/App";
import { OptionsProvider } from "./contexts/OptionsContext";
const proxyStore = new Store();
const anchor = document.createElement("div");
anchor.id = "rcr-anchor";
if (document.querySelectorAll('[aria-label="Loading"]').length === 0) {
mount();
} else {
let intervalId = null;
intervalId = setInterval(() => {
if (document.querySelectorAll('[aria-label="Loading"]').length === 0) {
clearInterval(intervalId);
mount();
}
}, 500);
}
const mount = () => {
if (document.querySelector(".layout-page") !== null) {
document
.querySelector(".layout-page")
.insertBefore(
anchor,
document.querySelector(".layout-page").childNodes[0],
);
proxyStore.ready().then(() => {
render(
<Provider store={proxyStore}>
<OptionsProvider>
<App />
</OptionsProvider>
</Provider>,
document.getElementById("rcr-anchor"),
);
});
}
};
export default proxyStore;
================================================
FILE: content/src/scripts/libs/contentDark.js
================================================
// contentDark.js
// As the main content.js is loaded on "document_idle", the dark theme needs to be loaded at the very beginning of
// tab load to prevent a common phenomenon found in Chrome themes known as white flash. So this contentDark.js is
// loaded on "document_start" and adds the darkGitlab.css to the <html> before the page starts loading.
// Note: This file is not processed by webpack but is copied by gulp to the build/libs folder as is.
// themeList.js
const isPresentInThemeList = () => {
const domain = location.origin;
let themeList = JSON.parse(localStorage.getItem("spantree-themelist")) || {};
return domain in themeList && themeList[domain];
};
// browser.js
const isWindowObject = (value) => {
return value != null && typeof value === "object" && "setInterval" in value;
};
const freeSelf = isWindowObject(typeof self == "object" && self) && self;
const navigator = freeSelf && freeSelf.navigator;
const userAgent = ((navigator && navigator.userAgent) || "").toLowerCase();
const vendor = ((navigator && navigator.vendor) || "").toLowerCase();
const browserKey = () => {
if (isChrome()) return "chrome";
if (isFirefox()) return "moz";
return "chrome";
};
const isChrome = () => {
const match = /google inc/.test(vendor)
? userAgent.match(/(?:chrome|crios)\/(\d+)/)
: null;
return match !== null && !isOpera();
};
const isFirefox = () => {
const match = userAgent.match(/(?:firefox|fxios)\/(\d+)/);
return match !== null;
};
const isOpera = () => {
const match = userAgent.match(/(?:^opera.+?version|opr)\/(\d+)/);
return match !== null;
};
function fireContentLoadedEvent() {
// Remove event listener
document.removeEventListener("DOMContentLoaded", fireContentLoadedEvent);
// Insert CSS into Head
const darkGitlab = document.createElement("link");
darkGitlab.id = "spantree-theme";
darkGitlab.disabled = !isPresentInThemeList();
darkGitlab.rel = "stylesheet";
darkGitlab.type = "text/css";
darkGitlab.href = `${browserKey()}-extension://${chrome.i18n.getMessage(
"@@extension_id"
)}/libs/gitlab-dark.css`;
document.querySelector("head").appendChild(darkGitlab);
// Remove CSS from HTML
document.body.onload = () => {
document.querySelector("#spantree-theme-temp").remove();
};
}
// Insert CSS into HTML
if (isPresentInThemeList()) {
const darkGitlabTemp = document.createElement("link");
darkGitlabTemp.id = "spantree-theme-temp";
darkGitlabTemp.disabled = !isPresentInThemeList();
darkGitlabTemp.rel = "stylesheet";
darkGitlabTemp.type = "text/css";
darkGitlabTemp.href = `${browserKey()}-extension://${chrome.i18n.getMessage(
"@@extension_id"
)}/libs/gitlab-dark.css`;
document
.querySelector("html")
.insertBefore(darkGitlabTemp, document.querySelector("html").childNodes[0]);
document.addEventListener("DOMContentLoaded", fireContentLoadedEvent, false);
}
================================================
FILE: content/src/scripts/libs/file-icons.css
================================================
/*
| File Icons
| @link https://github.com/file-icons
| @author Daniel Brooker https://github.com/DanBrooker
*/
/* ----------------------------[ Colors ]---------------------------------- */
/*============================================================================*
PALETTE
Base16 colours from https://github.com/chriskempson/base16
/*============================================================================*/
.light-red:before {
color: #c97071;
}
.medium-red:before {
color: #ac4142;
}
.dark-red:before {
color: #742c2d;
}
.light-green:before {
color: #a6ba7b;
}
.medium-green:before {
color: #90a959;
}
.dark-green:before {
color: #66783e;
}
.light-yellow:before {
color: #fae0bc;
}
.medium-yellow:before {
color: #ee9e2e;
}
.dark-yellow:before {
color: #d88511;
}
.light-blue:before {
color: #6098b0;
}
.medium-blue:before {
color: #6a9fb5;
}
.dark-blue:before {
color: #46788d;
}
.light-maroon:before {
color: #be7953;
}
.medium-maroon:before {
color: #8f5536;
}
.dark-maroon:before {
color: #573421;
}
.light-purple:before {
color: #c7a4c0;
}
.medium-purple:before {
color: #aa759f;
}
.dark-purple:before {
color: #825078;
}
.light-orange:before {
color: #d99762;
}
.medium-orange:before {
color: #d28445;
}
.dark-orange:before {
color: #a35f27;
}
.light-cyan:before {
color: #6bb0a4;
}
.medium-cyan:before {
color: #75b5aa;
}
.dark-cyan:before {
color: #4d9085;
}
.light-pink:before {
color: #ff4ddb;
}
.medium-pink:before {
color: #ff00cc;
}
.dark-pink:before {
color: #b3008f;
}
.theme-colour-check {
background: #ffffff;
}
/* ----------------------------[ Fonts ]---------------------------------- */
@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style: normal;
src: url("chrome-extension://__MSG_@@extension_id__/libs/fonts/fontawesome.woff2")
format("woff2"),
url("moz-extension://__MSG_@@extension_id__/libs/fonts/fontawesome.woff2")
format("woff2");
}
@font-face {
font-family: "Mfizz";
src: url("chrome-extension://__MSG_@@extension_id__/libs/fonts/mfixx.woff2")
format("woff2"),
url("moz-extension://__MSG_@@extension_id__/libs/fonts/mfixx.woff2")
format("woff2");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Devicons";
src: url("chrome-extension://__MSG_@@extension_id__/libs/fonts/devopicons.woff2")
format("woff2"),
url("moz-extension://__MSG_@@extension_id__/libs/fonts/devopicons.woff2")
format("woff2");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "file-icons";
src: url("chrome-extension://__MSG_@@extension_id__/libs/fonts/file-icons.woff2")
format("woff2"),
url("moz-extension://__MSG_@@extension_id__/libs/fonts/file-icons.woff2")
format("woff2");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "octicons";
src: url("chrome-extension://__MSG_@@extension_id__/libs/fonts/octicons.woff2")
format("woff2"),
url("moz-extension://__MSG_@@extension_id__/libs/fonts/octicons.woff2")
format("woff2");
font-weight: normal;
font-style: normal;
}
/* ----------------------------[ Icons ]---------------------------------- */
.icon:before {
font-weight: normal;
font-style: normal;
text-align: center;
width: 16px;
line-height: 1;
position: relative;
display: inline-block;
-webkit-font-smoothing: antialiased;
}
/*============================================================================*
Octicons
https://github.com/github/octicons
/*============================================================================*/
.binary-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f094";
}
.book-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f007";
}
.brew-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f069";
font-size: 15px;
left: 1px;
}
.checklist-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f076";
font-size: 17px;
left: 1px;
}
.code-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f05f";
}
.database-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f096";
}
.gear-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f02f";
}
.git-commit-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f01f";
}
.git-merge-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f023";
}
.github-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f00a";
}
.graph-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f043";
}
.image-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f012";
}
.key-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f049";
}
.link-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f0b0";
}
.markdown-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f0c9";
}
.package-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f0c4";
}
.ruby-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f047";
}
.secret-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f08c";
}
.squirrel-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f0b2";
font-size: 15px;
}
.text-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f011";
}
.zip-icon:before {
font-family: octicons;
font-size: 16px;
top: 1px;
content: "\f013";
}
/*============================================================================*
FontAwesome
http://fortawesome.github.io/Font-Awesome/cheatsheet
/*============================================================================*/
.android-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f17b";
font-size: 16px;
top: 1px;
}
.at-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f1fa";
font-size: 15px;
top: 1px;
}
.audio-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f028";
font-size: 15px;
top: 1px;
}
.bullhorn-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f0a1";
font-size: 16px;
top: 2px;
}
.calc-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f1ec";
font-size: 14px;
}
.coffee-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f0f4";
font-size: 14px;
top: 1px;
}
.css3-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f13c";
top: 0;
}
.circle-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f111";
font-size: 16px;
top: 1px;
}
.earth-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f0ac";
font-size: 15px;
}
.folder-open-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f07c";
font-size: 15px;
}
.folder-closed-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f07b";
font-size: 15px;
}
.gears-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f085";
font-size: 15px;
}
.generic-file-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f15b";
font-size: 15px;
}
.html5-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f13b";
font-size: 15px;
top: 1px;
}
.mobile-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f10b";
font-size: 20px;
top: 2px;
}
.moon-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f186";
font-size: 16px;
top: 1px;
}
.music-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f001";
font-size: 15px;
}
.print-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f02f";
font-size: 15px;
top: 2px;
}
.recycle-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f1b8";
font-size: 15px;
top: 2px;
}
.rss-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f143";
font-size: 16px;
top: 2px;
}
.smarty-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f0eb";
font-size: 15px;
}
.sourcemap-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f279";
font-size: 14px;
}
.sun-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f185";
font-size: 14px;
-webkit-font-smoothing: subpixel-antialiased;
}
.toc-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f03a";
font-size: 15px;
top: 2px;
}
.tree-arrow-right-icon:before {
font-family: FontAwesome;
font-size: 10px;
content: "\f054";
font-size: 12px;
top: 5px;
}
.tree-arrow-down-icon:before {
font-family: FontAwesome;
font-size: 10px;
content: "\f078";
font-size: 12px;
top: 5px;
}
.twig-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f1bb";
font-size: 14px;
}
.pdf-icon:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f1c1";
font-size: 14px;
}
/*============================================================================*
Mfizz
http://mfizz.com/oss/font-mfizz
/*============================================================================*/
.apache-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f102";
top: 3px;
font-size: 15px;
}
.archlinux-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "A";
top: 1px;
font-size: 15px;
}
.c-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f106";
top: 1px;
font-size: 13px;
}
.cpp-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f10b";
top: 1px;
}
.csharp-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f10c";
top: 1px;
}
.debian-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f111";
top: 1px;
}
.elixir-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f113";
top: 1px;
}
.gnome-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f119";
top: 1px;
}
.haskell-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f121";
top: 2px;
font-size: 16px;
}
.java-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f126";
top: 2px;
font-size: 16px;
}
.js-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f129";
top: 1px;
font-size: 14px;
}
.msql-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f136";
top: 2px;
font-size: 15px;
text-shadow: 0 0 0;
}
.objc-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f13e";
top: 2px;
font-size: 16px;
}
.osx-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f141";
top: 1px;
}
.perl-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f142";
top: 1px;
}
.python-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f14c";
top: 1px;
}
.red-hat-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f14e";
top: 2px;
}
.scala-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f154";
top: 1px;
}
.sql-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f10e";
top: 1px;
}
.svg-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f15c";
top: 1px;
}
.tt-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "TT";
}
.x11-icon:before {
font-family: Mfizz;
font-size: 14px;
content: "\f16e";
top: 1px;
font-size: 13px;
}
/*============================================================================*
Devicons
http://vorillaz.github.io/devicons
/*============================================================================*/
.angular-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e653";
}
.appcelerator-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e6ab";
}
.appstore-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e613";
}
.asp-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e67f";
}
.atom-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e664";
-webkit-font-smoothing: subpixel-antialiased;
}
.backbone-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e652";
}
.bootstrap-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e647";
font-size: 15px;
top: 2px;
}
.bower-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e64d";
text-shadow: 0 0 0;
}
.chrome-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e643";
}
.clojure-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e668";
-webkit-font-smoothing: subpixel-antialiased;
}
.compass-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e661";
font-size: 14px;
top: 2px;
}
.dart-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e698";
font-size: 15px;
top: 2px;
}
.dlang-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e6af";
}
.dojo-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e61c";
font-size: 16px;
top: 4px;
transform: scale(1.2);
-webkit-font-smoothing: subpixel-antialiased;
}
.dropbox-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e607";
}
.eclipse-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e69e";
}
.erlang-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e6b1";
}
.extjs-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e68e";
}
.fsharp-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e6a7";
left: 1px;
top: 2px;
}
.git-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e602";
font-size: 15px;
top: 2px;
}
.heroku-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e67b";
}
.jquery-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e650";
font-size: 15px;
top: 2px;
}
.jqueryui-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e654";
font-size: 15px;
top: 2px;
}
.laravel-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e63f";
-webkit-font-smoothing: subpixel-antialiased;
}
.materialize-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e6b6";
transform: scale(1.2);
-webkit-font-smoothing: subpixel-antialiased;
}
.modernizr-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e620";
}
.mootools-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e68f";
text-shadow: 0 0 0;
}
.node-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e618";
}
.pod-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e669";
font-size: 15px;
top: 2px;
}
.prolog-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e6a1";
}
.rails-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e63b";
}
.raphael-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e65f";
font-size: 15px;
}
.requirejs-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e670";
}
.rust-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e6a8";
}
.sass-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e64b";
}
.sencha-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e68c";
}
.snapsvg-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e65e";
}
.swift-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e655";
left: -1px;
}
.travis-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e67e";
font-size: 15px;
top: 2px;
}
.uikit-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e673";
font-size: 15px;
top: 2px;
}
.unity3d-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e621";
}
.vim-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e6c5";
}
.vs-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e60c";
font-size: 14px;
top: 2px;
}
.windows-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e60f";
font-size: 14px;
top: 2px;
}
.yeoman-icon:before {
font-family: Devicons;
font-size: 16px;
top: 3px;
content: "\e67a";
}
/*============================================================================*
Custom file icons
See https://github.com/file-icons/source/#adding-new-icons
/*============================================================================*/
._1c-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\a5ea";
top: 3px;
font-size: 16px;
}
._1c-alt-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea28";
top: 3px;
font-size: 16px;
}
.abap-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e92b";
top: 2px;
}
.access-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9ea";
top: 2px;
}
.ada-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e90b";
top: 3px;
font-size: 17px;
}
.ae-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9f3";
top: 2px;
}
.ahk-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e932";
top: 2px;
}
.ai-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e6b4";
top: 2px;
}
.alloy-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e935";
top: 2px;
}
.alpine-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9ff";
top: 2px;
font-size: 16px;
}
.ampl-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e94e";
top: 3px;
font-size: 16px;
left: 1px;
}
.amx-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e99b";
top: 3px;
font-size: 16px;
}
.ant-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e93e";
top: 4px;
font-size: 18px;
transform: scale(1.1);
}
.antlr-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e92c";
top: 3px;
}
.api-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e92d";
top: 2px;
}
.apl-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\234b";
top: 2px;
}
.apple-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e925";
top: 1px;
}
.appveyor-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e923";
top: 2px;
}
.arc-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e92f";
top: 2px;
}
.arduino-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e930";
top: 3px;
font-size: 16px;
}
.arttext-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\24d0";
top: 2px;
}
.as-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e92e";
top: 1px;
font-size: 14px;
}
.asciidoc-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e918";
top: 1px;
font-size: 14px;
}
.ats-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e934";
top: 2px;
}
.audacity-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9f9";
top: 2px;
}
.augeas-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e931";
top: 2px;
}
.autoit-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e933";
top: 2px;
font-size: 16px;
}
.babel-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e91f";
top: 2px;
left: 1px;
}
.bibtex-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e601";
top: 2px;
font-size: 16px;
-webkit-font-smoothing: subpixel-antialiased;
}
.blender-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9fa";
top: 2px;
}
.bluespec-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e93c";
top: 1px;
font-size: 13px;
left: 1px;
}
.boo-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e939";
top: 2px;
}
.boot-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\f103";
top: 2px;
font-size: 16px;
}
.brain-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e93a";
top: 2px;
}
.brakeman-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9d6";
top: 2px;
}
.bro-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e93b";
top: 3px;
font-size: 16px;
}
.broccoli-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e922";
top: 1px;
font-size: 14px;
}
.byond-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e962";
top: 2px;
}
.cabal-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9c2";
top: 2px;
}
.cake-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9e3";
top: 2px;
}
.cakefile-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e924";
top: 2px;
}
.cakephp-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9d3";
top: 1px;
font-size: 14px;
}
.cc-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9d5";
top: 2px;
font-size: 16px;
}
.ceylon-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e94f";
top: 2px;
}
.cf-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e929";
top: 2px;
}
.chai-icon:before {
font-family: file-icons;
font-size: 15px;
content: "c";
top: 3px;
font-size: 16px;
}
.chapel-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e950";
top: 2px;
}
.chartjs-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea0b";
top: 2px;
}
.chuck-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e943";
top: 2px;
}
.circleci-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea12";
top: 2px;
font-size: 14px;
}
.cirru-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e951";
top: 2px;
text-shadow: 0 0 0;
}
.cl-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e972";
top: 2px;
text-shadow: 0 0 0;
}
.clarion-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e952";
top: 1px;
font-size: 14px;
left: 1px;
}
.clean-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e95b";
top: 2px;
font-size: 16px;
}
.click-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e95c";
top: 2px;
}
.clips-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e940";
top: 3px;
font-size: 18px;
}
.cljs-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\f104";
top: 2px;
}
.cmake-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e93f";
top: 1px;
font-size: 14px;
}
.codecov-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\2602";
top: 2px;
}
.composer-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e683";
top: 3px;
font-size: 17px;
}
.config-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\f07c";
top: 2px;
font-size: 14px;
}
.cordova-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea11";
top: 2px;
}
.coq-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e95f";
top: 2px;
font-size: 16px;
left: 1px;
}
.cp-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e942";
top: 3px;
font-size: 17px;
}
.creole-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e95e";
top: 2px;
}
.crystal-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e902";
top: 2px;
left: 1px;
}
.csound-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9f0";
top: 2px;
}
.csscript-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9e2";
top: 2px;
}
.cucumber-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\f02b";
top: 3px;
}
.cython-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e963";
top: 2px;
}
.d3-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea10";
top: 2px;
}
.darcs-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e964";
top: 2px;
}
.dashboard-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\f07d";
top: 2px;
font-size: 13px;
}
.dbase-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9f1";
top: 2px;
}
.default-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\1f5cc";
top: 2px;
font-size: 14px;
}
.diff-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e960";
top: 2px;
}
.docker-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\f106";
top: 3px;
font-size: 18px;
}
.doxygen-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e928";
top: 1px;
font-size: 13px;
}
.doge-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e946";
top: 2px;
}
.dyalog-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e90c";
top: 1px;
font-size: 14px;
left: 1px;
}
.dylib-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea15";
top: 2px;
}
.e-icon:before {
font-family: file-icons;
font-size: 15px;
content: "E";
top: 1px;
font-size: 14px;
}
.eagle-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e965";
top: 2px;
}
.ec-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9c9";
top: 2px;
}
.ecere-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e966";
top: 3px;
font-size: 16px;
}
.editorconfig-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea1b";
top: 3px;
}
.eiffel-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e967";
top: 2px;
font-size: 16px;
}
.electron-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea27";
top: 3px;
font-size: 16px;
text-shadow: 0 0 0;
}
.elm-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\f102";
top: 2px;
}
.em-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e968";
top: 3px;
font-size: 16px;
}
.ember-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e61b";
top: 2px;
font-size: 14px;
}
.emacs-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e926";
top: 2px;
}
.eq-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea0a";
top: 5px;
}
.eslint-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea0f";
top: 3px;
font-size: 16px;
}
.excel-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9ee";
top: 2px;
}
.fabfile-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e94b";
top: 2px;
font-size: 16px;
}
.factor-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e96a";
top: 3px;
font-size: 18px;
left: -2px;
transform: scale(1.2);
}
.fancy-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e96b";
top: 2px;
font-size: 16px;
}
.fantom-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e96f";
top: 2px;
left: 1px;
}
.fbx-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9fc";
top: 2px;
}
.ff-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\fb00";
top: 3px;
}
.finder-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9e9";
top: 3px;
font-size: 16px;
}
.flow-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e921";
top: 1px;
}
.flux-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e969";
top: 2px;
}
.font-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e90f";
top: 1px;
font-size: 14px;
left: 1px;
}
.fortran-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e90a";
top: 1px;
font-size: 14px;
left: 1px;
}
.freemarker-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e970";
top: 2px;
font-size: 16px;
left: 1px;
}
.frege-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e96e";
top: 2px;
font-size: 16px;
left: 1px;
}
.fuelux-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea09";
top: 3px;
font-size: 16px;
left: 2px;
transform: scale(1.15);
text-shadow: 0 0 0;
}
.gams-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e973";
top: 2px;
left: 1px;
}
.gap-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e971";
top: 3px;
font-size: 16px;
left: 1px;
}
.gdb-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea08";
top: 3px;
font-size: 16px;
transform: scale(1.15);
text-shadow: 0 0 0;
}
.genshi-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e976";
top: 3px;
}
.gentoo-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e96d";
top: 1px;
font-size: 14px;
left: 1px;
}
.gf-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e978";
top: 2px;
}
.glade-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e938";
top: 2px;
}
.glyphs-icon:before {
font-family: file-icons;
font-size: 15px;
content: "G";
top: 3px;
}
.gml-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e975";
top: 3px;
font-size: 16px;
}
.gn-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea25";
top: 2px;
}
.gnu-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e679";
top: 2px;
font-size: 16px;
text-shadow: 0 0 0;
}
.go-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e624";
top: 3px;
}
.godot-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e974";
top: 2px;
}
.golo-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e979";
top: 2px;
}
.gosu-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e97a";
top: 2px;
}
.gradle-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e903";
top: 3px;
font-size: 16px;
left: 1px;
}
.graphql-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e97c";
top: 2px;
}
.graphviz-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e97d";
top: 4px;
font-size: 17px;
left: 1px;
}
.groovy-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e904";
top: 4px;
font-size: 17px;
left: -1px;
}
.grunt-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e611";
top: 1px;
font-size: 14px;
}
.gulp-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e610";
top: 2px;
font-size: 16px;
}
.hack-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9ce";
top: 2px;
}
.haml-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\f15b";
top: 2px;
}
.harbour-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e97b";
top: 2px;
font-size: 16px;
text-shadow: 0 0 0;
}
.hashicorp-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e97e";
top: 2px;
}
.haxe-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e907";
top: 2px;
}
.hy-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e97f";
top: 2px;
}
.idl-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e947";
top: 3px;
font-size: 18px;
}
.idris-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e983";
top: 2px;
font-size: 16px;
-webkit-font-smoothing: subpixel-antialiased;
}
.igorpro-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e980";
top: 2px;
font-size: 16px;
-webkit-font-smoothing: subpixel-antialiased;
}
.indesign-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9f4";
top: 2px;
}
.inform7-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e984";
top: 2px;
font-size: 16px;
text-shadow: 0 0 0;
}
.inno-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e985";
top: 2px;
}
.io-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e981";
top: 1px;
font-size: 13px;
-webkit-font-smoothing: subpixel-antialiased;
}
.ioke-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e982";
top: 2px;
}
.ionic-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\f14b";
top: 2px;
}
.isabelle-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e945";
top: 2px;
font-size: 16px;
}
.j-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e937";
top: 1px;
font-size: 13px;
}
.jade-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e90d";
top: 1px;
font-size: 14px;
}
.jake-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e948";
top: 3px;
font-size: 16px;
}
.jenkins-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e667";
top: 3px;
font-size: 18px;
text-shadow: 0 0 0;
}
.jinja-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e944";
top: 2px;
}
.jsonld-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e958";
top: 3px;
font-size: 17px;
}
.jsx-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9e6";
top: 1px;
font-size: 14px;
}
.julia-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\26ec";
top: 1px;
font-size: 14px;
}
.jupyter-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e987";
top: 3px;
font-size: 16px;
}
.karma-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9cd";
top: 2px;
}
.keynote-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9e5";
top: 2px;
}
.khronos-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9f8";
top: 2px;
}
.kivy-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e901";
top: 2px;
}
.knockout-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\4B";
top: 2px;
}
.kotlin-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e989";
top: 1px;
font-size: 14px;
}
.krl-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e988";
top: 1px;
font-size: 14px;
}
.labview-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e98a";
top: 2px;
font-size: 16px;
}
.lasso-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e98c";
top: 2px;
left: 1px;
}
.leaflet-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea07";
top: 2px;
}
.lean-icon:before {
font-family: file-icons;
font-size: 15px;
content: "L";
top: 1px;
font-size: 13px;
}
.lein-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\f105";
top: 3px;
font-size: 16px;
text-shadow: 0 0 0;
transform: scale(1.15);
}
.lfe-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e94c";
top: 2px;
font-size: 16px;
}
.lightwave-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9fb";
top: 2px;
}
.lisp-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e908";
top: 3px;
font-size: 17px;
}
.llvm-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e91d";
top: 3px;
font-size: 17px;
}
.logtalk-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e98d";
top: 2px;
text-shadow: 0 0 0;
}
.lookml-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e98e";
top: 2px;
font-size: 16px;
text-shadow: 0 0 0;
}
.ls-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e914";
top: 2px;
font-size: 14px;
}
.lsl-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e98b";
top: 1px;
}
.lua-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e91b";
top: 2px;
font-size: 14px;
}
.mako-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e98f";
top: 4px;
font-size: 16px;
}
.mapbox-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e941";
top: 1px;
font-size: 13px;
}
.marko-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e920";
top: 4px;
font-size: 18px;
left: -1px;
transform: scale(1.05);
}
.mathematica-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e990";
top: 2px;
font-size: 16px;
}
.mathjax-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea06";
top: 2px;
}
.matlab-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e991";
top: 2px;
}
.max-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e993";
top: 2px;
}
.maxscript-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e900";
top: 2px;
}
.maya-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9f6";
top: 2px;
font-size: 16px;
}
.manpage-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e936";
top: 3px;
}
.mediawiki-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e954";
top: 2px;
font-size: 16px;
}
.mercury-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e994";
top: 3px;
font-size: 16px;
transform: scale(1.2);
}
.metal-icon:before {
font-family: file-icons;
font-size: 15px;
content: "M";
top: 1px;
left: 1px;
}
.meteor-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e6a5";
top: 1px;
}
.minecraft-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9dc";
top: 2px;
}
.mirah-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e995";
top: 2px;
}
.mocha-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\26fe";
top: 2px;
font-size: 17px;
}
.model-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9e8";
top: 2px;
font-size: 16px;
}
.modula2-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e996";
top: 2px;
}
.monkey-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e997";
top: 3px;
font-size: 18px;
left: -1px;
}
.mruby-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea18";
top: 2px;
}
.mupad-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9ca";
top: 3px;
font-size: 16px;
}
.mustache-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e60f";
top: 2px;
font-size: 16px;
}
.nant-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9e1";
top: 3px;
transform: scale(1.2);
}
.neko-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea05";
top: 2px;
}
.netlogo-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e99c";
top: 2px;
left: 1px;
}
.newrelic-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9d7";
top: 2px;
}
.nginx-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\f146b";
top: 2px;
}
.nib-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\2712";
top: 2px;
}
.nimrod-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e998";
top: 2px;
}
.nit-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e999";
top: 2px;
}
.nix-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e99a";
top: 3px;
font-size: 16px;
}
.nmap-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e94d";
top: 3px;
font-size: 16px;
transform: scale(1.1);
}
.nodemon-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea26";
top: 2px;
}
.normalize-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea04";
top: 3px;
font-size: 16px;
}
.npm-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e91c";
top: 3px;
font-size: 17px;
}
.nsis-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea1e";
top: 3px;
font-size: 16px;
}
.numpy-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e99d";
top: 2px;
font-size: 14px;
}
.nuget-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9d9";
top: 2px;
}
.nunjucks-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e953";
top: 2px;
font-size: 16px;
}
.nvidia-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e95d";
top: 2px;
}
.objj-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e99e";
top: 2px;
}
.ocaml-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e91a";
top: 1px;
font-size: 14px;
}
.onenote-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9eb";
top: 2px;
}
.ooc-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9cb";
top: 2px;
}
.opa-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\2601";
top: 2px;
}
.opencl-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e99f";
top: 2px;
font-size: 16px;
}
.openoffice-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9e4";
top: 2px;
}
.org-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e917";
top: 1px;
font-size: 14px;
left: 1px;
}
.owl-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e957";
top: 2px;
}
.ox-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9a1";
top: 3px;
font-size: 16px;
text-shadow: 0 0 0;
}
.oxygene-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9bf";
top: 2px;
}
.oz-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9be";
top: 2px;
}
.pan-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9bd";
top: 2px;
}
.papyrus-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9bc";
top: 2px;
}
.parrot-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9bb";
top: 3px;
font-size: 16px;
}
.pascal-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e92a";
top: 2px;
}
.patch-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e961";
top: 2px;
}
.pawn-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\265f";
top: 1px;
font-size: 14px;
}
.perl6-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e96c";
top: 2px;
}
.phalcon-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e94a";
top: 2px;
}
.php-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\f147";
top: 1px;
font-size: 14px;
left: 1px;
}
.pickle-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9c4";
top: 2px;
}
.pike-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9b9";
top: 4px;
font-size: 16px;
-webkit-font-smoothing: subpixel-antialiased;
transform: scale(1.15);
}
.pogo-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9b8";
top: 3px;
font-size: 14px;
-webkit-font-smoothing: subpixel-antialiased;
}
.pony-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9b7";
top: 3px;
font-size: 16px;
}
.pointwise-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e977";
top: 2px;
}
.postcss-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e910";
top: 2px;
font-size: 14px;
}
.postscript-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e955";
top: 2px;
left: 1px;
}
.povray-icon:before {
font-family: file-icons;
font-size: 15px;
content: "P";
top: 2px;
left: 1px;
}
.powerbuilder-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea14";
}
.powerpoint-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9ec";
top: 2px;
}
.powershell-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9da";
top: 2px;
font-size: 16px;
}
.premiere-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9f5";
top: 2px;
}
.processing-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9a0";
top: 2px;
}
.progress-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9c0";
top: 2px;
font-size: 16px;
transform: scale(1.2);
}
.propeller-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9b5";
top: 3px;
font-size: 16px;
}
.protractor-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9de";
top: 3px;
}
.psd-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e6b8";
top: 2px;
}
.pug-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea13";
top: 3px;
font-size: 16px;
}
.pug-alt-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9d0";
top: 3px;
font-size: 16px;
}
.puppet-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\f0c3";
top: 2px;
left: 1px;
}
.purebasic-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\01b5";
top: 2px;
}
.purescript-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9b2";
top: 3px;
}
.r-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e905";
top: 3px;
font-size: 17px;
}
.racket-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9b1";
top: 2px;
left: 1px;
}
.raml-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e913";
top: 1px;
font-size: 14px;
}
.rascal-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea24";
top: 2px;
}
.rdoc-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9b0";
top: 2px;
left: 1px;
}
.react-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\f100";
top: 2px;
}
.rebol-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9ae";
top: 1px;
font-size: 13px;
}
.reason-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea1d";
top: 3px;
}
.red-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9ad";
top: 3px;
font-size: 16px;
}
.regex-icon:before {
font-family: file-icons;
font-size: 15px;
content: "*";
top: 1px;
font-size: 12px;
left: 1px;
}
.rexx-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea16";
top: 2px;
font-size: 14px;
left: 1px;
}
.riot-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e919";
top: 4px;
font-size: 18px;
}
.robot-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9ac";
top: 2px;
font-size: 14px;
}
.rollup-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea20";
top: 2px;
}
.rst-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9cc";
top: 3px;
font-size: 16px;
}
.sage-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9ab";
top: 3px;
font-size: 16px;
-webkit-font-smoothing: subpixel-antialiased;
}
.saltstack-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e915";
top: 2px;
font-size: 14px;
}
.sas-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e95a";
top: 2px;
}
.sbt-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9d2";
top: 2px;
font-size: 14px;
}
.scd-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9a2";
top: 2px;
}
.scad-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e911";
top: 2px;
font-size: 14px;
}
.scheme-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\03bb";
top: 2px;
}
.scilab-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9a9";
top: 3px;
font-size: 18px;
left: -1px;
-webkit-font-smoothing: subpixel-antialiased;
}
.scrutinizer-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9d4";
top: 2px;
font-size: 14px;
}
.self-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9a8";
top: 3px;
font-size: 16px;
text-shadow: 0 0 0;
transform: scale(1.2);
}
.sf-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9db";
top: 2px;
}
.shen-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9a7";
top: 2px;
font-size: 16px;
}
.shopify-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9cf";
top: 2px;
}
.shuriken-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\272b";
top: 2px;
font-size: 14px;
}
.sigils-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\1f764";
top: 3px;
font-size: 16px;
text-shadow: 0 0 0;
}
.silverstripe-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e800";
top: 2px;
}
.sketch-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e927";
top: 2px;
}
.slash-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9a6";
top: 2px;
}
.snyk-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea1c";
top: 2px;
font-size: 16px;
}
.sparql-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e959";
top: 2px;
}
.sqf-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9a5";
top: 1px;
text-shadow: 0 0 0;
}
.sqlite-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9dd";
top: 3px;
}
.stan-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9a4";
top: 2px;
}
.stata-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9a3";
top: 2px;
}
.storyist-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9ef";
top: 2px;
font-size: 16px;
}
.strings-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9e0";
top: 2px;
}
.stylelint-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e93d";
top: 2px;
}
.stylus-icon:before {
font-family: file-icons;
font-size: 15px;
content: "s";
top: 2px;
left: 1px;
}
.sublime-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e986";
top: 2px;
}
.svn-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea17";
top: 2px;
}
.sysverilog-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9c3";
top: 2px;
}
.tag-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\f015";
top: 2px;
font-size: 14px;
}
.tcl-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e956";
top: 2px;
font-size: 16px;
}
.terminal-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\f0c8";
top: 2px;
font-size: 14px;
}
.tern-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\1f54a";
top: 4px;
font-size: 16px;
}
.terraform-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e916";
top: 1px;
font-size: 14px;
}
.tex-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e600";
top: 4px;
font-size: 16px;
-webkit-font-smoothing: subpixel-antialiased;
}
.textile-icon:before {
font-family: file-icons;
font-size: 15px;
content: "t";
top: 2px;
}
.textmate-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\2122";
top: 2px;
font-size: 16px;
}
.thor-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9d8";
top: 2px;
}
.ts-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\2a6";
top: 1px;
font-size: 14px;
}
.tsx-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9e7";
top: 1px;
font-size: 14px;
}
.turing-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9b6";
top: 2px;
}
.txl-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9c1";
top: 2px;
}
.typedoc-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9fe";
top: 2px;
}
.typings-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9df";
top: 2px;
}
.uno-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9b3";
top: 2px;
}
.unreal-icon:before {
font-family: file-icons;
font-size: 15px;
content: "u";
top: 2px;
}
.urweb-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9ba";
top: 4px;
font-size: 18px;
left: -1px;
text-shadow: 0 0 0;
}
.webpack-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e91e";
top: 3px;
}
.wercker-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea19";
top: 2px;
}
.word-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9ed";
top: 2px;
}
.v8-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea1f";
top: 3px;
font-size: 16px;
}
.vagrant-icon:before {
font-family: file-icons;
font-size: 15px;
content: "V";
top: 2px;
font-size: 14px;
}
.varnish-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9b4";
top: 1px;
font-size: 14px;
}
.verilog-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e949";
top: 2px;
}
.vhdl-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9aa";
top: 2px;
}
.video-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\f057";
top: 1px;
font-size: 14px;
}
.vue-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e906";
top: 3px;
}
.x10-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\2169";
top: 2px;
}
.xmos-icon:before {
font-family: file-icons;
font-size: 15px;
content: "X";
top: 1px;
font-size: 14px;
}
.xojo-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9af";
top: 2px;
}
.xpages-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9c5";
top: 2px;
}
.xtend-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9c6";
top: 2px;
}
.yang-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\262f";
top: 2px;
}
.yarn-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea1a";
top: 2px;
font-size: 16px;
}
.yui-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\ea00";
top: 2px;
}
.zbrush-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9f2";
top: 2px;
font-size: 16px;
}
.zephir-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9c7";
top: 2px;
-webkit-font-smoothing: subpixel-antialiased;
}
.zimpl-icon:before {
font-family: file-icons;
font-size: 15px;
content: "\e9c8";
top: 2px;
font-size: 16px;
left: 1px;
}
================================================
FILE: content/src/scripts/libs/gitlab-dark.css
================================================
/* ==UserStyle==
@name Dark-GitLab Lite
@namespace gitlab.com/vednoc/dark-gitlab
@description Dark and light theme for GitLab and self-hosted GitLab instances.
@author vednoc <vednoc@pm.me> (https://gitlab.com/vednoc)
@homepageURL https://gitlab.com/vednoc/dark-gitlab
@supportURL https://gitlab.com/vednoc/dark-gitlab/issues
@updateURL https://gitlab.com/vednoc/dark-gitlab/raw/master/gitlab.user.css
==/UserStyle== */
/****************************** GITLAB-DARK-START ******************************/
:root {
--note: "Dark-GitLab v1.6.3";
--bshadow: 0 2px 4px var(--shadow);
--t: transparent !important;
--avatar: 25%;
--ui-font: "font_name", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", var(--emoji-font),
sans-serif;
--mono-font: "font_name", "Menlo", "DejaVu Sans Mono", "Liberation Mono",
"Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console",
monospace;
--emoji-font: "font_name", "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
--white: #fff;
--bb: #202020;
--dark: #181818;
--darken: #262626;
--darker: #404040;
--light: #e6e6e6;
--lighter: #9b9b9b;
--accent: #4f8cc9;
--shadow: rgba(0, 0, 0, 0.314);
--yellow: #fc3;
--orange: #fe9600;
--red: #f44;
--magenta: #8368aa;
--violet: #6e5494;
--blue: #4f8cc9;
--cyan: #4d5eff;
--green: #083;
--red-darken: #4e3030;
--red-darker: #3b2c2c;
overflow-x: hidden;
}
@supports (-moz-user-select: none) {
:root {
--svg-status-bg: var(--dark) !important;
}
}
body {
font-family: var(--ui-font) !important;
}
body,
body.navless {
color: var(--light) !important;
background-color: var(--dark) !important;
}
body::before {
content: "";
z-index: -1;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: var(--bb) !important;
}
body a,
body a:hover {
color: var(--accent);
}
body hr {
border-color: var(--darker);
}
body h1,
body .h1,
body h2,
body .h2,
body h3,
body .h3,
body h4,
body .h4,
body h5,
body .h5,
body h6,
body .h6 {
color: var(--light);
}
body time {
color: var(--lighter);
}
body :not(pre) > code {
color: var(--light);
background-color: var(--darken);
box-shadow: inset 0 0 0 1px var(--darker);
}
body pre {
color: var(--light);
border-color: var(--darker);
background-color: var(--darken);
}
body pre[class*="description"] {
border-left-width: 4px;
font-size: 0.875rem;
color: var(--lighter) !important;
border-color: var(--darker) !important;
}
body > pre:not([class]) {
background-color: var(--t) !important;
}
body kbd {
border-radius: 4px;
color: var(--light) !important;
background-color: var(--darken) !important;
box-shadow: inset 0 0 0 1px var(--darker);
}
body .gl-link,
body .gl-link:hover {
color: var(--accent);
}
body .author-link,
.branch-commit .commit-sha {
color: var(--accent);
}
body pre,
body code,
body kbd,
body samp,
body .monospace,
body .ref-name,
body .commit-sha,
body .pipeline-number,
body .label-branch,
body table.code,
body [class*="git-commit"] {
font-family: var(--mono-font) !important;
}
body .container {
border-color: var(--darker) !important;
}
body .danger-title,
body .gl-field-error,
body .invalid-feedback {
color: var(--red) !important;
}
body [class*="price-per-"] {
color: var(--blue) !important;
}
body .warning-title {
color: var(--orange) !important;
}
body .valid-feedback {
color: var(--green) !important;
}
body .account-well {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
body [class*="two-factor-auth"] svg {
background-color: var(--white) !important;
box-shadow: 0 0 0 4px var(--white);
}
body .progress {
background-color: var(--darker) !important;
}
body .progress-bar {
color: var(--light) !important;
border-radius: 4px;
}
body .progress-bar.bg-primary {
background-color: var(--accent) !important;
}
body .progress.repository-languages-bar {
background-color: var(--t) !important;
}
body .progress.repository-languages-bar [style*="#375eab"] {
background-color: #00add8 !important;
}
body .progress.repository-languages-bar [style*="#776791"] {
background-color: #000100 !important;
}
body .text-info:not(#z) {
color: var(--blue) !important;
}
body .text-info:not(#z) > svg {
fill: var(--blue) !important;
}
body .text-danger:not(#z) {
color: var(--red) !important;
}
body .text-danger:not(#z) > svg {
fill: var(--red) !important;
}
body .text-success:not(#z) {
color: var(--green) !important;
}
body .text-success:not(#z) > svg {
fill: var(--green) !important;
}
body .text-warning:not(#z) {
color: var(--orange) !important;
}
body .text-warning:not(#z) > svg {
fill: var(--orange) !important;
}
body .text-plain,
.light {
color: var(--light) !important;
}
body .text-secondary,
body .text-muted,
body .text-gl-muted,
body .text-tertiary {
color: var(--lighter) !important;
}
.cgray,
.description-block,
.help-block {
color: var(--lighter) !important;
}
[class*="gl-text-gray-"] {
color: var(--lighter) !important;
}
body .bg-light {
background-color: var(--darker) !important;
}
body .bg-danger {
background-color: var(--red) !important;
}
body .bg-secondary {
background-color: var(--darken) !important;
}
body .bg-success {
background-color: var(--green) !important;
}
body .bg-white,
body .bg-gray-light {
background-color: var(--dark) !important;
}
body .border-bottom,
body .bordered-box {
border-color: var(--darker) !important;
}
body .bordered-list > li,
body .unstyled-list > li {
border-color: var(--darker) !important;
}
html {
scrollbar-color: rgba(136, 136, 136, 0.188) rgba(136, 136, 136, 0.082);
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: rgba(136, 136, 136, 0.082);
}
::-webkit-scrollbar-thumb {
background: rgba(136, 136, 136, 0.188);
}
body ::placeholder {
color: var(--lighter) !important;
}
body ::-webkit-input-placeholder {
color: var(--lighter) !important;
}
body .page-wrap {
background-color: var(--t) !important;
}
body .page-wrap .brand-holder p {
color: var(--lighter) !important;
}
body .page-wrap hr.footer-fixed {
padding-top: 24px;
margin-bottom: 0;
background-color: var(--darken) !important;
}
body .page-wrap hr.footer-fixed + .footer-container {
background-color: var(--t) !important;
}
body .page-wrap .login-box,
body .page-wrap .signup-box,
body .page-wrap .omniauth-container {
border-radius: 4px;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
box-shadow: inset 0 0 0 1px var(--darker) !important;
}
body .page-wrap .login-box .omniauth-btn,
body .page-wrap .signup-box .omniauth-btn,
body .page-wrap .omniauth-container .omniauth-btn {
background-color: var(--dark) !important;
}
body .page-wrap .login-box .omniauth-divider::before,
body .page-wrap .signup-box .omniauth-divider::before,
body .page-wrap .omniauth-container .omniauth-divider::before,
body .page-wrap .login-box .omniauth-divider::after,
body .page-wrap .signup-box .omniauth-divider::after,
body .page-wrap .omniauth-container .omniauth-divider::after {
border-color: var(--darker) !important;
}
body .page-wrap .login-box input.form-control,
body .page-wrap .signup-box input.form-control,
body .page-wrap .omniauth-container input.form-control {
background-color: var(--dark) !important;
}
body .page-wrap .login-box .btn-success,
body .page-wrap .signup-box .btn-success,
body .page-wrap .omniauth-container .btn-success,
body .page-wrap .login-box .btn-register,
body .page-wrap .signup-box .btn-register,
body .page-wrap .omniauth-container .btn-register {
color: var(--white) !important;
border-color: var(--green) !important;
background-color: var(--green) !important;
}
body .page-wrap .new-session-tabs {
border: 1px solid var(--darker) !important;
border-bottom: none !important;
box-shadow: none !important;
background-color: var(--dark) !important;
}
body .page-wrap .new-session-tabs li:not(.active),
body .page-wrap .new-session-tabs li:not(.active):hover a:not(.active) {
border-color: var(--darker) !important;
background-color: var(--t) !important;
}
body .page-wrap .new-session-tabs li a.active {
border-radius: 0;
border-color: var(--t) !important;
background-color: var(--darken) !important;
box-shadow: 0 1px var(--darken);
}
body .page-wrap .new-session-tabs + .tab-content > div {
border-radius: 0 0 4px 4px !important;
}
.fa {
color: var(--lighter) !important;
}
.fa.fa-triangle,
.fa.merge-icon {
color: var(--orange) !important;
}
.fa.fa-bars:not(#z) {
color: var(--light) !important;
}
.fa.checkmark {
color: var(--green) !important;
}
.fa.fa-certificate {
color: var(--accent) !important;
}
.fa[class*="paused"] {
color: var(--red) !important;
}
.fa[class*="online"] {
color: var(--green) !important;
}
svg.s16,
svg.s24,
svg.icon {
fill: var(--lighter) !important;
}
svg[class][data-testid*="status_"] {
fill: currentColor !important;
}
.deleted-icon > svg {
fill: var(--orange) !important;
}
.closed-icon svg {
fill: var(--red) !important;
}
.created-icon svg {
fill: var(--cyan) !important;
}
.opened-icon svg {
fill: var(--green) !important;
}
.accepted-icon svg {
fill: var(--cyan) !important;
}
.deleted-icon svg {
fill: var(--yellow) !important;
}
.imported-icon svg {
fill: var(--violet) !important;
}
.commented-on-icon svg {
fill: var(--blue) !important;
}
svg[id*="addition-solid"] {
fill: var(--green) !important;
}
.commit-icon svg {
fill: var(--lighter) !important;
}
svg.ic-eye-slash {
fill: var(--orange) !important;
}
svg.text-success {
fill: var(--green) !important;
}
svg.text-danger {
fill: var(--red) !important;
}
svg.ic-file-addition,
svg.ic-file-addition-solid {
fill: var(--green) !important;
}
svg.ic-file-modified,
svg.ic-file-modified-solid {
fill: var(--blue) !important;
}
svg.ic-file-deletion,
svg.ic-file-deletion-solid {
fill: var(--red) !important;
}
[id*="status_"] [fill="#FFF"] {
fill: var(--darken) !important;
}
svg.issue-token-state-icon-open {
fill: var(--green) !important;
}
svg.issue-token-state-icon-closed {
fill: var(--blue) !important;
}
svg.merge-request-status.open {
color: var(--green) !important;
fill: var(--green) !important;
}
svg.merge-request-status.closed {
color: var(--red) !important;
fill: var(--red) !important;
}
.ci-status {
color: var(--light) !important;
border-color: var(--darker);
background-color: var(--dark) !important;
}
.ci-status.ci-success {
color: var(--green) !important;
border-color: var(--green) !important;
}
.ci-status.ci-info,
.ci-status.ci-running {
color: var(--blue) !important;
border-color: var(--blue) !important;
}
.ci-status.ci-failed {
color: var(--red) !important;
border-color: var(--red) !important;
}
.ci-status.ci-pending,
.ci-status.ci-waiting-for-resource,
.ci-status.ci-failed-with-warnings,
.ci-status.ci-success-with-warnings {
color: var(--orange) !important;
border-color: var(--orange) !important;
}
.ci-status.ci-created,
.ci-status.ci-skipped {
color: var(--light) !important;
border-color: var(--lighter) !important;
}
.ci-status.ci-canceled,
.ci-status.ci-disabled,
.ci-status.ci-scheduled,
.ci-status.ci-manual {
color: var(--lighter) !important;
border-color: var(--lighter) !important;
}
.ci-status-icon-success[class*="dropdown"] {
border-color: var(--green) !important;
background-color: var(--darken) !important;
}
.ci-status-icon-success:not(#z) svg,
.ci-status-icon-success[data-toggle] svg {
fill: var(--green) !important;
}
.ci-status-icon-success svg {
border-color: var(--green) !important;
}
.ci-status-icon-running[class*="dropdown"],
.ci-status-icon-preparing[class*="dropdown"] {
border-color: var(--blue) !important;
background-color: var(--darken) !important;
}
.ci-status-icon-running:not(#z) svg,
.ci-status-icon-preparing:not(#z) svg,
.ci-status-icon-running[data-toggle] svg,
.ci-status-icon-preparing[data-toggle] svg {
fill: var(--blue) !important;
}
.ci-status-icon-running svg,
.ci-status-icon-preparing svg {
border-color: var(--blue) !important;
}
.ci-status-icon-failed[class*="dropdown"] {
border-color: var(--red) !important;
background-color: var(--darken) !important;
}
.ci-status-icon-failed:not(#z) svg,
.ci-status-icon-failed[data-toggle] svg {
fill: var(--red) !important;
}
.ci-status-icon-failed svg {
border-color: var(--red) !important;
}
.ci-status-icon-pending[class*="dropdown"],
.ci-status-icon-waiting-for-resource[class*="dropdown"],
.ci-status-icon-failed-with-warnings[class*="dropdown"],
.ci-status-icon-success-with-warnings[class*="dropdown"] {
border-color: var(--orange) !important;
background-color: var(--darken) !important;
}
.ci-status-icon-pending:not(#z) svg,
.ci-status-icon-waiting-for-resource:not(#z) svg,
.ci-status-icon-failed-with-warnings:not(#z) svg,
.ci-status-icon-success-with-warnings:not(#z) svg,
.ci-status-icon-pending[data-toggle] svg,
.ci-status-icon-waiting-for-resource[data-toggle] svg,
.ci-status-icon-failed-with-warnings[data-toggle] svg,
.ci-status-icon-success-with-warnings[data-toggle] svg {
fill: var(--orange) !important;
}
.ci-status-icon-pending svg,
.ci-status-icon-waiting-for-resource svg,
.ci-status-icon-failed-with-warnings svg,
.ci-status-icon-success-with-warnings svg {
border-color: var(--orange) !important;
}
.ci-status-icon-created[class*="dropdown"],
.ci-status-icon-skipped[class*="dropdown"] {
border-color: var(--lighter) !important;
background-color: var(--darken) !important;
}
.ci-status-icon-created:not(#z) svg,
.ci-status-icon-skipped:not(#z) svg,
.ci-status-icon-created[data-toggle] svg,
.ci-status-icon-skipped[data-toggle] svg {
fill: var(--light) !important;
}
.ci-status-icon-created svg,
.ci-status-icon-skipped svg {
border-color: var(--light) !important;
}
.ci-status-icon-manual[class*="dropdown"],
.ci-status-icon-canceled[class*="dropdown"],
.ci-status-icon-disabled[class*="dropdown"],
.ci-status-icon-scheduled[class*="dropdown"],
.ci-status-icon-not-found[class*="dropdown"] {
border-color: var(--lighter) !important;
background-color: var(--darken) !important;
}
.ci-status-icon-manual:not(#z) svg,
.ci-status-icon-canceled:not(#z) svg,
.ci-status-icon-disabled:not(#z) svg,
.ci-status-icon-scheduled:not(#z) svg,
.ci-status-icon-not-found:not(#z) svg,
.ci-status-icon-manual[data-toggle] svg,
.ci-status-icon-canceled[data-toggle] svg,
.ci-status-icon-disabled[data-toggle] svg,
.ci-status-icon-scheduled[data-toggle] svg,
.ci-status-icon-not-found[data-toggle] svg {
fill: var(--lighter) !important;
}
.ci-status-icon-manual svg,
.ci-status-icon-canceled svg,
.ci-status-icon-disabled svg,
.ci-status-icon-scheduled svg,
.ci-status-icon-not-found svg {
border-color: var(--lighter) !important;
}
@supports not (-moz-user-select: none) {
body .created-icon,
body .opened-icon,
body .ic-upload,
body .gl-icon[data-testid*="status_"],
body [class*="ci-status"] svg {
filter: invert(0.85) hue-rotate(180deg) saturate(100%);
}
body :not(#z) .ci-status-icon-created svg,
body :not(#z) .ci-status-icon-skipped svg {
fill: #333 !important;
}
}
body .bs-callout {
border-radius: 3px;
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
body .bs-callout a {
color: var(--accent) !important;
}
body .bs-callout strong {
color: inherit !important;
}
body .bs-callout-warning {
border-color: var(--orange) !important;
background-color: var(--darken) !important;
}
body .bs-callout-success {
border-color: var(--green) !important;
background-color: var(--darken) !important;
}
body .bs-callout-danger {
border-color: var(--red) !important;
background-color: var(--darken) !important;
}
body .bs-callout-info {
border-color: var(--blue) !important;
background-color: var(--darken) !important;
}
body .bs-callout .btn-default,
body .bs-callout code:not([class]) {
background-color: var(--dark) !important;
}
body .bs-callout.help-callout,
body .bs-callout.shared-runners-description {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
body .bs-callout.help-callout code,
body .bs-callout.shared-runners-description code,
body .bs-callout.help-callout .btn-default,
body .bs-callout.shared-runners-description .btn-default {
background-color: var(--dark) !important;
}
.user-callout.promotion-callout {
background-color: var(--darken) !important;
}
.user-callout.promotion-callout .bordered-box {
background-color: var(--darken) !important;
}
.user-callout.promotion-callout.center {
padding-bottom: 10px;
border: 1px solid var(--darker);
border-radius: 4px;
}
.user-callout.promotion-callout.js-gold-trial-callout > div {
margin: 0 -16px;
}
body .bs-callout.gcp-signup-offer {
color: var(--light) !important;
border-color: var(--blue) !important;
}
body .border-section {
border-color: var(--darker) !important;
}
body .scrolling-tabs-container .fade-right {
background: linear-gradient(to left, var(--darken) 45%, var(--t));
}
body .scrolling-tabs-container .fade-left {
background: linear-gradient(to right, var(--darken) 45%, var(--t));
}
body .toggle-mobile-nav + .breadcrumbs-links {
border-color: var(--darker) !important;
}
.fork-thumbnail {
background-color: var(--dark) !important;
}
.fork-thumbnail:hover:not(.disabled),
.fork-thumbnail.forked {
background-color: var(--darken) !important;
}
body .issue-sticky-header {
top: 50px !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
body .preview.ui-dark,
body .preview.gl-dark {
border-color: var(--darker) !important;
}
input:hover {
box-shadow: none !important;
}
input[type="radio"],
input[type="checkbox"],
input[type="radio"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:hover:active,
input[type="checkbox"]:hover:active,
input[type="radio"]:disabled,
input[type="checkbox"]:disabled,
input[type="radio"]:hover:active:disabled,
input[type="checkbox"]:hover:active:disabled {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
cursor: pointer !important;
height: 1rem !important;
width: 1rem !important;
border: 1px solid var(--darker) !important;
background-size: cover !important;
color: var(--light) !important;
background-color: var(--darken) !important;
}
input[type="radio"]:checked {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="128" fill="white"/></svg>') !important;
border-radius: 100% !important;
}
input[type="radio"]:checked:checked {
border-color: var(--accent) !important;
background-color: var(--accent) !important;
}
input[type="checkbox"]:checked {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M99 213l-1 89 104 102 205-201v-91L203 315 99 213z"/></svg>') !important;
border-color: var(--accent) !important;
background-color: var(--accent) !important;
}
input[type="checkbox"]:indeterminate {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><rect x="128" y="192" width="256" height="96" fill="white"/></svg>') !important;
border-color: var(--red) !important;
background-color: var(--red) !important;
}
[aria-sort="ascending"] {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="101" height="101" view-box="0 0 101 101" preserveAspectRatio="none"><path fill="\%23bf692b" d="M51 1l25 23 24 22H1l25-22z"/><path fill="gray" opacity=".6" d="M51 101l25-23 24-22H1l25 22z"/></svg>') !important;
}
[aria-sort="descending"] {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="101" height="101" view-box="0 0 101 101" preserveAspectRatio="none"><path fill="gray" opacity=".6" d="M51 1l25 23 24 22H1l25-22z"/><path fill="\%23bf692b" d="M51 101l25-23 24-22H1l25 22z"/></svg>') !important;
}
.with-performance-bar .production {
background-color: var(--dark) !important;
box-shadow: inset 0 -1px var(--darker) !important;
}
.with-performance-bar .backtrace-row {
border-radius: 4px;
}
.with-performance-bar select {
border: 1px solid var(--darker) !important;
color: var(--light) !important;
background-color: var(--darken) !important;
}
.with-performance-bar .layout-page,
.with-performance-bar .content-wrapper {
margin-top: 85px !important;
}
.navbar {
min-height: 50px;
}
.navbar-gitlab,
.navbar.navbar-empty {
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
.navbar .title > a {
margin: 4px 2px 4px -8px !important;
}
.navbar .title > a[href="/"]:hover,
.navbar .title > a[href="/"]:focus {
background-color: var(--darker) !important;
}
.navbar .title .logo-text svg {
fill: var(--light) !important;
}
.navbar .canary-badge > .badge {
color: var(--white) !important;
border-color: var(--green) !important;
background-color: var(--green) !important;
}
.navbar-sub-nav,
.navbar-nav {
color: var(--lighter) !important;
}
.navbar-sub-nav > li > button,
.navbar-nav > li > button,
.navbar-sub-nav > li > a,
.navbar-nav > li > a {
transition: 0.2s ease;
}
.navbar-sub-nav > li > button[data-toggle],
.navbar-nav > li > button[data-toggle],
.navbar-sub-nav > li > a[data-toggle],
.navbar-nav > li > a[data-toggle] {
color: var(--lighter) !important;
}
.navbar-sub-nav > li > button:hover:not([aria-expanded="true"]),
.navbar-nav > li > button:hover:not([aria-expanded="true"]),
.navbar-sub-nav > li > a:hover:not([aria-expanded="true"]),
.navbar-nav > li > a:hover:not([aria-expanded="true"]) {
color: var(--light) !important;
background-color: var(--darker) !important;
}
.navbar-sub-nav > li.active > button,
.navbar-nav > li.active > button,
.navbar-sub-nav > li.active:hover > button,
.navbar-nav > li.active:hover > button,
.navbar-sub-nav > li.show > button,
.navbar-nav > li.show > button,
.navbar-sub-nav > li.active > a,
.navbar-nav > li.active > a,
.navbar-sub-nav > li.active:hover > a,
.navbar-nav > li.active:hover > a,
.navbar-sub-nav > li.show > a,
.navbar-nav > li.show > a {
color: var(--light) !important;
background-color: var(--dark) !important;
}
.navbar-sub-nav > li .caret-down,
.navbar-nav > li .caret-down {
fill: var(--lighter) !important;
}
.navbar-sub-nav [data-toggle="dropdown"]::before,
.navbar-nav [data-toggle="dropdown"]::before,
.navbar-sub-nav button.menu-item::before,
.navbar-nav button.menu-item::before {
content: unset !important;
}
.navbar .header-help li:first-child > a {
margin-top: 0.25rem;
}
.navbar .header-help li:first-child::before {
content: "🌚 " var(--note);
display: block;
padding: 4px 12px 6px;
border-bottom: 1px solid var(--darker);
color: var(--light);
}
.navbar .header-user-avatar {
border: none !important;
color: var(--lighter) !important;
background-color: var(--t) !important;
border-radius: var(--avatar);
}
.navbar .btn-sign-in,
.navbar .btn-sign-in:hover {
color: var(--lighter) !important;
background-color: var(--dark) !important;
}
.nav-sidebar {
top: 50px;
}
.layout-page,
.content-wrapper {
margin-top: 50px;
}
.navbar .show > .dropdown-menu {
margin-top: 8px !important;
}
.navbar .search-input-container .dropdown-menu {
margin-top: 14px !important;
}
.gl-accessibility:focus {
color: var(--light) !important;
background-color: var(--darker) !important;
}
.navbar-toggler {
border-left-color: var(--darker) !important;
}
.navbar-toggler svg {
fill: var(--lighter) !important;
}
.navbar .search-form > form {
box-shadow: none !important;
}
.navbar .search-form:hover > form,
.navbar .search-form.search-active > form {
border-color: var(--blue) !important;
}
.navbar-gitlab {
box-shadow: none !important;
}
.navbar svg.s16[data-testid="angle-down-icon"] {
width: 11px;
}
table:not(.code):not(#z) {
border-spacing: 0;
border-collapse: unset;
border-radius: 4px;
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
table:not(.code):not(#z):not(.b-table-stacked) {
display: table;
}
@media (max-width: 0) {
table:not(.code):not(#z).b-table-stacked-xs {
display: block;
}
}
@media (max-width: 576px) {
table:not(.code):not(#z).b-table-stacked-sm {
display: block;
}
}
@media (max-width: 768px) {
table:not(.code):not(#z).b-table-stacked-md {
display: block;
}
}
@media (max-width: 992px) {
table:not(.code):not(#z).b-table-stacked-lg {
display: block;
}
}
@media (max-width: 1200px) {
table:not(.code):not(#z).b-table-stacked-xl {
display: block;
}
}
@media (max-width: 991.98px) {
table:not(.code):not(#z)[class*="table-stacked"] {
border-color: var(--t) !important;
background-color: var(--t) !important;
}
table:not(.code):not(#z)[class*="table-stacked"] tr > td {
border-top: none !important;
border-bottom: 1px solid var(--darker) !important;
}
table:not(.code):not(#z)[class*="table-stacked"] td {
background-color: var(--dark) !important;
border-left: 1px solid var(--darker) !important;
}
table:not(.code):not(#z)[class*="table-stacked"] td:first-child {
border-radius: 4px 4px 0 0 !important;
border-top: 1px solid var(--darker) !important;
}
table:not(.code):not(#z)[class*="table-stacked"] td:last-child {
border-radius: 0 0 4px 4px !important;
}
table:not(.code):not(#z)[class*="table-stacked"] td:hover {
background-color: var(--bb) !important;
}
}
table:not(.code):not(#z) thead tr:first-child th:first-child {
border-top-left-radius: 4px;
}
table:not(.code):not(#z) thead tr:first-child th:last-child {
border-top-right-radius: 4px;
}
table:not(.code):not(#z) thead tr th {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
border-bottom-width: 0px;
}
table:not(.code):not(#z) thead tr th:not(:first-child):not(last-child) {
border-left: none;
}
table:not(.code):not(#z) tbody {
background-color: var(--t) !important;
}
table:not(.code):not(#z) tbody tr:not(:first-child):not(last-child) td {
border-top: none;
}
table:not(.code):not(#z) tbody tr td {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--t) !important;
}
table:not(.code):not(#z) tbody tr td:not(:first-child):not(last-child) {
border-left: none;
}
table:not(.code):not(#z) tbody tr td a {
color: var(--accent);
}
table:not(.code):not(#z) tbody tr:last-child td:last-child {
border-radius: 0 0 4px 0;
}
table:not(.code):not(#z) tbody tr:last-child td:first-child {
border-radius: 0 0 0 4px;
}
table:not(.code):not(#z) tbody tr:last-child td:first-child:last-child {
border-radius: 0 0 4px 4px;
}
table:not(.code):not(#z):not(.shortcut-mappings) tbody > tr > th {
border-bottom-width: 1px !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
table:not(.code):not(#z):not(.shortcut-mappings)
tbody
> tr:not(:first-child)
> th {
border-top-width: 0px !important;
}
table:not(.code):not(#z):not(.shortcut-mappings)
tbody
> tr:first-child
> th:not(:first-child):not(last-child) {
border-left: none;
}
table:not(.code):not(#z):not(.shortcut-mappings)
tbody
> tr:first-child
> th:first-child {
border-radius: 4px 0 0 0;
}
table:not(.code):not(#z):not(.shortcut-mappings)
tbody
> tr:first-child
> th:last-child {
border-radius: 0 4px 0 0;
}
table:not(.code):not(#z):not(.shortcut-mappings)
tbody
> tr:first-child
> th:first-child:last-child {
border-radius: 4px 4px 0 0;
}
table:not(.code):not(#z):not(.shortcut-mappings)
tbody
> tr:last-child
> th:first-child {
border-radius: 0 0 0 4px;
}
table:not(.code):not(#z):not(.shortcut-mappings)
tbody
> tr:first-child:last-child
> th:first-child {
border-radius: 4px 0 0 4px;
}
table:not(.code):not(#z) tbody:first-child > tr:first-child > td:first-child {
border-radius: 4px 0 0 0;
}
table:not(.code):not(#z) tbody:first-child > tr:first-child > td:last-child {
border-radius: 0 4px 0 0;
}
table:not(.code):not(#z)
tbody:first-child
> tr:first-child:last-child
> td:first-child {
border-radius: 4px 0 0 4px;
}
table:not(.code):not(#z)
tbody:first-child
> tr:first-child:last-child
> td:last-child {
border-radius: 0 4px 4px 0;
}
table:not(.code):not(#z) > tr td {
border-color: var(--darker) !important;
}
table:not(.code):not(#z) > tr:first-child > td {
border-top: none;
}
table:not(.code):not(#z).grid-all > caption {
color: var(--lighter) !important;
}
table:not(.code):not(#z).grid-all > thead > tr > th:first-child {
border-left: 1px solid var(--darker) !important;
}
table:not(.code):not(#z).grid-all > thead > tr > th:last-child {
border-right: 1px solid var(--darker) !important;
}
table:not(.code):not(#z).grid-all > tbody > tr > th:first-child {
border-top: none !important;
border-bottom: 1px solid var(--darker) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
table:not(.code):not(#z).grid-all > tbody > tr > td:last-child {
border-right: 1px solid var(--darker) !important;
}
table:not(.code):not(#z).grid-all > tbody > tr:first-child > th {
border-top: 1px solid var(--darker) !important;
}
table:not(.code):not(#z).grid-all > tbody > tr:last-child > th {
border-radius: 0 0 0 4px;
}
table:not(.code):not(#z).table-striped,
table:not(.code):not(#z).active-tokens,
table:not(.code):not(#z).pipeline-project-metrics {
border: 1px solid var(--darker);
}
table:not(.code):not(#z).table-striped thead > tr > th,
table:not(.code):not(#z).active-tokens thead > tr > th,
table:not(.code):not(#z).pipeline-project-metrics thead > tr > th {
border-top: none;
}
table:not(.code):not(#z).table-striped tbody tr:nth-of-type(2n + 1),
table:not(.code):not(#z).active-tokens tbody tr:nth-of-type(2n + 1),
table:not(.code):not(#z).pipeline-project-metrics tbody tr:nth-of-type(2n + 1) {
background-color: var(--bb) !important;
}
table:not(.code):not(#z).table-striped tbody tr > td,
table:not(.code):not(#z).active-tokens tbody tr > td,
table:not(.code):not(#z).pipeline-project-metrics tbody tr > td {
border-top: 1px solid var(--darker) !important;
}
table:not(.code):not(#z).table-striped
tbody
tr:not(:first-child)
> td.issues-analytics-td,
table:not(.code):not(#z).active-tokens
tbody
tr:not(:first-child)
> td.issues-analytics-td,
table:not(.code):not(#z).pipeline-project-metrics
tbody
tr:not(:first-child)
> td.issues-analytics-td,
table:not(.code):not(#z).table-striped
tbody
tr:not(:first-child)
> td.issues-analytics-td
~ td,
table:not(.code):not(#z).active-tokens
tbody
tr:not(:first-child)
> td.issues-analytics-td
~ td,
table:not(.code):not(#z).pipeline-project-metrics
tbody
tr:not(:first-child)
> td.issues-analytics-td
~ td {
border-top: none !important;
}
table:not(.code):not(#z).gl-table {
border: 1px solid var(--darker);
}
table:not(.code):not(#z).gl-table tbody > tr:first-child > td {
border-top: 1px solid var(--darker);
}
table:not(.code):not(#z).gl-table tbody > tr:last-child > td {
border-bottom: none;
}
@media (min-width: 991.98px) {
table:not(.code):not(#z).gl-table tbody > tr:hover > td {
background-color: var(--bb) !important;
}
}
table:not(.code):not(#z).tree-table {
border: 1px solid var(--darker);
}
table:not(.code):not(#z).tree-table thead tr,
table:not(.code):not(#z).tree-table thead tr th {
border-top: none !important;
}
table:not(.code):not(#z).tree-table thead tr > th:first-child {
border-top-left-radius: 3px !important;
}
table:not(.code):not(#z).tree-table thead tr > th:last-child {
border-top-right-radius: 3px !important;
}
table:not(.code):not(#z).tree-table tbody td {
border-color: var(--darker) !important;
}
table:not(.code):not(#z).tree-table tbody tr > td {
border-top: 1px solid var(--darker) !important;
border-bottom: none !important;
}
table:not(.code):not(#z).tree-table tbody tr.selected td {
background-color: var(--darken) !important;
}
table:not(.code):not(#z).tree-table tbody tr:hover:not(.selected) td {
background-color: var(--bb) !important;
}
table:not(.code):not(#z).tree-table tbody tr:last-child td:not(#z),
table:not(.code):not(#z).tree-table tbody tr:last-child:first-child td:not(#z) {
border-bottom: none !important;
}
table:not(.code):not(#z).tree-table tbody:first-child > tr:first-child td {
border-top: none !important;
}
.tree-item-file-name,
.tree-item-file-name a,
.tree-item-file-name i {
color: var(--light) !important;
}
.tree-commit,
.tree-commit-link {
color: var(--lighter) !important;
}
table:not(.code):not(#z).table.m-0 {
margin-bottom: 8px !important;
border: 1px solid var(--darker);
}
table:not(.code):not(#z).table.m-0 tbody > tr:last-child:not(#z) > td {
border-bottom: none !important;
}
table:not(.code):not(#z).push-pull-table {
border: 1px solid var(--darker);
}
table:not(.code):not(#z).push-pull-table thead tr th {
border-top: none !important;
}
.vulnerability-list thead th {
box-shadow: 0 1px var(--darker) !important;
}
.gl-responsive-table-row {
color: var(--lighter) !important;
}
.gl-responsive-table-row:not(:last-child) {
border-color: var(--darker) !important;
}
.gl-responsive-table-row-clickable:hover {
background-color: var(--darken) !important;
}
.gl-responsive-table-row.bg-gray-light {
background-color: var(--bb) !important;
}
.gl-responsive-table-row.bg-gray-light:last-child {
border-bottom: 1px solid var(--darker) !important;
}
.ci-table {
margin-top: 10px;
border: 1px solid var(--darker);
color: var(--red) !important;
background-color: var(--dark) !important;
border-radius: 4px;
}
.ci-table [class*="header"] {
padding: 12px 16px;
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
border-radius: 3px 3px 0 0;
}
.ci-table [class$="table-row"] {
padding: 8px 16px;
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
.ci-table [class$="table-row"]:nth-last-child(2) {
border-bottom: none !important;
border-radius: 0 0 3px 3px;
}
.ci-table [class$="table-row"]:hover {
background-color: var(--bb) !important;
}
.ci-table .pipeline-actions {
padding-right: 16px;
}
.js-run-mr-pipeline {
margin-right: 16px;
}
.ci-table .sprite {
fill: var(--lighter) !important;
}
.ci-table > tbody > .build > td {
border-top: 1px solid var(--darker) !important;
}
.ci-table > tbody > .build:hover {
background-color: var(--bb) !important;
}
.ci-table .commit-sha,
.ci-table .gfm-commit {
color: var(--accent) !important;
}
.ci-table .ref-name,
.ci-table .pipeline-id,
.ci-table .table-mobile-header,
.ci-table .build-link,
.ci-table .build-name a {
color: var(--light) !important;
}
.ci-table .duration {
color: var(--lighter) !important;
}
.ci-table .duration svg path {
fill: var(--lighter) !important;
}
.ci-table.pipeline tbody > tr > th {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--bb) !important;
}
.ci-table.pipeline tbody > tr > td {
border-top: 1px solid var(--darker) !important;
}
.ci-table path[fill="#FFF"] {
fill: var(--darken) !important;
}
.ci-table .build.retried {
background-color: var(--bb) !important;
}
[class*="col-"] > table.table {
border: 1px solid var(--darker);
}
[class*="col-"] > table.table thead tr th {
border-top: none;
}
[class*="col-"] > table.table tbody tr td {
border-top: 1px solid var(--darker) !important;
}
[class*="col-"] > table.table tbody tr:hover {
background-color: var(--bb) !important;
}
.ci-variable-table table colgroup col:nth-child(7) {
width: 50px !important;
}
.ci-variable-table table tr th:first-child,
.ci-variable-table table tr td:first-child {
padding-left: 16px;
}
table:not(.code):not(#z).import-table {
border: 1px solid var(--darker) !important;
}
table:not(.code):not(#z).import-table thead th {
border: none !important;
background-color: var(--darken) !important;
}
table:not(.code):not(#z).import-table tbody tr:hover td {
background-color: var(--bb) !important;
}
table:not(.code):not(#z).import-table tbody td {
border-top: 1px solid var(--darker) !important;
}
.import-slash-divider {
border-color: var(--darker) !important;
background-color: var(--bb) !important;
}
.save-project-loader {
color: var(--lighter) !important;
}
table:not(.code):not(#z) td.d-sm-block {
display: table-cell !important;
}
[class*="dropdown-menu"] {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
[class*="dropdown-menu"].show {
box-shadow: var(--bshadow);
}
[class*="dropdown-menu"] .dropdown-info-note {
color: var(--lighter) !important;
}
[class*="dropdown-menu"] strong,
[class*="dropdown-menu"] .bold,
[class*="dropdown-menu"] .text {
color: var(--light) !important;
}
[class*="dropdown-menu"] span[class*="-text"] {
z-index: 1;
color: var(--light) !important;
}
[class*="dropdown-menu"] [class*="input-field"] {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
[class*="dropdown-menu"] [class*="input-field"]:focus {
border-color: var(--blue) !important;
}
[class*="dropdown-menu"] .dropdown-title,
[class*="dropdown-menu"] [class*="-header"] {
color: var(--light) !important;
border-color: var(--darker) !important;
}
[class*="dropdown-menu"] [class*="divider"],
[class*="dropdown-menu"] .separator {
border-color: var(--darker) !important;
background-color: var(--darker) !important;
}
[class*="dropdown-menu"] .border-top {
border-color: var(--darker) !important;
}
[class*="dropdown-menu"] li a,
[class*="dropdown-menu"] li button {
color: var(--lighter) !important;
}
[class*="dropdown-menu"] li a:hover,
[class*="dropdown-menu"] li button:hover,
[class*="dropdown-menu"] li a:active,
[class*="dropdown-menu"] li button:active,
[class*="dropdown-menu"] li a:focus,
[class*="dropdown-menu"] li button:focus {
color: var(--light) !important;
background-color: var(--darker) !important;
}
[class*="dropdown-menu"] li a.is-focused,
[class*="dropdown-menu"] li button.is-focused {
color: var(--light) !important;
background-color: var(--darker) !important;
}
[class*="dropdown-menu"] li a.is-active,
[class*="dropdown-menu"] li button.is-active {
color: var(--accent) !important;
}
[class*="dropdown-menu"] li .btn-success:hover {
color: var(--white) !important;
background-color: var(--green) !important;
}
[class*="dropdown-menu"] li.current-user {
color: var(--lighter) !important;
}
[class*="dropdown-menu"] li.current-user .bold,
[class*="dropdown-menu"] li.current-user .user-status {
color: var(--light) !important;
}
[class*="dropdown-menu"] button {
color: var(--lighter) !important;
}
[class*="dropdown-menu"] button[class*="-note-"]:not(#z):hover {
background-color: var(--darker) !important;
}
[class*="dropdown-menu"] button[class*="note-delete"]::before {
content: none;
}
[class*="dropdown-menu"] button:not(#z):not([class*="disable"]):hover {
color: var(--light);
background-color: var(--darker);
}
[class*="dropdown-menu"] .dropdown-tabs-list {
box-shadow: none !important;
}
[class*="dropdown-menu"] .dropdown-tab-item {
padding: 0 !important;
border-color: var(--darker) !important;
}
[class*="dropdown-menu"] .dropdown-tab-item a {
border-width: 1px !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
[class*="dropdown-menu"] .dropdown-tab-item a:hover {
color: var(--light) !important;
background-color: var(--t) !important;
}
[class*="dropdown-menu"] .dropdown-tab-item a.active {
color: var(--light) !important;
border-color: var(--t) !important;
background-color: var(--darken) !important;
}
[class*="dropdown-menu"] .dropdown-footer {
border-color: var(--darker) !important;
}
[class*="dropdown-menu"] .dropdown-loading {
background-color: var(--darken) !important;
opacity: 0.9;
}
.frequent-items-dropdown-sidebar {
border-color: var(--darker) !important;
}
.frequent-items-dropdown-sidebar a {
color: var(--light) !important;
}
.frequent-items-dropdown-sidebar a:hover {
background-color: var(--darker) !important;
}
.frequent-items-dropdown-content ul li:hover a {
background-color: var(--darker) !important;
}
.frequent-items-dropdown-content [class*="-item-title"] {
color: var(--light) !important;
}
.frequent-items-dropdown-content [class*="-namespace"] {
color: var(--lighter) !important;
}
.frequent-items-dropdown-container .section-header,
.frequent-items-dropdown-container .section-empty {
color: var(--lighter) !important;
}
[class*="dropdown-menu"][class*="-tabs"] p {
color: var(--lighter) !important;
}
[class*="dropdown-menu"][class*="-tabs"] .btn-link:not(#z) {
background-color: var(--t) !important;
}
[class*="dropdown-menu"][class*="-tabs"] .btn-link:not(#z):hover {
background-color: var(--darker) !important;
}
.select2-highlighted .select2-result-label {
color: var(--light) !important;
background-color: var(--darker) !important;
}
.select2-result-label {
color: var(--light) !important;
}
.select2-choice,
.select2-choices {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
.select2-arrow::after {
color: var(--lighter) !important;
}
.select2-match {
color: var(--accent) !important;
}
.select2-drop {
color: var(--lighter) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
box-shadow: var(--bshadow);
}
.select2-input:not(#z) {
font-family: var(--ui-font) !important;
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--t) !important;
}
.select2-container-disabled > a {
background-color: var(--darker) !important;
}
.select2-container-disabled .select2-arrow {
background-color: var(--t) !important;
}
[class*="dropdown-menu"][class*="big-pipe"]::before,
[class*="dropdown-menu"][class*="big-pipe"]::after {
border-color: var(--t) !important;
}
[class*="dropdown-menu"][class*="mini-pipe"]::before,
[class*="dropdown-menu"][class*="mini-pipe"]::after {
border-color: var(--t) !important;
}
[class*="dropdown-menu"] [class*="counter-badge"] {
font-weight: normal;
color: var(--lighter) !important;
}
.gl-new-dropdown .btn {
box-shadow: none !important;
}
.gl-new-dropdown .btn.dropdown-toggle[id*="15"] {
padding: 8px 8px 8px 10px !important;
}
.gl-new-dropdown .btn + ul [class*="text-pri"] {
color: var(--light) !important;
}
.gl-new-dropdown .btn + ul [class*="text-sec"] {
color: var(--lighter) !important;
}
.gl-new-dropdown .btn.dropdown-toggle-split::after {
filter: invert(0.7) !important;
}
.droplab-dropdown .form-control {
background-color: var(--dark) !important;
}
.droplab-dropdown .menu-item:not(.disable-hover) {
color: var(--lighter) !important;
}
.droplab-dropdown .menu-item:not(.disable-hover):hover {
color: var(--light) !important;
background-color: var(--darker) !important;
}
.droplab-dropdown [class*="selected"] .menu-item,
.droplab-dropdown [class*="selected"] .menu-item .fa {
color: var(--light) !important;
}
.droplab-item-active:not(#z) button {
color: var(--light) !important;
background-color: var(--darker) !important;
}
.dropdown-menu-inner-title,
.dropdown-menu-inner-content {
background-color: var(--t) !important;
}
.dropdown-menu-inner-content {
color: var(--lighter) !important;
}
.dropdown-menu-user-link:not(:hover) strong,
.dropdown-menu-user-link:not(:hover) span {
color: var(--lighter) !important;
}
.dropdown-menu-user-name,
.dropdown-menu-user-full-name,
.dropdown-menu-user-username {
background-color: var(--t) !important;
}
[class*="dropdown-menu"]:not(#z) .dropdown-menu-close,
[class*="dropdown-menu"]:not(#z) .dropdown-menu-close:hover {
background-color: var(--t) !important;
}
[class*="dropdown-menu"]:not(#z) .dropdown-menu-close-icon {
background-color: var(--t) !important;
}
[data-page^="search:"] .dropdown-menu[class*="select"],
[data-page^="projects:"] .dropdown-menu[class*="select"],
[data-page^="dashboard:"] .dropdown-menu[class*="select"] {
max-height: 420px !important;
}
.btn {
z-index: 1;
position: relative;
}
.btn,
[data-toggle="dropdown"],
.btn-default {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
.btn svg,
[data-toggle="dropdown"] svg,
.btn-default svg {
fill: var(--lighter) !important;
}
.btn.active > .fa {
color: var(--light) !important;
}
.btn:hover::before,
[data-toggle="dropdown"]:hover::before,
.btn-default:hover::before {
content: "";
background-color: rgba(136, 136, 136, 0.188);
}
.btn[id*="promotion"],
[data-toggle="dropdown"][id*="promotion"],
.btn-default[id*="promotion"] {
background-color: var(--t) !important;
}
.btn[id*="promotion"]::before,
[data-toggle="dropdown"][id*="promotion"]::before,
.btn-default[id*="promotion"]::before {
content: unset !important;
}
.active > [data-toggle="dropdown"]:not([class*="ci-status"]) svg,
.show > [data-toggle="dropdown"]:not([class*="ci-status"]) svg {
fill: var(--light) !important;
}
.btn.btn-xs,
.btn-xs.stat-text {
padding: 8px 10px;
background-color: var(--dark) !important;
}
.btn.btn-xs:not(#z).btn-primary,
.btn-xs.stat-text:not(#z).btn-primary {
color: var(--white) !important;
border-color: var(--accent) !important;
background-color: var(--accent) !important;
}
.git-clone-holder .form-control {
font-family: var(--mono-font) !important;
background-color: var(--dark) !important;
}
.btn[data-toggle="dropdown"].btn-link {
border-color: var(--t) !important;
background-color: var(--t) !important;
}
.btn::before,
[data-toggle="dropdown"]::before {
z-index: 0;
opacity: 0.2;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: opacity 0.2s ease;
border-radius: inherit;
}
.btn:hover::before {
opacity: 0.35;
}
.btn.btn-remove,
.btn.btn-danger {
color: var(--white) !important;
border-color: var(--red) !important;
background-color: var(--red) !important;
}
.btn.btn-remove:not(.btn-inverted),
.btn.btn-danger:not(.btn-inverted) {
transition: opacity 0.2s ease;
}
.btn.btn-remove:not(.btn-inverted) .fa,
.btn.btn-danger:not(.btn-inverted) .fa {
color: var(--white) !important;
}
.btn.btn-remove:not(.btn-inverted) svg,
.btn.btn-danger:not(.btn-inverted) svg {
fill: var(--white) !important;
}
.btn.btn-remove:not(.btn-inverted):hover,
.btn.btn-danger:not(.btn-inverted):hover {
opacity: 0.8;
}
.btn.btn-remove.btn-inverted,
.btn.btn-danger.btn-inverted {
color: var(--red) !important;
border-color: var(--red) !important;
background-color: var(--dark) !important;
}
.btn.btn-remove.btn-inverted::before,
.btn.btn-danger.btn-inverted::before {
content: "";
background-color: var(--red) !important;
}
.btn.btn-remove.btn-inverted .fa,
.btn.btn-danger.btn-inverted .fa {
color: var(--red) !important;
}
.btn.btn-remove.btn-inverted svg,
.btn.btn-danger.btn-inverted svg {
fill: var(--red) !important;
}
.btn.btn-close,
.btn.btn-close-color,
.btn.btn-warning {
color: var(--orange) !important;
border-color: var(--orange) !important;
background-color: var(--dark) !important;
}
.btn.btn-close::before,
.btn.btn-close-color::before,
.btn.btn-warning::before {
content: "";
background-color: var(--orange) !important;
}
.btn.btn-close .fa,
.btn.btn-close-color .fa,
.btn.btn-warning .fa {
color: var(--orange) !important;
}
.btn.btn-close svg,
.btn.btn-close-color svg,
.btn.btn-warning svg {
fill: var(--orange) !important;
}
.btn.btn-success {
color: var(--white) !important;
border-color: var(--green) !important;
background-color: var(--green) !important;
}
.btn.btn-success:not(.btn-inverted) {
transition: opacity 0.2s ease;
}
.btn.btn-success:not(.btn-inverted) .fa {
color: var(--white) !important;
}
.btn.btn-success:not(.btn-inverted) svg {
fill: var(--white) !important;
}
.btn.btn-success:not(.btn-inverted):hover {
opacity: 0.8;
}
.btn.btn-success.btn-inverted {
color: var(--green) !important;
border-color: var(--green) !important;
background-color: var(--dark) !important;
}
.btn.btn-success.btn-inverted::before {
content: "";
background-color: var(--green) !important;
}
.btn.btn-success.btn-inverted .fa {
color: var(--green) !important;
}
.btn.btn-success.btn-inverted svg {
fill: var(--green) !important;
}
.btn.btn-success.js-new-release-btn:not(#z) {
color: var(--white) !important;
}
.btn.btn-primary,
.btn.btn-info {
color: var(--white) !important;
border-color: var(--blue) !important;
background-color: var(--blue) !important;
}
.btn.btn-primary:not(.btn-inverted),
.btn.btn-info:not(.btn-inverted) {
transition: opacity 0.2s ease;
}
.btn.btn-primary:not(.btn-inverted) .fa,
.btn.btn-info:not(.btn-inverted) .fa {
color: var(--white) !important;
}
.btn.btn-primary:not(.btn-inverted) svg,
.btn.btn-info:not(.btn-inverted) svg {
fill: var(--white) !important;
}
.btn.btn-primary:not(.btn-inverted):hover,
.btn.btn-info:not(.btn-inverted):hover {
opacity: 0.8;
}
.btn.btn-primary.btn-inverted,
.btn.btn-info.btn-inverted {
color: var(--blue) !important;
border-color: var(--blue) !important;
background-color: var(--dark) !important;
}
.btn.btn-primary.btn-inverted::before,
.btn.btn-info.btn-inverted::before {
content: "";
background-color: var(--blue) !important;
}
.btn.btn-primary.btn-inverted .fa,
.btn.btn-info.btn-inverted .fa {
color: var(--blue) !important;
}
.btn.btn-primary.btn-inverted svg,
.btn.btn-info.btn-inverted svg {
fill: var(--blue) !important;
}
.btn.btn-primary.new-gl-button,
.btn.btn-info.new-gl-button {
box-shadow: none !important;
}
.btn.btn-inverted-secondary {
color: var(--accent) !important;
border-color: var(--accent) !important;
}
.btn.btn-inverted-secondary::before {
content: "";
background-color: var(--accent) !important;
}
.btn.btn-secondary:focus,
.btn.btn-secondary.focus {
box-shadow: 0 0 0 0.2rem rgba(136, 136, 136, 0.063) !important;
}
.btn.gl-link[href] {
color: var(--light) !important;
}
.btn-link {
color: var(--accent) !important;
border-color: var(--t) !important;
background-color: var(--t) !important;
}
.btn.active {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darker) !important;
}
.btn-transparent:not(#z),
.btn-default-tertiary {
color: var(--lighter);
border-color: var(--t) !important;
background-color: var(--t) !important;
}
.btn-transparent:not(#z)::before,
.btn-default-tertiary::before {
content: unset;
}
.btn[disabled]:not(#z)::before,
.btn.disabled:not(#z)::before {
content: unset;
}
.btn[disabled]:not(#z),
.btn.disabled:not(#z),
.btn[disabled]:not(#z):hover,
.btn.disabled:not(#z):hover {
opacity: 0.5 !important;
color: var(--lighter) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
.btn[disabled]:not(#z) .fa,
.btn.disabled:not(#z) .fa {
color: var(--lighter) !important;
}
.btn.award-control {
color: var(--lighter) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
.btn.award-control.active,
.btn.award-control.is-active {
color: var(--accent) !important;
border-color: var(--accent) !important;
background-color: var(--darken) !important;
}
.btn.award-control.active::before,
.btn.award-control.is-active::before {
content: "";
background-color: var(--accent) !important;
}
.btn.gpg-status-box.invalid {
color: var(--lighter) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
.btn.gpg-status-box.valid {
color: var(--green) !important;
border-color: var(--green) !important;
background-color: var(--darken) !important;
}
.status-box {
color: var(--white) !important;
}
.status-box-issue-closed,
.status-box-mr-merged {
background-color: var(--blue) !important;
}
.status-box-closed,
.status-box-mr-closed {
background-color: var(--red) !important;
}
.status-box-expired {
background-color: var(--orange) !important;
}
.status-box-upcoming {
color: var(--light) !important;
background-color: var(--darker) !important;
}
.status-box-open {
background-color: var(--green) !important;
}
.status-box > svg.s16 {
fill: var(--white) !important;
}
.input-group-append,
.input-group-prepend {
background-color: var(--t) !important;
}
.input-group-append > [class*="-text"],
.input-group-prepend > [class*="-text"] {
color: var(--light) !important;
border-color: var(--darker) !important;
}
.input-group-append > [class*="-text"]:not(.label-color-preview),
.input-group-prepend > [class*="-text"]:not(.label-color-preview) {
background-color: var(--bb) !important;
}
.project-repo-buttons .btn {
padding: 6px 10px;
}
.project-repo-buttons .count {
color: var(--light) !important;
}
.project-repo-buttons .count-badge-count {
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
.project-repo-buttons .count-badge,
.project-repo-buttons .btn-xs {
height: 32px !important;
font-size: 14px !important;
}
.project-repo-buttons .count-badge:last-child {
margin-right: 0 !important;
}
.text-expander {
padding: 2px 4px;
color: var(--lighter) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
.text-expander.open {
color: var(--accent) !important;
background-color: var(--darker) !important;
}
.btn-missing,
.stat-text {
color: var(--lighter) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
.provider-btn {
line-height: unset;
border-radius: 0 4px 4px 0;
color: var(--light) !important;
background-color: var(--darken) !important;
}
.provider-btn-group {
border-radius: 4px;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
.provider-btn-image {
border-radius: 4px 0 0 4px;
border-color: var(--darker) !important;
background-color: var(--darker) !important;
}
.btn-link::before,
.btn-blank::before,
.btn-clipboard::before {
content: unset !important;
}
.btn.bg-transparent {
background-color: var(--t) !important;
}
.btn.gl-button {
border: 1px solid;
box-shadow: none !important;
}
.btn.gl-button.btn-dashed {
outline-color: var(--bb) !important;
}
.btn.gl-button.btn-dashed:active,
.btn.gl-button.btn-dashed:focus {
border-color: var(--blue) !important;
}
.label.label-monospace {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--bb) !important;
}
.label.scoped-label .fa-question-circle {
background-color: var(--t) !important;
}
.label.scoped-label .fa-question-circle[style*="#FFFFFF"] {
color: var(--white) !important;
}
.label.scoped-label .fa-question-circle[style*="#333333"] {
color: #000 !important;
}
.label-link,
.label-link .badge {
text-decoration: none !important;
}
.label-badge {
color: var(--light) !important;
}
.label-badge-blue {
color: var(--white) !important;
background-color: var(--blue) !important;
}
.label-badge-gray {
color: var(--lighter) !important;
background-color: var(--darken) !important;
}
.label-links a {
color: var(--accent) !important;
}
.label-action svg {
fill: var(--lighter) !important;
}
.label-subscribe-button {
font-weight: 400;
}
.label-lfs {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
.badge.issues-count {
color: var(--white) !important;
background-color: var(--green) !important;
}
.badge.merge-requests-count {
color: var(--white) !important;
background-color: var(--orange) !important;
}
.badge.todos-count {
color: var(--white) !important;
background-color: var(--blue) !important;
}
.badge.badge-pill.badge-secondary {
color: var(--lighter) !important;
background-color: var(--darker) !important;
}
.badge.badge-pill.badge-secondary:hover {
color: var(--light) !important;
}
.badge-pill {
color: var(--lighter) !important;
background-color: var(--darker) !important;
}
.badge.badge-gray {
color: var(--light) !important;
background-color: var(--darken) !important;
}
.issue-count-badge,
.mr-count-badge,
.issue-count-badge + button,
.mr-count-badge + button {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
.badge.color-label {
box-shadow: inset 0 0 0 1rem rgba(51, 51, 51, 0.439);
}
.badge.color-label:hover {
box-shadow: none !important;
}
.badge.color-label[style*="color: #333333"] {
color: #000 !important;
box-shadow: inset 0 0 0 1rem rgba(51, 51, 51, 0.145);
}
.badge-primary,
.badge-info,
.badge-active {
color: var(--white) !important;
background-color: var(--blue) !important;
}
.badge-light,
.badge-secondary,
.badge-inactive {
color: var(--lighter) !important;
background-color: var(--darken) !important;
}
.badge-warning {
color: var(--white) !important;
background-color: var(--orange) !important;
}
.badge-success {
color: var(--white) !important;
background-color: var(--green) !important;
}
.badge-danger {
color: var(--white) !important;
background-color: var(--red) !important;
}
.badge-dark {
color: var(--light) !important;
background-color: var(--darker) !important;
}
.form-control,
.search form {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
border: 1px solid var(--darker) !important;
}
.form-control:focus,
.search form:focus,
.form-control.focus,
.search form.focus {
border-color: var(--blue) !important;
box-shadow: 0 0 0.4rem -0.2rem var(--blue) !important;
}
.form-control[disabled="disabled"]:not(#z),
.search form[disabled="disabled"]:not(#z) {
opacity: 0.5;
}
.navbar .form-control,
.navbar .search form {
background-color: var(--dark) !important;
}
.top-area .form-control,
.top-area .search form {
height: 35px;
}
.form-control #search,
.search form #search {
color: var(--light) !important;
background-color: var(--t) !important;
box-shadow: none !important;
}
.form-control #search ~ [class*="dropdown-menu"] .is-active,
.search form #search ~ [class*="dropdown-menu"] .is-active {
color: var(--light) !important;
}
.dropdown-content-faded-mask::after {
background: linear-gradient(to top, var(--darken), var(--t)) !important;
}
.form-control .search-icon,
.search form .search-icon {
fill: var(--lighter) !important;
}
.form-actions {
border-color: var(--darker) !important;
background-color: var(--t) !important;
}
.form-control.select-control,
.search form.select-control {
background-color: var(--darken) !important;
}
.atwho-view {
color: var(--lighter) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
box-shadow: var(--bshadow);
}
.atwho-view .atwho-view-ul li {
color: var(--light) !important;
}
.atwho-view .atwho-view-ul li strong {
color: var(--accent) !important;
}
.atwho-view .atwho-view-ul li small,
.atwho-view .atwho-view-ul li .params {
color: var(--lighter) !important;
}
.atwho-view .atwho-view-ul li:hover,
.atwho-view .atwho-view-ul li.cur {
color: var(--light) !important;
background-color: var(--darken) !important;
}
ul.content-list li {
color: var(--light) !important;
border-color: var(--darker) !important;
}
ul.content-list li a {
color: var(--light) !important;
}
.item-meta * {
color: var(--lighter) !important;
}
ul.content-list li .todo-label a,
ul.content-list li .todo-project a {
color: var(--accent) !important;
}
ul.content-list li .group-row-contents:hover {
background-color: var(--darken) !important;
}
ul.content-list li .group-row-contents .metadata span,
ul.content-list li .group-row-contents .metadata div {
color: var(--lighter) !important;
}
.has-no-search-results {
color: var(--lighter) !important;
}
ul.content-list li.group-row .description p,
ul.content-list li.group-row .stats {
color: var(--lighter) !important;
}
ul.content-list li.issue:hover,
ul.content-list li.merge-request:hover,
ul.content-list li[id*="epic"]:hover {
background-color: var(--darken) !important;
}
ul.content-list:not(.event_commits) > li.commit:hover {
background-color: var(--bb) !important;
}
ul.content-list.all-branches .graph-side .bar,
ul.content-list.all-branches .graph-separator {
background-color: var(--darker) !important;
}
ul.content-list.all-branches .branch-item:hover {
background-color: var(--bb) !important;
}
ul.content-list.all-branches .commit-sha {
color: var(--accent) !important;
}
ul.content-list.all-branches .cgray {
color: var(--lighter) !important;
}
ul.content-list.issuable-list .issue.today:not(.user-can-drag) {
position: relative;
}
ul.content-list.issuable-list .issue.today:not(.user-can-drag):hover {
background-color: var(--t) !important;
}
ul.content-list.issuable-list .issue.today:not(.user-can-drag):hover::before {
opacity: 0.12;
}
ul.content-list.issuable-list .issue.today:not(.user-can-drag):not(:hover) {
background-color: var(--t) !important;
}
ul.content-list.issuable-list .issue.today:not(.user-can-drag)::before {
content: "";
z-index: -1;
opacity: 0.05;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--green) !important;
}
ul.content-list.issuable-list .closed,
ul.content-list.issuable-list .merged {
background-color: var(--t) !important;
}
ul.content-list.issuable-list .fa:not(.fa-question-circle),
ul.content-list.issuable-list .task-status {
color: var(--lighter) !important;
}
ul.content-list.issuable-list .issuable-milestone,
ul.content-list.issuable-list .issuable-info,
ul.content-list.issuable-list .issuable-updated-at {
color: var(--lighter) !important;
}
.issuable-email-modal-btn {
color: var(--accent) !important;
}
.icon-merge-request-unmerged {
filter: invert(0.7);
}
ul.content-list.issuable-list.manual-ordering {
color: var(--red) !important;
border-color: var(--green) !important;
background-color: var(--darken) !important;
}
ul.content-list.issuable-list.manual-ordering > .issue {
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
ul.content-list.requirements-list > li:not([class*="gl-bg"]):hover {
background-color: var(--t) !important;
}
ul.content-list.members-list li {
background-color: var(--bb) !important;
}
ul.content-list.members-list li:hover {
background-color: var(--darken) !important;
}
input.form-control + button {
border-color: var(--darker) !important;
}
ul.content-list .snippet-filename,
ul.content-list .snippet-info {
color: var(--lighter) !important;
}
.nav-sidebar {
border-right: 1px solid var(--darker);
background-color: var(--darken) !important;
box-shadow: none;
}
.nav-sidebar .context-header > * {
color: var(--light) !important;
}
.nav-sidebar .context-header > *:hover {
background-color: var(--darker) !important;
}
.nav-sidebar .context-header > * .avatar-container {
border-color: var(--t) !important;
background-color: var(--t) !important;
}
.nav-sidebar .divider {
border-color: var(--darker) !important;
}
.nav-sidebar .sidebar-top-level-items > li:hover {
background-color: rgba(136, 136, 136, 0.063) !important;
}
.nav-sidebar .sidebar-top-level-items > li:hover > a {
color: var(--light) !important;
}
.nav-sidebar .sidebar-top-level-items > li.active {
background-color: rgba(136, 136, 136, 0.063) !important;
box-shadow: inset 4px 0 var(--accent) !important;
}
.nav-sidebar .sidebar-top-level-items > li.active > a {
color: var(--light) !important;
}
.nav-sidebar .sidebar-top-level-items > li.active > a svg {
fill: var(--light) !important;
}
.nav-sidebar
.sidebar-top-level-items
> li.active:not(.is-over)
> ul
> li.active
> a {
background-color: var(--darker) !important;
box-shadow: inset 4px 0 var(--accent) !important;
}
.nav-sidebar .sidebar-top-level-items > li.active .badge-pill {
color: var(--light) !important;
}
.nav-sidebar .sidebar-top-level-items > li a {
color: var(--lighter) !important;
}
.nav-sidebar .sidebar-top-level-items > li a:hover {
background-color: var(--t) !important;
}
.nav-sidebar .sidebar-top-level-items > li .badge-pill {
color: var(--lighter) !important;
background-color: var(--darker) !important;
}
.nav-sidebar .sidebar-top-level-items > li.is-over:not(#z) ul > li,
.nav-sidebar .sidebar-top-level-items > li.is-over:not(#z) ul > li > a {
box-shadow: unset !important;
}
.nav-sidebar .sidebar-sub-level-items > li:hover {
background-color: var(--darker) !important;
box-shadow: inset 4px 0 var(--accent) !important;
}
.nav-sidebar .sidebar-sub-level-items > li:hover a {
color: var(--light) !important;
}
.nav-sidebar .sidebar-sub-level-items > li.active {
box-shadow: inset 4px 0 var(--accent) !important;
}
.nav-sidebar .sidebar-sub-level-items > li.active a {
color: var(--light) !important;
}
.nav-sidebar .is-over.is-showing-fly-out > a {
color: var(--light) !important;
background-color: rgba(136, 136, 136, 0.063) !important;
}
.nav-sidebar .is-over.is-showing-fly-out ul {
border-color: var(--darker) !important;
background-color: var(--darken) !important;
box-shadow: none;
}
.nav-sidebar .is-over.is-showing-fly-out ul li a {
color: var(--lighter) !important;
}
.nav-sidebar .is-over.is-showing-fly-out ul li a:focus {
background-color: var(--darker) !important;
}
.nav-sidebar .is-over.is-showing-fly-out ul li:hover a {
color: var(--light) !important;
background-color: rgba(136, 136, 136, 0.063) !important;
}
.nav-sidebar[class*="collapsed"] .sidebar-top-level-items > li.active {
background-color: var(--darker) !important;
}
.nav-sidebar .toggle-sidebar-button,
.nav-sidebar .close-nav-button {
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
.nav-sidebar .toggle-sidebar-button svg,
.nav-sidebar .close-nav-button svg {
color: var(--lighter) !important;
}
.nav-sidebar .toggle-sidebar-button span,
.nav-sidebar .close-nav-button span {
color: var(--light) !important;
}
.nav-sidebar .toggle-sidebar-button:hover,
.nav-sidebar .close-nav-button:hover {
background-color: var(--darker) !important;
}
.nav-sidebar:not(.js-sidebar-collapsed)
+ .content-wrapper
.pipeline-visualization
> div[style*="padding-left: 0px"] {
padding-left: 0px !important;
padding-left: 240px !important;
}
.nav-sidebar.js-sidebar-collapsed
+ .content-wrapper
.pipeline-visualization
> div[style*="padding-left: 0px"] {
padding-left: 0px !important;
padding-left: 70px !important;
}
.right-sidebar {
border-color: var(--darker) !important;
background-color: var(--darken) !important;
top: 50px !important;
}
.right-sidebar .title {
color: var(--light) !important;
}
.right-sidebar .block {
border-color: var(--darker) !important;
}
.right-sidebar .edit-link,
.right-sidebar .lock-edit,
.right-sidebar .no-value,
.right-sidebar a[href="#"] {
color: var(--lighter) !important;
}
.right-sidebar a:not(.btn):hover,
.right-sidebar .btn-link:not(.btn):hover {
color: var(--accent);
}
.gl-drawer {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
box-shadow: -1px 0 var(--darker), var(--bshadow);
top: 50px !important;
}
.gl-drawer-header,
.gl-drawer-body > * {
border-color: var(--darker) !important;
}
.right-sidebar .issuable-sidebar {
overflow-y: auto !important;
}
.right-sidebar .issuable-sidebar .gutter-toggle {
border-color: var(--darker) !important;
background-color: var(--t) !important;
}
.right-sidebar .issuable-sidebar-header button,
.right-sidebar .issuable-sidebar .dropdown button {
background-color: var(--dark) !important;
}
.right-sidebar .issuable-sidebar-header .btn-info,
.right-sidebar .issuable-sidebar .dropdown .btn-info {
background-color: var(--blue) !important;
}
.right-sidebar .time_tracker .compare-label {
color: var(--lighter) !important;
}
.right-sidebar .time_tracker .compare-value {
color: var(--light) !important;
}
.right-sidebar .time_tracker .time-tracking-help-state {
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
.right-sidebar.build-sidebar .builds-container {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
.right-sidebar.build-sidebar .builds-container .build-job.retried {
background-color: var(--t) !important;
}
.right-sidebar.build-sidebar .builds-container .build-job:hover {
background-color: var(--bb) !important;
}
.right-sidebar.build-sidebar .builds-container .build-job:hover a {
color: var(--light) !important;
}
.right-sidebar.build-sidebar .blocks-container a:not(.btn),
.right-sidebar.build-sidebar .blocks-container .btn-link:not(.btn) {
color: var(--accent) !important;
}
.right-sidebar.build-sidebar .btn,
.right-sidebar.build-sidebar [data-toggle="dropdown"] {
background-color: var(--dark) !important;
}
.right-sidebar .is-option-selected > span {
color: var(--lighter) !important;
}
.right-sidebar .vertical-timeline::before {
border-color: var(--lighter) !important;
}
.right-sidebar .vertical-timeline-icon {
background-color: var(--darken) !important;
}
.right-sidebar .vertical-timeline-icon.opened svg {
fill: var(--green) !important;
}
.right-sidebar .vertical-timeline-icon.closed svg {
fill: var(--blue) !important;
}
.right-sidebar .vertical-timeline-content a:hover {
color: var(--accent) !important;
}
.right-sidebar .labels-select-wrapper .label-item.is-focused,
.right-sidebar .labels-select-wrapper .label-item:hover {
color: var(--light) !important;
background-color: var(--darker) !important;
}
.right-sidebar .labels-select-wrapper .gl-link:not(.gl-label-link),
.right-sidebar .labels-select-wrapper .btn-link:not(.gl-label-link) {
color: var(--lighter) !important;
}
.right-sidebar .labels-select-dropdown-contents {
border: 1px solid var(--darker) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
box-shadow: var(--bshadow) !important;
}
.right-sidebar .labels-select-dropdown-contents .dropdown-title,
.right-sidebar .labels-select-dropdown-contents .dropdown-footer {
border-color: var(--darker) !important;
}
.right-sidebar .btn-group li .dropdown-item:hover {
background-color: var(--darker) !important;
}
.right-sidebar .btn-group li .dropdown-item,
.right-sidebar .btn-group li .dropdown-item button.btn {
background-color: var(--t) !important;
}
.right-sidebar .btn-group li .dropdown-item .btn.is-active::before {
content: "\f00c" !important;
opacity: 1 !important;
background-color: var(--t) !important;
}
.dropdown-title-button {
position: absolute;
}
.right-sidebar.right-sidebar-collapsed .sidebar-collapsed-icon {
color: var(--light) !important;
}
.right-sidebar.right-sidebar-collapsed .sidebar-collapsed-icon svg {
fill: var(--lighter) !important;
}
.right-sidebar.right-sidebar-collapsed .gutter-toggle {
background-color: var(--darken) !important;
}
.right-sidebar.right-sidebar-collapsed .gutter-toggle:hover,
.right-sidebar.right-sidebar-collapsed .block:hover {
background-color: rgba(136, 136, 136, 0.063) !important;
}
.top-area {
border-color: var(--darker) !important;
}
.nav-links:not(.quick-links) {
border-color: var(--darker) !important;
}
.nav-links li .badge.badge-pill {
color: var(--lighter) !important;
background-color: var(--darker) !important;
}
.nav-links li a,
.nav-links li button {
color: var(--lighter) !important;
}
.nav-links li a:focus,
.nav-links li button:focus {
border-color: var(--darker) !important;
}
.nav-links li:hover a,
.nav-links li:hover button {
color: var(--light) !important;
border-color: var(--darker) !important;
}
.nav-links li.active,
.nav-links li.active a,
.nav-links li.active button {
color: var(--light) !important;
border-color: var(--accent) !important;
}
.nav-links li.active .badge.badge-pill {
color: var(--light) !important;
background-color: var(--darker) !important;
}
.nav-links li a.active,
.nav-links li button.active,
.nav-links li a strong,
.nav-links li button strong {
color: var(--light) !important;
border-color: var(--accent) !important;
}
.top-area .form-control {
background-color: var(--darken) !important;
}
.content-block {
border-color: var(--darker) !important;
background-color: var(--t) !important;
}
.content-block p:not(.status-box) {
color: var(--light) !important;
}
.content-block.landing {
background-color: var(--darken) !important;
}
.content-block.landing h4 {
color: var(--light) !important;
}
.content-block .new-branch-col .btn {
padding: 6px 10px !important;
line-height: 20px !important;
font-size: 0.875rem;
}
.emoji-block .col-lg-6 {
flex: unset;
width: unset;
max-width: unset;
}
.emoji-block .col-lg-6:first-child {
max-width: 50%;
}
.emoji-block .col-lg-6:last-child {
flex: 1 1 auto !important;
}
.nav-block {
border-color: var(--darker) !important;
}
.row-content-block {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
.row-content-block.footer-block {
background-color: var(--t) !important;
}
.row-content-block
.btn:not(.btn-link):not(.btn-success):not(.btn-danger):not(.btn-info):not(.gl-button),
.row-content-block .btn-default {
background-color: var(--dark) !important;
}
.row-content-block .btn.dropdown-toggle {
border: 1px solid var(--darker);
}
.row-content-block .filtered-search-box:not(#z) {
background-color: var(--dark) !important;
}
.row-content-block.top-block {
padding: 16px 0;
background-color: var(--bb) !important;
}
.row-content-block.top-block .event-last-push time {
color: var(--light) !important;
}
.row-content-block.top-block .event-last-push-text {
font-size: 14px;
}
.row-content-block.top-block .btn-sm {
padding: 6px 10px !important;
line-height: 1.5 !important;
font-size: 14px !important;
}
.row-content-block.issues-details-filters [class*="menu-toggle"] {
background-color: var(--dark) !important;
}
.row-content-block span > code,
.row-content-block form > div > button {
background-color: var(--dark) !important;
}
.row-content-block .block {
border-color: var(--darker) !important;
}
.row-content-block .block .title {
color: var(--light) !important;
}
.row-content-block .block button.dropdown-toggle[id]:not(#z),
.row-content-block .block button.dropdown-menu-toggle {
background-color: var(--darken) !important;
}
.sub-header-block {
border-color: var(--darker) !important;
background-color: var(--t) !important;
}
.gl-tabs-nav {
border-color: var(--darker) !important;
}
.gl-tab-nav-item {
color: var(--lighter) !important;
}
.gl-tab-nav-item-active {
color: var(--light) !important;
}
.gl-tab-nav-item:hover {
box-shadow: inset 0 -0.125rem var(--darker);
}
.gl-tab-nav-item.active {
box-shadow: inset 0 -0.125rem var(--accent);
}
.gl-tab-content {
color: var(--light) !important;
}
.gl-tab-content .text-dark,
.gl-tab-content .text-dark:hover {
color: var(--light) !important;
}
.gl-tab-content .text-secondary,
.gl-tab-content .text-secondary:hover {
color: var(--lighter) !important;
}
.pipeline-quota {
border-color: var(--darker) !important;
}
.pipeline-quota + .ci-table > div:first-child {
margin-top: -1px !important;
}
.registry-placeholder .gl-text-black-normal {
color: var(--light) !important;
}
.registry-placeholder a.gl-text-black-normal:hover {
color: var(--accent) !important;
}
.gitlab-tabs {
border-radius: 4px 4px 0 0;
border-color: var(--darker) !important;
background-color: var(--t) !important;
}
.gitlab-tabs.nav.nav-tabs.nav-links {
border-radius: 4px 4px 0 0;
border-bottom: 1px solid;
box-shadow: none;
}
.gitlab-tabs.nav.nav-tabs.nav-links > .nav-item {
margin: 0;
}
.gitlab-tabs li[class^="nav-"] {
border-color: var(--darker) !important;
background-color: var(--darker) !important;
}
.gitlab-tabs li[class^="nav-"]:first-child {
margin: 0;
}
.gitlab-tabs li[class^="nav-"] a {
border-radius: 0;
}
.gitlab-tabs li[class^="nav-"]:first-child a {
border-radius: 3px 0 0 0;
}
.gitlab-tabs li[class^="nav-"]:last-child a {
border-radius: 0 3px 0 0;
}
.gitlab-tabs li[class^="nav-"]:hover a.nav-link {
color: var(--light) !important;
border-color: var(--t) !important;
}
.gitlab-tabs li[class^="nav-"] a:not(.active) {
background-color: var(--dark) !important;
}
.gitlab-tabs li[class^="nav-"] a.active.nav-link {
margin-bottom: -1px;
color: var(--light) !important;
border-color: var(--darken) !important;
background-color: var(--darken) !important;
}
.gitlab-tabs + .gitlab-tab-content {
border-radius: 0 0 4px 4px;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
.gitlab-tabs + .gitlab-tab-content .form-control,
.gitlab-tabs + .gitlab-tab-content .info-well {
background-color: var(--dark) !important;
}
.gitlab-tabs + .gitlab-tab-content .select2-choice,
.gitlab-tabs + .gitlab-tab-content .select2-choices {
background-color: var(--dark) !important;
}
.gitlab-tabs
+ .gitlab-tab-content
[class*="input-group"]:not(.template-input-group) {
border-radius: 3px 0 0 3px;
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--bb) !important;
}
.option-title {
color: var(--light) !important;
}
.option-description,
.option-disabled-reason {
color: var(--lighter) !important;
}
.gitlab-tabs + .gitlab-tab-content .template-option {
border-color: var(--darker) !important;
}
.gitlab-tabs + .gitlab-tab-content .card-slim {
background-color: var(--dark) !important;
}
.nav-tabs .nav-link.active {
border-color: var(--accent) !important;
background-color: var(--t) !important;
}
.gitlab-tabs + .gitlab-tab-content .btn[class*="gitea"] svg path {
fill: var(--lighter) !important;
}
.gitlab-tabs + .gitlab-tab-content .btn[class*="gitea"] svg rect {
fill: var(--dark) !important;
}
.gitlab-tabs + .gitlab-tab-content .btn-cancel,
.gitlab-tabs + .gitlab-tab-content .btn-default,
.gitlab-tabs + .gitlab-tab-content .btn[class*="import"] {
background-color: var(--dark) !important;
}
.section-welcome .container .blank-state-link {
color: var(--lighter) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
.section-welcome .container .blank-state-link:hover {
color: var(--light) !important;
background-color: var(--darken) !important;
}
.projects-list > li {
border-color: var(--darker) !important;
}
.projects-list > li .description {
color: var(--lighter) !important;
}
.user-access-role {
color: var(--lighter) !important;
border-color: var(--darker) !important;
background-color: rgba(136, 136, 136, 0.082) !important;
}
.projects-list.compact .user-access-role {
line-height: 18px;
}
.projects-list.compact .avatar {
line-height: 38px !important;
}
.loading {
color: var(--lighter) !important;
}
.projects-list:not(.compact),
.snippets-list-holder > ul,
#groups > ul {
margin-top: 10px;
padding: 12px;
background-color: var(--darken) !important;
border-radius: 4px;
}
.projects-list:not(.compact) > li,
.snippets-list-holder > ul > li,
#groups > ul > li {
padding: 12px 0 !important;
}
.projects-list:not(.compact) > li:first-child,
.snippets-list-holder > ul > li:first-child,
#groups > ul > li:first-child {
padding-top: 0 !important;
}
.projects-list:not(.compact) > li:last-child,
.snippets-list-holder > ul > li:last-child,
#groups > ul > li:last-child {
padding-bottom: 0 !important;
}
.user-calendar-activities {
background-color: var(--darken) !important;
border-radius: 4px;
}
.user-calendar-activities h4 {
margin: 10px 12px 0;
padding: 10px 0;
border-bottom: 1px solid var(--darker);
}
.user-calendar-activities ul li,
.user-calendar-activities > p {
margin: 0 12px !important;
padding: 10px 0 !important;
}
.event-item {
color: var(--lighter) !important;
border-color: var(--darker) !important;
}
.event-item .commit,
.event-item .commits-stat {
color: var(--light) !important;
}
.event-item [href],
.event-item [href*="/compare/"] {
color: var(--accent) !important;
}
.event-item .joined-icon svg,
.event-item .pushed-new-icon svg,
.event-item .pushed-to-icon svg {
fill: var(--lighter) !important;
}
.event-user-info a[href] {
color: var(--light) !important;
}
div.content_list {
margin-top: 10px;
padding: 10px;
background-color: var(--darken) !important;
border-radius: 4px;
}
div.content_list > .event-item {
padding-top: 10px;
padding-bottom: 10px;
}
.event-note pre.code {
border: 1px solid var(--darker) !important;
color: var(--light) !important;
background-color: var(--dark) !important;
}
.card {
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
.card .user-info .user {
color: var(--light) !important;
}
.card-header {
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
.card-header.bg-info {
color: var(--white) !important;
border-color: var(--blue) !important;
background-color: var(--blue) !important;
}
.card-header.bg-danger {
color: var(--white) !important;
border-color: var(--red) !important;
background-color: var(--red) !important;
}
.card-header + ul > .list-group-item {
border-color: var(--darker) !important;
background-color: var(--t) !important;
}
.card.border-info {
border-color: var(--blue) !important;
}
.card.border-danger {
border-color: var(--red) !important;
}
.list-group > .list-group-item {
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
.card-header input,
.card-header [class*="dropdown-menu"] {
background-color: var(--dark) !important;
}
.card-header .card-title {
color: var(--light) !important;
}
.card-body > .form-actions {
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
.card-body,
.card-body > .form-actions {
border-radius: 0 0 3px 3px !important;
}
.card-footer {
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
.card-footer.alert-primary {
color: var(--blue) !important;
background-color: var(--darken) !important;
}
.card-footer pre,
.card-footer code {
border-radius: 4px;
background-color: var(--dark) !important;
}
.card.border-0 {
border: 1px solid var(--darker) !important;
}
.card.border-0 .card-header a {
color: var(--light) !important;
}
.environments-dashboard .dashboard-card {
box-shadow: none !important;
border: none !important;
background-color: var(--t) !important;
}
.related-issues-block .card-header {
border-color: var(--darker) !important;
background-color: var(--darken) !important;
border-radius: 3px 3px 0 0;
}
.related-issues-block .card-header.panel-empty-heading {
box-shadow: inset 0 -1px var(--darker);
}
.related-issues-block .card .linked-issues-card-body {
min-height: 16px;
border-radius: 0 0 3px 3px;
background-color: var(--bb) !important;
}
.related-issues-block .card .linked-issues-card-body > .card-body {
border-radius: 3px !important;
}
.related-issues-block .card ul > li,
.related-issues-block .card ul > li[class*="input"] > input {
color: var(--light) !important;
background-color: var(--darken) !important;
}
.issue-token-reference {
color: var(--light) !important;
background-color: var(--darker) !important;
}
.issue-token-remove-button {
color: var(--red) !important;
background-color: var(--darker) !important;
}
.add-issuable-form-input {
color: var(--light) !important;
background-color: var(--darken) !important;
}
.related-issues-block .card ul > li:first-child {
border-radius: 3px 3px 0 0;
}
.related-issues-block .card ul > li:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.related-items-tree .item-title a {
color: var(--light) !important;
}
.related-items-tree .item-meta {
color: var(--lighter) !important;
border-color: var(--darker) !important;
}
.related-items-list .item-body.item-closed {
background-color: var(--bb) !important;
border-radius: 3px !important;
}
#merge-requests {
background-color: var(--dark) !important;
}
#merge-requests .card-header {
border-color: var(--darker) !important;
background-color: var(--darken) !important;
border-radius: 3px 3px 0 0;
}
#merge-requests ul li {
background-color: var(--t) !important;
}
.item-assignees:not(#z) .avatar {
border-color: var(--darken) !important;
}
.item-assignees:not(#z) .avatar-counter {
color: var(--light) !important;
background-color: var(--darker) !important;
border-radius: var(--avatar);
}
[class*="-filters"] + div[class]:not([class*="boards"]),
[class*="-filters"] + div[class]:not([class*="boards"]) .card {
background-color: var(--t) !important;
}
[class*="-filters"] + div[class]:not([class*="boards"]) li {
border-top: none;
color: var(--light) !important;
}
[class*="-filters"] + div[class]:not([class*="boards"]) li:hover {
background-color: var(--darken) !important;
}
.done-reversible {
border-top: none !important;
opacity: 0.6;
background-color: var(--t) !important;
}
[class*="-filters"].epics-filters [class*="-toggle"] {
background-color: var(--dark) !important;
}
.card.linked-card::after,
.card.release-block::after {
border-color: var(--darken) !important;
}
.card.linked-card > .card-header,
.card.release-block > .card-header {
background-color: var(--darken) !important;
}
.card.linked-card > .card-body,
.card.release-block > .card-body {
background-color: var(--dark) !important;
}
.card.links-card a {
color: var(--accent) !important;
}
.sortable-container {
background-color: var(--darken) !important;
}
.sortable-container[class*="body"] {
border-radius: 0 0 4px 4px;
}
.sortable-row .sortable-link {
color: var(--accent) !important;
}
.epic-discussion-separator {
border-color: var(--darker) !important;
}
.flex-grid .grid-row,
.flex-grid .grid-cell {
border-color: var(--darker) !important;
}
.flex-grid .property-label {
color: var(--lighter) !important;
}
.flex-grid .property-value {
color: var(--light) !important;
}
.animation-container [class*="skeleton-line-"] {
background-color: var(--darker) !important;
}
.animation-container [class*="skeleton-line-"]::after {
background-image: linear-gradient(
90deg,
var(--darker) 0%,
var(--darken) 50%,
var(--darker)
);
}
[class*="card-skeleton-"]::after {
background-image: linear-gradient(
90deg,
var(--darker) 0%,
var(--darken) 50%,
var(--darker)
);
}
.gl-spinner.gl-spinner-dark {
border-color: var(--darker) !important;
border-top-color: var(--accent) !important;
}
svg.gl-skeleton-loader rect {
fill: var(--darker) !important;
}
.pika-single {
margin-top: 10px;
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
border-radius: 4px;
}
.pika-single .pika-label {
color: var(--light) !important;
background-color: var(--t) !important;
}
.pika-single .pika-prev,
.pika-single .pika-next {
color: var(--light) !important;
text-indent: 0;
background: none;
}
.pika-single .pika-prev::before,
.pika-single .pika-next::before {
display: inline-block;
width: 20px;
}
.pika-single .pika-prev::before {
content: "←";
}
.pika-single .pika-next::before {
content: "→";
}
.pika-single .pika-table {
border: 1px solid var(--darker);
}
.pik
gitextract_3ye_7l94/
├── .babelrc
├── .gitattributes
├── .github/
│ └── FUNDING.yml
├── .gitignore
├── README.md
├── content/
│ ├── src/
│ │ └── scripts/
│ │ ├── components/
│ │ │ ├── Backdrop/
│ │ │ │ ├── Backdrop.jsx
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ ├── Loader/
│ │ │ │ ├── Loader.jsx
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ ├── Pane/
│ │ │ │ ├── Pane.jsx
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ ├── SVG/
│ │ │ │ ├── SVG.jsx
│ │ │ │ ├── assets/
│ │ │ │ │ ├── Branch.jsx
│ │ │ │ │ ├── Close.jsx
│ │ │ │ │ ├── Half.jsx
│ │ │ │ │ ├── Repo.jsx
│ │ │ │ │ └── Search.jsx
│ │ │ │ └── index.js
│ │ │ ├── Toggler/
│ │ │ │ ├── Toggler.jsx
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ └── TreeItem/
│ │ │ ├── TreeItem.jsx
│ │ │ ├── index.js
│ │ │ └── styles.css
│ │ ├── containers/
│ │ │ ├── Resizer/
│ │ │ │ ├── Resizer.jsx
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ ├── SearchBar/
│ │ │ │ ├── SearchBar.jsx
│ │ │ │ ├── SearchBarResult.jsx
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ ├── TreeList/
│ │ │ │ ├── TreeList.jsx
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ └── app/
│ │ │ ├── App.css
│ │ │ ├── App.jsx
│ │ │ └── WebWorker.js
│ │ ├── contexts/
│ │ │ └── OptionsContext.js
│ │ ├── index.js
│ │ ├── libs/
│ │ │ ├── contentDark.js
│ │ │ ├── file-icons.css
│ │ │ └── gitlab-dark.css
│ │ └── utils/
│ │ ├── backgroundColor.js
│ │ ├── browser.js
│ │ ├── file-icons.js
│ │ ├── searchBarWorker.js
│ │ ├── styling.js
│ │ ├── themeList.js
│ │ ├── throttle.js
│ │ ├── url.js
│ │ └── useEventListener.js
│ └── webpack.config.js
├── event/
│ ├── axios.js
│ ├── src/
│ │ ├── actions/
│ │ │ ├── API/
│ │ │ │ └── index.js
│ │ │ └── UI/
│ │ │ └── index.js
│ │ ├── index.js
│ │ ├── reducers/
│ │ │ ├── API/
│ │ │ │ ├── searchTerms.js
│ │ │ │ └── tree.js
│ │ │ ├── UI/
│ │ │ │ ├── clicked.js
│ │ │ │ ├── opened.js
│ │ │ │ ├── options.js
│ │ │ │ ├── pinned.js
│ │ │ │ └── width.js
│ │ │ └── index.js
│ │ └── types/
│ │ ├── API.js
│ │ └── UI.js
│ └── webpack.config.js
├── gulpfile.babel.js
├── license
├── manifest.json
├── package.json
└── popup/
├── src/
│ ├── index.html
│ └── scripts/
│ ├── components/
│ │ ├── app/
│ │ │ ├── App.jsx
│ │ │ └── styles.css
│ │ └── options/
│ │ ├── index.js
│ │ ├── options.jsx
│ │ └── styles.css
│ └── index.js
└── webpack.config.js
SYMBOL INDEX (40 symbols across 24 files)
FILE: content/src/scripts/components/Backdrop/Backdrop.jsx
function Backdrop (line 5) | function Backdrop({ showSearchbar, setShowSearchbar }) {
FILE: content/src/scripts/components/Loader/Loader.jsx
function Loader (line 5) | function Loader({ size }) {
FILE: content/src/scripts/components/Pane/Pane.jsx
function Pane (line 17) | function Pane({
FILE: content/src/scripts/components/SVG/SVG.jsx
function SVG (line 9) | function SVG({ icon, height, style }) {
FILE: content/src/scripts/components/SVG/assets/Branch.jsx
function Branch (line 3) | function Branch({ height, style }) {
FILE: content/src/scripts/components/SVG/assets/Close.jsx
function Close (line 3) | function Close({ height, style }) {
FILE: content/src/scripts/components/SVG/assets/Half.jsx
function Half (line 3) | function Half({ height, style }) {
FILE: content/src/scripts/components/SVG/assets/Repo.jsx
function Repo (line 3) | function Repo({ height, style }) {
FILE: content/src/scripts/components/SVG/assets/Search.jsx
function Search (line 3) | function Search({ height, style }) {
FILE: content/src/scripts/components/Toggler/Toggler.jsx
function Toggle (line 5) | function Toggle({ pinned, handleClick }) {
FILE: content/src/scripts/components/TreeItem/TreeItem.jsx
function TreeItem (line 9) | function TreeItem({
FILE: content/src/scripts/containers/SearchBar/SearchBar.jsx
function SearchBar (line 12) | function SearchBar({
FILE: content/src/scripts/containers/SearchBar/SearchBarResult.jsx
function getAlternatingArray (line 6) | function getAlternatingArray(resultsLoading, query, term) {
function renderHighlightedFileLocation (line 28) | function renderHighlightedFileLocation(resultsLoading, query, term) {
function SearchBarResult (line 54) | function SearchBarResult({
FILE: content/src/scripts/containers/TreeList/TreeList.jsx
function TreeList (line 55) | function TreeList({
FILE: content/src/scripts/containers/app/App.jsx
class App (line 30) | class App extends Component {
method constructor (line 31) | constructor(props) {
method componentDidMount (line 66) | componentDidMount() {
method componentDidUpdate (line 79) | componentDidUpdate(prevProps, prevState) {
method render (line 105) | render() {
FILE: content/src/scripts/containers/app/WebWorker.js
class WebWorker (line 1) | class WebWorker {
method constructor (line 2) | constructor(worker) {
FILE: content/src/scripts/contexts/OptionsContext.js
function OptionsProvider (line 13) | function OptionsProvider({ children, options }) {
FILE: content/src/scripts/libs/contentDark.js
function fireContentLoadedEvent (line 43) | function fireContentLoadedEvent() {
FILE: content/src/scripts/utils/styling.js
function extractE (line 40) | function extractE(transformValue) {
FILE: content/src/scripts/utils/throttle.js
function throttle (line 1) | function throttle(func, wait, options) {
FILE: content/src/scripts/utils/useEventListener.js
function useEventListener (line 3) | function useEventListener(eventName, handler, element = window) {
FILE: event/src/types/API.js
constant FETCH_TREE (line 1) | const FETCH_TREE = "FETCH_TREE";
constant UPDATE_TREE (line 2) | const UPDATE_TREE = "UPDATE_TREE";
constant OPEN_DIR (line 4) | const OPEN_DIR = "OPEN_DIR";
constant CLOSE_DIR (line 5) | const CLOSE_DIR = "CLOSE_DIR";
constant FETCH_SEARCH_TERMS (line 7) | const FETCH_SEARCH_TERMS = "FETCH_SEARCH_TERMS";
FILE: event/src/types/UI.js
constant TOGGLE_PINNED (line 1) | const TOGGLE_PINNED = "TOGGLE_PINNED";
constant TOGGLE_OPENED (line 2) | const TOGGLE_OPENED = "TOGGLE_OPENED";
constant SET_WIDTH (line 4) | const SET_WIDTH = "SET_WIDTH";
constant SET_CLICKED (line 6) | const SET_CLICKED = "SET_CLICKED";
constant OPTIONS_CHANGED (line 8) | const OPTIONS_CHANGED = "OPTIONS_CHANGED";
FILE: popup/src/scripts/components/options/options.jsx
function Option (line 5) | function Option({ id, value, label, type, handleChange }) {
function Options (line 24) | function Options({ options, optionList, changeOptions }) {
Condensed preview — 82 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (536K chars).
[
{
"path": ".babelrc",
"chars": 109,
"preview": "{\n \"presets\": [\"es2015\"],\n \"plugins\": [\"transform-es2015-destructuring\", \"transform-object-rest-spread\"]\n}\n"
},
{
"path": ".gitattributes",
"chars": 94,
"preview": "content/src/scripts/libs/gitlab-dark.css binary\ncontent/src/scripts/libs/file-icons.css binary"
},
{
"path": ".github/FUNDING.yml",
"chars": 754,
"preview": "# These are supported funding model platforms\n\ngithub: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [u"
},
{
"path": ".gitignore",
"chars": 36,
"preview": "node_modules\nbuild\n.idea\n*.DS_Store*"
},
{
"path": "README.md",
"chars": 2638,
"preview": "# 🌳 SpanTree\n\n[](https://gith"
},
{
"path": "content/src/scripts/components/Backdrop/Backdrop.jsx",
"chars": 279,
"preview": "import React from \"react\";\n\nimport \"./styles.css\";\n\nfunction Backdrop({ showSearchbar, setShowSearchbar }) {\n return sh"
},
{
"path": "content/src/scripts/components/Backdrop/index.js",
"chars": 38,
"preview": "export { default } from \"./Backdrop\";\n"
},
{
"path": "content/src/scripts/components/Backdrop/styles.css",
"chars": 151,
"preview": ".spantree-backdrop {\n width: 100%;\n height: 100%;\n position: fixed;\n z-index: 5000;\n left: 0;\n top: 0;\n backgroun"
},
{
"path": "content/src/scripts/components/Loader/Loader.jsx",
"chars": 359,
"preview": "import React from \"react\";\n\nimport \"./styles.css\";\n\nfunction Loader({ size }) {\n const dimInPixel = Number(size.replace"
},
{
"path": "content/src/scripts/components/Loader/index.js",
"chars": 36,
"preview": "export { default } from \"./Loader\";\n"
},
{
"path": "content/src/scripts/components/Loader/styles.css",
"chars": 538,
"preview": ".spantree-loader {\n border-color: #f3f3f3;\n border-radius: 50%;\n border-style: solid;\n border-top-color: rgb(237, 15"
},
{
"path": "content/src/scripts/components/Pane/Pane.jsx",
"chars": 3396,
"preview": "import React, { useState, useEffect, useContext } from \"react\";\nimport { TabIdentifierClient } from \"chrome-tab-identifi"
},
{
"path": "content/src/scripts/components/Pane/index.js",
"chars": 34,
"preview": "export { default } from \"./Pane\";\n"
},
{
"path": "content/src/scripts/components/Pane/styles.css",
"chars": 1095,
"preview": ".spantree-tree-pane {\n position: fixed;\n display: flex;\n box-sizing: border-box;\n height: 100%;\n right: 0px !import"
},
{
"path": "content/src/scripts/components/SVG/SVG.jsx",
"chars": 694,
"preview": "import React from \"react\";\n\nimport Branch from \"./assets/Branch\";\nimport Repo from \"./assets/Repo\";\nimport Close from \"."
},
{
"path": "content/src/scripts/components/SVG/assets/Branch.jsx",
"chars": 965,
"preview": "import React from \"react\";\n\nfunction Branch({ height, style }) {\n let heightSVG = height ? height : \"16\";\n let widthSV"
},
{
"path": "content/src/scripts/components/SVG/assets/Close.jsx",
"chars": 430,
"preview": "import React from \"react\";\n\nfunction Close({ height, style }) {\n let heightSVG = height ? height : \"16\";\n let widthSVG"
},
{
"path": "content/src/scripts/components/SVG/assets/Half.jsx",
"chars": 995,
"preview": "import React from \"react\";\n\nfunction Half({ height, style }) {\n let heightSVG = height ? height : \"9\";\n let widthSVG ="
},
{
"path": "content/src/scripts/components/SVG/assets/Repo.jsx",
"chars": 503,
"preview": "import React from \"react\";\n\nfunction Repo({ height, style }) {\n let heightSVG = height ? height : \"16\";\n let widthSVG "
},
{
"path": "content/src/scripts/components/SVG/assets/Search.jsx",
"chars": 749,
"preview": "import React from \"react\";\n\nfunction Search({ height, style }) {\n let heightSVG = height ? height : \"9\";\n let widthSVG"
},
{
"path": "content/src/scripts/components/SVG/index.js",
"chars": 33,
"preview": "export { default } from \"./SVG\";\n"
},
{
"path": "content/src/scripts/components/Toggler/Toggler.jsx",
"chars": 226,
"preview": "import React from \"react\";\n\nimport \"./styles.css\";\n\nfunction Toggle({ pinned, handleClick }) {\n return (\n <div class"
},
{
"path": "content/src/scripts/components/Toggler/index.js",
"chars": 37,
"preview": "export { default } from \"./Toggler\";\n"
},
{
"path": "content/src/scripts/components/Toggler/styles.css",
"chars": 434,
"preview": ".spantree-toggler {\n position: fixed;\n padding: 4px 8px;\n top: calc(\n 40% + var(--header-height, 0px) + var(--top-"
},
{
"path": "content/src/scripts/components/TreeItem/TreeItem.jsx",
"chars": 4940,
"preview": "import React, { useEffect, useState, useContext } from \"react\";\n\nimport { OptionsContext } from \"../../contexts/OptionsC"
},
{
"path": "content/src/scripts/components/TreeItem/index.js",
"chars": 38,
"preview": "export { default } from \"./TreeItem\";\n"
},
{
"path": "content/src/scripts/components/TreeItem/styles.css",
"chars": 1066,
"preview": ".spantree-tree-element {\n padding: 2px 15px 2px 0px;\n display: flex;\n height: 24px;\n align-items: center;\n width: m"
},
{
"path": "content/src/scripts/containers/Resizer/Resizer.jsx",
"chars": 1632,
"preview": "import React, { useRef } from \"react\";\nimport { connect } from \"react-redux\";\n\nimport { setWidth } from \"../../../../../"
},
{
"path": "content/src/scripts/containers/Resizer/index.js",
"chars": 37,
"preview": "export { default } from \"./Resizer\";\n"
},
{
"path": "content/src/scripts/containers/Resizer/styles.css",
"chars": 126,
"preview": ".spantree-resizer {\n width: 8px;\n position: relative;\n opacity: 100%;\n}\n\n.spantree-resizer:hover {\n cursor: col-resi"
},
{
"path": "content/src/scripts/containers/SearchBar/SearchBar.jsx",
"chars": 7139,
"preview": "import React, { useState, useEffect, useCallback, Fragment } from \"react\";\nimport { connect } from \"react-redux\";\n\nimpor"
},
{
"path": "content/src/scripts/containers/SearchBar/SearchBarResult.jsx",
"chars": 2252,
"preview": "import React, { Fragment } from \"react\";\nimport * as fzy from \"fzy.js\";\n\nimport fileIcons from \"../../utils/file-icons\";"
},
{
"path": "content/src/scripts/containers/SearchBar/index.js",
"chars": 39,
"preview": "export { default } from \"./SearchBar\";\n"
},
{
"path": "content/src/scripts/containers/SearchBar/styles.css",
"chars": 1604,
"preview": ".spantree-search {\n position: fixed;\n z-index: 6000;\n background-color: white;\n min-width: 40%;\n border: 1px solid "
},
{
"path": "content/src/scripts/containers/TreeList/TreeList.jsx",
"chars": 3790,
"preview": "import React, { useState, useEffect, useRef, useCallback } from \"react\";\nimport { connect } from \"react-redux\";\n\nimport "
},
{
"path": "content/src/scripts/containers/TreeList/index.js",
"chars": 38,
"preview": "export { default } from \"./TreeList\";\n"
},
{
"path": "content/src/scripts/containers/TreeList/styles.css",
"chars": 806,
"preview": ".spantree-loader-wrapper {\n height: 100%;\n display: flex;\n justify-content: center;\n align-content: center;\n align-"
},
{
"path": "content/src/scripts/containers/app/App.css",
"chars": 0,
"preview": ""
},
{
"path": "content/src/scripts/containers/app/App.jsx",
"chars": 4685,
"preview": "import React, { Component, Fragment } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { connect } from \"react-red"
},
{
"path": "content/src/scripts/containers/app/WebWorker.js",
"chars": 198,
"preview": "export default class WebWorker {\n constructor(worker) {\n const code = worker.toString();\n const blob = new Blob(["
},
{
"path": "content/src/scripts/contexts/OptionsContext.js",
"chars": 813,
"preview": "import React, { createContext } from \"react\";\nimport { connect } from \"react-redux\";\n\nconst OptionsContext = createConte"
},
{
"path": "content/src/scripts/index.js",
"chars": 1189,
"preview": "import React from \"react\";\nimport { render } from \"react-dom\";\nimport { Provider } from \"react-redux\";\nimport { Store } "
},
{
"path": "content/src/scripts/libs/contentDark.js",
"chars": 2892,
"preview": "// contentDark.js\n// As the main content.js is loaded on \"document_idle\", the dark theme needs to be loaded at the very "
},
{
"path": "content/src/scripts/libs/file-icons.css",
"chars": 57153,
"preview": "/*\n | File Icons\n | @link https://github.com/file-icons\n | @author Daniel Brooker https://github.com/DanBrooker\n */\n\n/* "
},
{
"path": "content/src/scripts/libs/gitlab-dark.css",
"chars": 199381,
"preview": "/* ==UserStyle==\n@name Dark-GitLab Lite\n@namespace gitlab.com/vednoc/dark-gitlab\n@description Dark and light"
},
{
"path": "content/src/scripts/utils/backgroundColor.js",
"chars": 408,
"preview": "const getHeaderBackgroundColor = (options) => {\n if (\"auto-theme\" in options && options[\"auto-theme\"]) {\n const fetc"
},
{
"path": "content/src/scripts/utils/browser.js",
"chars": 923,
"preview": "const isWindowObject = (value) => {\n return value != null && typeof value === \"object\" && \"setInterval\" in value;\n};\n\nc"
},
{
"path": "content/src/scripts/utils/file-icons.js",
"chars": 161389,
"preview": "/**\n * ╭─╮ ┬ ┬ ╭─╮ ┬ ╭─╮ ╭─╮ ╭╮╭ ╭─╮\n * ├┤ │ │ ├┤ │ │ │ │ │││ ╰─╮\n * ┴ ┴ ┴─╯ ╰─╯ ┴ ╰─╯ ╰─╯ ╯╰╯ ╰─╯\n *"
},
{
"path": "content/src/scripts/utils/searchBarWorker.js",
"chars": 4785,
"preview": "export default () => {\n self.addEventListener(\"message\", (e) => {\n if (!e) return;\n let searchTerms = e.data.sear"
},
{
"path": "content/src/scripts/utils/styling.js",
"chars": 2238,
"preview": "export const applyOpenedPageStyling = (width) => {\n if (document.querySelector(\"nav.super-sidebar\")) {\n document.que"
},
{
"path": "content/src/scripts/utils/themeList.js",
"chars": 1221,
"preview": "import { browserKey } from \"./browser\";\n\nexport const switchTheme = () => {\n const domain = location.origin;\n let them"
},
{
"path": "content/src/scripts/utils/throttle.js",
"chars": 914,
"preview": "export function throttle(func, wait, options) {\n let context, args, result;\n let timeout = null;\n let previous = 0;\n "
},
{
"path": "content/src/scripts/utils/url.js",
"chars": 1699,
"preview": "export const fetchURLDetails = () => {\n const pathName = window.location.pathname;\n const pathNameSplit = pathName\n "
},
{
"path": "content/src/scripts/utils/useEventListener.js",
"chars": 604,
"preview": "import { useRef, useEffect } from \"react\";\n\nfunction useEventListener(eventName, handler, element = window) {\n const sa"
},
{
"path": "content/webpack.config.js",
"chars": 803,
"preview": "const path = require(\"path\");\n\nmodule.exports = {\n mode: process.env.NODE_ENV === \"production\" ? \"production\" : \"develo"
},
{
"path": "event/axios.js",
"chars": 165,
"preview": "import axios from \"axios\";\n\nconst options = {\n baseURL: `${window.location.origin}/api/v4/projects/`,\n};\n\nconst inst = "
},
{
"path": "event/src/actions/API/index.js",
"chars": 1661,
"preview": "import axiosOriginal from \"axios\";\n\nimport * as types from \"../../types/API\";\nimport store from \"../../../../content/src"
},
{
"path": "event/src/actions/UI/index.js",
"chars": 683,
"preview": "import * as types from \"../../types/UI\";\nimport store from \"../../../../content/src/scripts\";\n\nexport const togglePinned"
},
{
"path": "event/src/index.js",
"chars": 372,
"preview": "import thunk from \"redux-thunk\";\nimport { createStore } from \"redux\";\nimport { TabIdentifier } from \"chrome-tab-identifi"
},
{
"path": "event/src/reducers/API/searchTerms.js",
"chars": 437,
"preview": "import { FETCH_SEARCH_TERMS } from \"../../types/API\";\n\nconst initialState = {};\n\nexport default (state = initialState, a"
},
{
"path": "event/src/reducers/API/tree.js",
"chars": 3225,
"preview": "import produce from \"immer\";\n\nimport { FETCH_TREE, OPEN_DIR, CLOSE_DIR, UPDATE_TREE } from \"../../types/API\";\n\nconst ini"
},
{
"path": "event/src/reducers/UI/clicked.js",
"chars": 243,
"preview": "import { SET_CLICKED } from \"../../types/UI\";\n\nconst initialState = false;\n\nexport default (state = initialState, action"
},
{
"path": "event/src/reducers/UI/opened.js",
"chars": 413,
"preview": "import { TOGGLE_OPENED } from \"../../types/UI\";\n\nconst initialState = {};\n\nexport default (state = initialState, action)"
},
{
"path": "event/src/reducers/UI/options.js",
"chars": 412,
"preview": "import { OPTIONS_CHANGED } from \"../../types/UI\";\n\nexport const intitialState = {\n data: {},\n version: 0,\n};\n\nexport d"
},
{
"path": "event/src/reducers/UI/pinned.js",
"chars": 239,
"preview": "import { TOGGLE_PINNED } from \"../../types/UI\";\n\nconst initialState = false;\n\nexport default (state = initialState, acti"
},
{
"path": "event/src/reducers/UI/width.js",
"chars": 237,
"preview": "import { SET_WIDTH } from \"../../types/UI\";\n\nconst initialWidth = 250;\n\nexport default (state = initialWidth, action) =>"
},
{
"path": "event/src/reducers/index.js",
"chars": 402,
"preview": "import { combineReducers } from \"redux\";\n\nimport opened from \"./UI/opened\";\nimport pinned from \"./UI/pinned\";\nimport wid"
},
{
"path": "event/src/types/API.js",
"chars": 214,
"preview": "export const FETCH_TREE = \"FETCH_TREE\";\nexport const UPDATE_TREE = \"UPDATE_TREE\";\n\nexport const OPEN_DIR = \"OPEN_DIR\";\ne"
},
{
"path": "event/src/types/UI.js",
"chars": 225,
"preview": "export const TOGGLE_PINNED = \"TOGGLE_PINNED\";\nexport const TOGGLE_OPENED = \"TOGGLE_OPENED\";\n\nexport const SET_WIDTH = \"S"
},
{
"path": "event/webpack.config.js",
"chars": 679,
"preview": "const path = require(\"path\");\n\nmodule.exports = {\n mode: process.env.NODE_ENV === \"production\" ? \"production\" : \"develo"
},
{
"path": "gulpfile.babel.js",
"chars": 1763,
"preview": "import gulp from \"gulp\";\nimport webpack from \"webpack\";\nimport rimraf from \"rimraf\";\nimport log from \"fancy-log\";\nimport"
},
{
"path": "license",
"chars": 1070,
"preview": "MIT License\n\nCopyright (c) 2021 Taveesh Anand\n\nPermission is hereby granted, free of charge, to any person obtaining a c"
},
{
"path": "manifest.json",
"chars": 946,
"preview": "{\n \"manifest_version\": 3,\n \"name\": \"SpanTree\",\n \"description\": \"Tree for Gitlab\",\n \"version\": \"0.0.5.2\",\n \"backgrou"
},
{
"path": "package.json",
"chars": 1123,
"preview": "{\n \"name\": \"span-tree\",\n \"version\": \"0.0.1\",\n \"description\": \"Tree for Gitlab\",\n \"scripts\": {\n \"start\": \"gulp && "
},
{
"path": "popup/src/index.html",
"chars": 358,
"preview": "<!DOCTYPE html>\n<html class=\"no-js\" lang=\"\">\n <head>\n <meta charset=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible"
},
{
"path": "popup/src/scripts/components/app/App.jsx",
"chars": 931,
"preview": "import React from \"react\";\nimport { connect } from \"react-redux\";\n\nimport Options from \"../options\";\n\nimport \"./styles.c"
},
{
"path": "popup/src/scripts/components/app/styles.css",
"chars": 436,
"preview": "body {\n margin: 0;\n}\n\n.spantree-popup {\n font-family: Arial, Helvetica, sans-serif;\n width: 200px;\n padding: 0;\n ma"
},
{
"path": "popup/src/scripts/components/options/index.js",
"chars": 37,
"preview": "export { default } from \"./options\";\n"
},
{
"path": "popup/src/scripts/components/options/options.jsx",
"chars": 974,
"preview": "import React from \"react\";\n\nimport \"./styles.css\";\n\nfunction Option({ id, value, label, type, handleChange }) {\n switch"
},
{
"path": "popup/src/scripts/components/options/styles.css",
"chars": 240,
"preview": ".option {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin: 8px;\n}\n\n.option:hover {\n "
},
{
"path": "popup/src/scripts/index.js",
"chars": 417,
"preview": "import React from \"react\";\nimport { render } from \"react-dom\";\n\nimport App from \"./components/app/App\";\n\nimport { Store "
},
{
"path": "popup/webpack.config.js",
"chars": 791,
"preview": "const path = require(\"path\");\n\nmodule.exports = {\n mode: process.env.NODE_ENV === \"production\" ? \"production\" : \"develo"
}
]
About this extraction
This page contains the full source code of the tavyandy97/span-tree GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 82 files (486.4 KB), approximately 143.9k tokens, and a symbol index with 40 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.