diff options
Diffstat (limited to 'web_src/css')
42 files changed, 11640 insertions, 0 deletions
diff --git a/web_src/css/admin.css b/web_src/css/admin.css new file mode 100644 index 0000000000..00ed675e2d --- /dev/null +++ b/web_src/css/admin.css @@ -0,0 +1,110 @@ +.admin.hooks .list > .item:not(:first-child) { + border-top: 1px solid var(--color-secondary); + padding: 0.25rem 1rem; + margin: 12px -1rem -1rem; +} + +.admin .table.segment { + padding: 0; + font-size: 13px; + overflow-x: auto; +} + +.admin .table.segment:not(.striped) thead th:last-child { + padding-right: 5px !important; +} + +.admin .table.segment th { + padding-top: 5px; + padding-bottom: 5px; +} + +.admin .table.segment:not(.select) th:first-of-type, +.admin .table.segment:not(.select) td:first-of-type { + padding-left: 15px !important; +} + +.admin .table.segment form tbody button[type="submit"] { + padding: 5px 8px; +} + +.admin .settings .button.adopt, +.admin .settings .button.delete { + margin-top: -15px; + margin-bottom: -15px; +} + +.admin .settings .button.adopt .label, +.admin .settings .button.delete .label { + vertical-align: middle; +} + +.admin.user .email { + max-width: 200px; +} + +.admin dl.admin-dl-horizontal { + padding: 20px; + margin: 0; +} + +.admin dl.admin-dl-horizontal dd { + margin-left: 275px; +} + +@media (max-width: 767px) { + .admin dl.admin-dl-horizontal dd { + margin-left: 5%; + } +} + +.admin dl.admin-dl-horizontal dt { + font-weight: 600; + float: left; + width: 285px; + clear: left; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +@media (max-width: 767px) { + .admin dl.admin-dl-horizontal dt { + width: auto; + margin-right: 0.5em; + } +} + +.admin.config #test-mail-btn { + margin-left: 5px; +} + +.admin code, +.admin pre { + white-space: pre-wrap; + word-wrap: break-word; +} + +@media (max-width: 767px) { + .admin #notice-table .notice-description { + max-width: 80vw; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .admin #notice-table .notice-description { + max-width: 360px; + } +} + +@media (min-width: 992px) and (max-width: 1200px) { + .admin #notice-table .notice-description { + max-width: 510px; + } +} + +@media (min-width: 1201px) { + .admin #notice-table .notice-description { + max-width: 640px; + } +} diff --git a/web_src/css/animations.css b/web_src/css/animations.css new file mode 100644 index 0000000000..689898da2a --- /dev/null +++ b/web_src/css/animations.css @@ -0,0 +1,81 @@ +@keyframes isloadingspin { + 0% { transform: translate(-50%, -50%) rotate(0deg); } + 100% { transform: translate(-50%, -50%) rotate(360deg); } +} + +.is-loading { + background: transparent !important; + color: transparent !important; + border: transparent !important; + pointer-events: none !important; + position: relative !important; + overflow: hidden !important; +} + +.is-loading::after { + content: ""; + position: absolute; + display: block; + width: 4rem; + height: 4rem; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + animation: isloadingspin 500ms infinite linear; + border-width: 4px; + border-style: solid; + border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8); + border-radius: 100%; +} + +.markup pre.is-loading, +.editor-loading.is-loading { + height: var(--height-loading); +} + +.btn-octicon.is-loading::after { + border-width: 2px; + height: 1.25rem; + width: 1.25rem; +} + +code.language-math.is-loading::after { + padding: 0; + border-width: 2px; + width: 1.25rem; + height: 1.25rem; +} + +@keyframes fadein { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes fadeout { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +@keyframes pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.8); + } + 100% { + transform: scale(1); + } +} + +.pulse { + animation: pulse 2s linear; +} diff --git a/web_src/css/base.css b/web_src/css/base.css new file mode 100644 index 0000000000..225359b765 --- /dev/null +++ b/web_src/css/base.css @@ -0,0 +1,2762 @@ +:root { + /* fonts */ + --fonts-proportional: -apple-system, "Segoe UI", system-ui, "Roboto", "Helvetica Neue", "Arial"; + --fonts-monospace: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace, var(--fonts-emoji); + --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"; + /* backgrounds */ + --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>'); + --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>'); + /* non-color variables */ + --border-radius: 0.28571429rem; + --opacity-disabled: 0.55; + --height-loading: 12rem; + /* base colors */ + --color-primary: #4183c4; + --color-primary-contrast: #ffffff; + --color-primary-dark-1: #3876b3; + --color-primary-dark-2: #31699f; + --color-primary-dark-3: #2b5c8b; + --color-primary-dark-4: #254f77; + --color-primary-dark-5: #193450; + --color-primary-dark-6: #0c1a28; + --color-primary-dark-7: #04080c; + --color-primary-light-1: #548fca; + --color-primary-light-2: #679cd0; + --color-primary-light-3: #7aa8d6; + --color-primary-light-4: #8db5dc; + --color-primary-light-5: #b3cde7; + --color-primary-light-6: #d9e6f3; + --color-primary-light-7: #f4f8fb; + --color-primary-alpha-10: #4183c419; + --color-primary-alpha-20: #4183c433; + --color-primary-alpha-30: #4183c44b; + --color-primary-alpha-40: #4183c466; + --color-primary-alpha-50: #4183c480; + --color-primary-alpha-60: #4183c499; + --color-primary-alpha-70: #4183c4b3; + --color-primary-alpha-80: #4183c4cc; + --color-primary-alpha-90: #4183c4e1; + --color-secondary: #dedede; + --color-secondary-dark-1: #cecece; + --color-secondary-dark-2: #bfbfbf; + --color-secondary-dark-3: #a0a0a0; + --color-secondary-dark-4: #909090; + --color-secondary-dark-5: #818181; + --color-secondary-dark-6: #717171; + --color-secondary-dark-7: #626262; + --color-secondary-dark-8: #525252; + --color-secondary-dark-9: #434343; + --color-secondary-dark-10: #333333; + --color-secondary-dark-11: #242424; + --color-secondary-dark-12: #141414; + --color-secondary-dark-13: #040404; + --color-secondary-light-1: #e5e5e5; + --color-secondary-light-2: #ebebeb; + --color-secondary-light-3: #f2f2f2; + --color-secondary-light-4: #f8f8f8; + --color-secondary-alpha-10: #dedede19; + --color-secondary-alpha-20: #dedede33; + --color-secondary-alpha-30: #dedede4b; + --color-secondary-alpha-40: #dedede66; + --color-secondary-alpha-50: #dedede80; + --color-secondary-alpha-60: #dedede99; + --color-secondary-alpha-70: #dededeb3; + --color-secondary-alpha-80: #dededecc; + --color-secondary-alpha-90: #dededee1; + /* console colors */ + --color-console-fg: #ffffff; + --color-console-bg: #171717; + /* named colors */ + --color-red: #db2828; + --color-orange: #f2711c; + --color-yellow: #fbbd08; + --color-olive: #b5cc18; + --color-green: #21ba45; + --color-teal: #00b5ad; + --color-blue: #2185d0; + --color-violet: #6435c9; + --color-purple: #a333c8; + --color-pink: #e03997; + --color-brown: #a5673f; + --color-grey: #888888; + --color-black: #1b1c1d; + /* light variants - produced via Sass scale-color(color, $lightness: +25%) */ + --color-red-light: #e45e5e; + --color-orange-light: #f59555; + --color-yellow-light: #fcce46; + --color-olive-light: #d3e942; + --color-green-light: #46de6a; + --color-teal-light: #08fff4; + --color-blue-light: #51a5e3; + --color-violet-light: #8b67d7; + --color-purple-light: #bb64d8; + --color-pink-light: #e86bb1; + --color-brown-light: #c58b66; + --color-grey-light: #a6a6a6; + --color-black-light: #525558; + /* other colors */ + --color-gold: #a1882b; + --color-white: #ffffff; + --color-diff-removed-word-bg: #fdb8c0; + --color-diff-added-word-bg: #acf2bd; + --color-diff-removed-row-bg: #ffeef0; + --color-diff-moved-row-bg: #f1f8d1; + --color-diff-added-row-bg: #e6ffed; + --color-diff-removed-row-border: #f1c0c0; + --color-diff-moved-row-border: #d0e27f; + --color-diff-added-row-border: #e6ffed; + --color-diff-inactive: #f2f2f2; + --color-error-border: #e0b4b4; + --color-error-bg: #fff6f6; + --color-error-bg-active: #fbb; + --color-error-bg-hover: #fdd; + --color-error-text: #9f3a38; + --color-success-border: #a3c293; + --color-success-bg: #fcfff5; + --color-success-text: #2c662d; + --color-warning-border: #c9ba9b; + --color-warning-bg: #fffaf3; + --color-warning-text: #573a08; + --color-info-border: #a9d5de; + --color-info-bg: #f8ffff; + --color-info-text: #276f86; + --color-red-badge: #db2828; + --color-red-badge-bg: #db28281a; + --color-red-badge-hover-bg: #db28284d; + --color-green-badge: #21ba45; + --color-green-badge-bg: #21ba451a; + --color-green-badge-hover-bg: #21ba454d; + --color-yellow-badge: #fbbd08; + --color-yellow-badge-bg: #fbbd081a; + --color-yellow-badge-hover-bg: #fbbd084d; + --color-orange-badge: #f2711c; + --color-orange-badge-bg: #f2711c1a; + --color-orange-badge-hover-bg: #f2711c4d; + --color-git: #f05133; + /* target-based colors */ + --color-body: #ffffff; + --color-text-dark: #080808; + --color-text: #212121; + --color-text-light: #555555; + --color-text-light-1: #6a6a6a; + --color-text-light-2: #808080; + --color-text-light-3: #a0a0a0; + --color-box-header: #f7f7f7; + --color-box-body: #ffffff; + --color-box-body-highlight: #f8f8f8; + --color-footer: #ffffff; + --color-timeline: #ececec; + --color-input-text: #212121; + --color-input-background: #ffffff; + --color-input-toggle-background: #dedede; + --color-input-border: #dedede; + --color-input-border-hover: #cecece; + --color-navbar: #f8f8f8; + --color-navbar-transparent: #f8f8f800; + --color-light: #00000006; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #0000001d; + --color-hover: #0000000c; + --color-active: #00000014; + --color-menu: #ffffff; + --color-card: #ffffff; + --color-markup-table-row: #00000008; + --color-markup-code-block: #00000010; + --color-button: #ffffff; + --color-code-bg: #ffffff; + --color-code-sidebar-bg: #f5f5f5; + --color-shadow: #00000030; + --color-secondary-bg: #f4f4f4; + --color-expand-button: #d8efff; + --color-placeholder-text: #aaa; + --color-editor-line-highlight: var(--color-primary-light-6); + --color-project-board-bg: var(--color-secondary-light-4); + --color-project-board-dark-label: #555555; + --color-project-board-light-label: #a6aab5; + --color-caret: var(--color-text-dark); + --color-reaction-bg: #0000000a; + --color-reaction-active-bg: var(--color-primary-alpha-20); + --color-tooltip-bg: #000000f0; + --color-tooltip-text: #ffffff; + --color-header-bar: #ffffff; + --color-label-active-bg: #d0d0d0; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-6); + --color-active-line: #fffbdd; + accent-color: var(--color-accent); + color-scheme: light; +} + +:root * { + --fonts-regular: var(--fonts-override, var(--fonts-proportional)), "Noto Sans", "Liberation Sans", sans-serif, var(--fonts-emoji); +} + +textarea { + font-family: var(--fonts-regular); +} + +pre, +code, +kbd, +samp { + font-size: 0.9em; /* compensate for monospace fonts being usually slightly larger */ + font-family: var(--fonts-monospace); +} + +b, +strong, +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 600; +} + +body { + color: var(--color-text); + background-color: var(--color-body); + overflow-y: auto; + display: flex; + flex-direction: column; + overflow-wrap: break-word; +} + +@supports (overflow: overlay) { + body { + overflow: overlay; /* stylelint-disable-line */ + scrollbar-gutter: stable; + } +} + +img { + border-radius: 3px; +} + +table { + border-collapse: collapse; +} + +details summary { + cursor: pointer; +} + +details summary > * { + display: inline; +} + +progress { + background: var(--color-secondary-dark-1); + border-radius: 6px; + border: none; + overflow: hidden; +} + +progress::-webkit-progress-bar { + background: var(--color-secondary-dark-1); +} + +progress::-webkit-progress-value { + background-color: var(--color-accent); +} + +progress::-moz-progress-bar { + background-color: var(--color-accent); +} + +* { + scrollbar-color: var(--color-primary) transparent; + caret-color: var(--color-caret); +} + +::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 0 6px var(--color-primary); + border: 2px solid transparent; + border-radius: 5px !important; +} + +::-webkit-scrollbar-thumb:window-inactive { + box-shadow: inset 0 0 0 6px var(--color-primary); +} + +::-webkit-scrollbar-thumb:hover { + box-shadow: inset 0 0 0 6px var(--color-primary-dark-2); +} + +::-webkit-scrollbar-corner { + background: transparent; +} + +::file-selector-button { + border: 1px solid var(--color-light-border); + color: var(--color-text-light); + background: var(--color-light); + border-radius: var(--border-radius); +} + +::file-selector-button:hover { + color: var(--color-text); + background: var(--color-hover); +} + +::selection { + background: var(--color-primary-light-1) !important; + color: var(--color-white) !important; +} + +::placeholder, +.ui.dropdown:not(.button) > .default.text, +.ui.default.dropdown:not(.button) > .text { + color: var(--color-placeholder-text) !important; + opacity: 1 !important; +} + +.unselectable, +.button, +.lines-num, +.lines-commit, +.lines-commit .blame-info, +.ellipsis-button { + -webkit-touch-callout: none; + -webkit-user-select: none; + user-select: none; +} + +a, +.ui.breadcrumb a { + color: var(--color-primary); + cursor: pointer; + text-decoration-skip-ink: all; +} + +a.muted, +.muted-links a { + color: inherit; +} + +a:hover, +a.muted:hover, +a.muted:hover [class*="color-text"], +.muted-links a:hover, +.ui.breadcrumb a:hover { + color: var(--color-primary); +} + +.delete-button, +.delete-button:hover { + color: var(--color-red); +} + +a.label, +.repository-menu a, +.ui.search .results a, +.ui .menu a, +.ui.cards a.card, +.issue-keyword a { + text-decoration: none !important; +} + +.ui.red.labels .label, +.ui.ui.ui.red.label, +.ui.red.button, +.ui.red.buttons .button { + background: var(--color-red); +} + +.ui.red.button:hover, +.ui.red.buttons .button:hover { + background: var(--color-red-light); +} + +.ui.basic.red.buttons .button, +.ui.basic.red.button { + color: var(--color-red); + border-color: var(--color-red); +} + +.ui.basic.red.buttons .button:hover, +.ui.basic.red.button:hover { + color: var(--color-red-light); + border-color: var(--color-red-light); +} + +.ui.orange.labels .label, +.ui.ui.ui.orange.label, +.ui.orange.button, +.ui.orange.buttons .button { + background: var(--color-orange); +} + +.ui.orange.button:hover, +.ui.orange.buttons .button:hover { + background: var(--color-orange-light); +} + +.ui.basic.orange.buttons .button, +.ui.basic.orange.button { + color: var(--color-orange); + border-color: var(--color-orange); +} + +.ui.basic.orange.buttons .button:hover, +.ui.basic.orange.button:hover { + color: var(--color-orange-light); + border-color: var(--color-orange-light); +} + +.ui.yellow.labels .label, +.ui.ui.ui.yellow.label, +.ui.yellow.button, +.ui.yellow.buttons .button { + background: var(--color-yellow); +} + +.ui.yellow.button:hover, +.ui.yellow.buttons .button:hover { + background: var(--color-yellow-light); +} + +.ui.basic.yellow.buttons .button, +.ui.basic.yellow.button { + color: var(--color-yellow); + border-color: var(--color-yellow); +} + +.ui.basic.yellow.buttons .button:hover, +.ui.basic.yellow.button:hover { + color: var(--color-yellow-light); + border-color: var(--color-yellow-light); +} + +.ui.olive.labels .label, +.ui.ui.ui.olive.label, +.ui.olive.button, +.ui.olive.buttons .button { + background: var(--color-olive); +} + +.ui.olive.button:hover, +.ui.olive.buttons .button:hover { + background: var(--color-olive-light); +} + +.ui.basic.olive.buttons .button, +.ui.basic.olive.button { + color: var(--color-olive); + border-color: var(--color-olive); +} + +.ui.basic.olive.buttons .button:hover, +.ui.basic.olive.button:hover { + color: var(--color-olive-light); + border-color: var(--color-olive-light); +} + +.ui.green.labels .label, +.ui.ui.ui.green.label, +.ui.green.button, +.ui.green.buttons .button { + background: var(--color-green); +} + +.ui.green.button:hover, +.ui.green.buttons .button:hover { + background: var(--color-green-light); +} + +.ui.basic.green.buttons .button, +.ui.basic.green.button { + color: var(--color-green); + border-color: var(--color-green); +} + +.ui.basic.green.buttons .button:hover, +.ui.basic.green.button:hover { + color: var(--color-green-light); + border-color: var(--color-green-light); +} + +.ui.teal.labels .label, +.ui.ui.ui.teal.label, +.ui.teal.button, +.ui.teal.buttons .button { + background: var(--color-teal); +} + +.ui.teal.button:hover, +.ui.teal.buttons .button:hover { + background: var(--color-teal-light); +} + +.ui.basic.teal.buttons .button, +.ui.basic.teal.button { + color: var(--color-teal); + border-color: var(--color-teal); +} + +.ui.basic.teal.buttons .button:hover, +.ui.basic.teal.button:hover { + color: var(--color-teal-light); + border-color: var(--color-teal-light); +} + +.ui.blue.labels .label, +.ui.ui.ui.blue.label, +.ui.blue.button, +.ui.blue.buttons .button { + background: var(--color-blue); +} + +.ui.blue.button:hover, +.ui.blue.buttons .button:hover { + background: var(--color-blue-light); +} + +.ui.basic.blue.buttons .button, +.ui.basic.blue.button { + color: var(--color-blue); + border-color: var(--color-blue); +} + +.ui.basic.blue.buttons .button:hover, +.ui.basic.blue.button:hover { + color: var(--color-blue-light); + border-color: var(--color-blue-light); +} + +.ui.violet.labels .label, +.ui.ui.ui.violet.label, +.ui.violet.button, +.ui.violet.buttons .button { + background: var(--color-violet); +} + +.ui.violet.button:hover, +.ui.violet.buttons .button:hover { + background: var(--color-violet-light); +} + +.ui.basic.violet.buttons .button, +.ui.basic.violet.button { + color: var(--color-violet); + border-color: var(--color-violet); +} + +.ui.basic.violet.buttons .button:hover, +.ui.basic.violet.button:hover { + color: var(--color-violet-light); + border-color: var(--color-violet-light); +} + +.ui.purple.labels .label, +.ui.ui.ui.purple.label, +.ui.purple.button, +.ui.purple.buttons .button { + background: var(--color-purple); +} + +.ui.purple.button:hover, +.ui.purple.buttons .button:hover { + background: var(--color-purple-light); +} + +.ui.basic.purple.buttons .button, +.ui.basic.purple.button { + color: var(--color-purple); + border-color: var(--color-purple); +} + +.ui.basic.purple.buttons .button:hover, +.ui.basic.purple.button:hover { + color: var(--color-purple-light); + border-color: var(--color-purple-light); +} + +.ui.pink.labels .label, +.ui.ui.ui.pink.label, +.ui.pink.button, +.ui.pink.buttons .button { + background: var(--color-pink); +} + +.ui.pink.button:hover, +.ui.pink.buttons .button:hover { + background: var(--color-pink-light); +} + +.ui.basic.pink.buttons .button, +.ui.basic.pink.button { + color: var(--color-pink); + border-color: var(--color-pink); +} + +.ui.basic.pink.buttons .button:hover, +.ui.basic.pink.button:hover { + color: var(--color-pink-light); + border-color: var(--color-pink-light); +} + +.ui.brown.labels .label, +.ui.ui.ui.brown.label, +.ui.brown.button, +.ui.brown.buttons .button { + background: var(--color-brown); +} + +.ui.brown.button:hover, +.ui.brown.buttons .button:hover { + background: var(--color-brown-light); +} + +.ui.basic.brown.buttons .button, +.ui.basic.brown.button { + color: var(--color-brown); + border-color: var(--color-brown); +} + +.ui.basic.brown.buttons .button:hover, +.ui.basic.brown.button:hover { + color: var(--color-brown-light); + border-color: var(--color-brown-light); +} + +.ui.grey.labels .label, +.ui.ui.ui.grey.label, +.ui.grey.button, +.ui.grey.buttons .button { + background: var(--color-grey); +} + +.ui.grey.button:hover, +.ui.grey.buttons .button:hover { + background: var(--color-grey-light); +} + +.ui.basic.grey.buttons .button, +.ui.basic.grey.button { + color: var(--color-grey); + border-color: var(--color-grey); +} + +.ui.basic.grey.buttons .button:hover, +.ui.basic.grey.button:hover { + color: var(--color-grey-light); + border-color: var(--color-grey-light); +} + +.ui.black.labels .label, +.ui.ui.ui.black.label, +.ui.black.button, +.ui.black.buttons .button { + background: var(--color-black); +} + +.ui.black.button:hover, +.ui.black.buttons .button:hover { + background: var(--color-black-light); +} + +.ui.basic.black.buttons .button, +.ui.basic.black.button { + color: var(--color-black); + border-color: var(--color-black); +} + +.ui.basic.black.buttons .button:hover, +.ui.basic.black.button:hover { + color: var(--color-black-light); + border-color: var(--color-black-light); +} + +.ui.negative.buttons .button, +.ui.negative.button { + background: var(--color-red); +} + +.ui.negative.buttons .button:hover, +.ui.negative.button:hover { + background: var(--color-red-light); +} + +.ui.positive.buttons .button, +.ui.positive.button { + background: var(--color-green); +} + +.ui.positive.buttons .button:hover, +.ui.positive.button:hover { + background: var(--color-green-light); +} + +.ui.search > .results { + background: var(--color-body); + border-color: var(--color-secondary); +} + +.ui.search > .results .result { + background: var(--color-body); +} + +.ui.search > .results .result .title { + color: var(--color-text-dark); +} + +.ui.search > .results .result .description { + color: var(--color-text-light-2); +} + +.ui.search > .results .result .image { + width: auto; + height: auto; +} + +.ui.search > .results .result:hover, +.ui.category.search > .results .category .result:hover { + background: var(--color-hover); +} + +.issue-title code { + padding: 2px 4px; + border-radius: 6px; + background-color: var(--color-markup-code-block); +} + +/* try to match button with no icons in height */ +.icon-button { + padding-top: 7.42px !important; + padding-bottom: 7.42px !important; +} + +.ui.breadcrumb a:hover { + text-decoration: underline !important; +} + +.ui.breadcrumb .divider { + color: var(--color-text-light-2); +} + +.ui.divider:not(.vertical,.horizontal) { + border-top-color: var(--color-secondary) !important; + border-bottom: none !important; +} + +.ui.dividing.header { + border-bottom-color: var(--color-secondary); +} + +.page-content { + margin-top: 15px; +} + +.page-content .header-wrapper, +.page-content .new-menu { + margin-top: -15px !important; + padding-top: 15px !important; +} + +.ui.input.focus > input, +.ui.input > input:focus { + border-color: var(--color-primary); +} + +/* currently used for search bar dropdowns in repo search and explore code */ +.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection { + min-width: 10em; +} + +.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus,:hover) { + border-right-color: transparent; +} + +.ui.action.input:not([class*="left action"]) > input:focus { + border-right-color: var(--color-primary); +} + +.ui.menu, +.ui.vertical.menu { + background: var(--color-menu); + border-color: var(--color-secondary); +} + +.ui.menu .item { + color: var(--color-text); + user-select: auto; +} + +.ui.menu .item > .svg { + margin-right: 0.35em; +} + +.ui.menu .item > .label { + background: var(--color-grey); +} + +.ui.active.label { + background: var(--color-label-active-bg); + border-color: var(--color-label-active-bg); + color: var(--color-text-dark); +} + +.ui.link.menu .item:hover, +.ui.menu .dropdown.item:hover, +.ui.menu .link.item:hover, +.ui.menu a.item:hover { + color: var(--color-text); + background: var(--color-hover); +} + +.ui.menu .active.item, +.ui.menu .active.item:hover, +.ui.vertical.menu .active.item, +.ui.vertical.menu .active.item:hover { + color: var(--color-text); + background: var(--color-active); +} + +.ui.link.menu .item:active, +.ui.menu .link.item:active, +.ui.menu a.item:active { + color: var(--color-text); + background: none; +} + +.ui.ui.menu .item.disabled { + color: var(--color-text-light-3); +} + +/* slightly more contrast for filters on issue list */ +.ui.ui.menu .dropdown.item.disabled { + color: var(--color-text-light-2); +} + +.ui.dropdown .menu { + background: var(--color-menu); + border-color: var(--color-secondary); +} + +.ui.dropdown .menu > .header:not(.ui) { + color: var(--color-text); +} + +.ui.dropdown .menu > .item { + color: var(--color-text); +} + +.ui.dropdown .menu > .item:hover { + color: var(--color-text); + background: var(--color-hover); +} + +.ui.dropdown .menu .active.item { + color: var(--color-text); + background: var(--color-active); + font-weight: normal; +} + +/* fix misaligned images in webhook dropdown */ +.ui.dropdown .menu > .item > img { + margin-top: -0.25rem; + margin-bottom: -0.25rem; +} + +.ui.dropdown .menu > .item > svg.img { + margin-right: 0.78571429rem; +} + +.ui.selection.dropdown .menu > .item { + border-color: var(--color-secondary); +} + +.ui.selection.visible.dropdown > .text:not(.default) { + color: var(--color-text); +} + +.ui.dropdown.selected, +.ui.dropdown .menu .selected.item { + color: var(--color-text); + background: var(--color-hover); +} + +.ui.menu .ui.dropdown .menu > .selected.item { + color: var(--color-text) !important; + background: var(--color-hover) !important; +} + +.ui.dropdown .menu > .message:not(.ui) { + color: var(--color-text-light-2); +} + +.ui.list .list > .item .header, +.ui.list > .item .header { + color: var(--color-text-dark); +} + +.ui.list .list > .item > .content, +.ui.list > .item > .content { + color: var(--color-text); +} + +.ui.list .list > .item .description, +.ui.list > .item .description { + color: var(--color-text); +} + +.ui.secondary.menu .dropdown.item:hover, +.ui.secondary.menu .link.item:hover, +.ui.secondary.menu a.item:hover { + color: var(--color-text); + background: var(--color-hover); +} + +.ui.secondary.menu .active.item, +.ui.secondary.menu .active.item:hover { + color: var(--color-text); + background: var(--color-active); +} + +.ui.secondary.menu.tight .item { + padding-left: 0.85714286em; + padding-right: 0.85714286em; +} + +.ui.menu .dropdown.item .menu { + background: var(--color-menu); +} + +.ui.menu .ui.dropdown .menu > .item { + color: var(--color-text) !important; +} + +.ui.menu .ui.dropdown .menu > .item:hover { + color: var(--color-text) !important; + background: var(--color-hover) !important; +} + +.ui.menu .ui.dropdown .menu > .active.item { + color: var(--color-text) !important; + background: var(--color-active) !important; +} + +.ui.message { + background: var(--color-box-body); + color: var(--color-text); + box-shadow: none !important; + border: 1px solid var(--color-secondary); +} + +.ui.info.message, +.ui.attached.info.message, +.ui.blue.message, +.ui.attached.blue.message { + background: var(--color-info-bg); + color: var(--color-info-text); + border-color: var(--color-info-border); +} + +.ui.success.message, +.ui.attached.success.message, +.ui.positive.message, +.ui.attached.positive.message { + background: var(--color-success-bg); + color: var(--color-success-text); + border-color: var(--color-success-border); +} + +.ui.error.message, +.ui.attached.error.message, +.ui.red.message, +.ui.attached.red.message, +.ui.negative.message, +.ui.attached.negative.message { + background: var(--color-error-bg); + color: var(--color-error-text); + border-color: var(--color-error-border); +} + +.ui.warning.message, +.ui.attached.warning.message, +.ui.yellow.message, +.ui.attached.yellow.message { + background: var(--color-warning-bg); + color: var(--color-warning-text); + border-color: var(--color-warning-border); +} + +.ui.error.header { + background: var(--color-error-bg) !important; + color: var(--color-error-text) !important; + border-color: var(--color-error-border) !important; +} + +.ui.error.segment { + border-color: var(--color-error-border) !important; +} + +.ui.warning.header { + background: var(--color-warning-bg) !important; + color: var(--color-warning-text) !important; + border-color: var(--color-warning-border) !important; +} + +.ui.warning.segment { + border-color: var(--color-warning-border) !important; +} + +.ui.selection.active.dropdown, +.ui.selection.active.dropdown:hover, +.ui.selection.active.dropdown .menu, +.ui.selection.active.dropdown:hover .menu { + border-color: var(--color-primary-light-2); +} + +.ui.selection.dropdown .menu { + margin: 0 -1.25px; +} + +.ui.pointing.dropdown > .menu:not(.hidden)::after { + background: var(--color-box-body); + box-shadow: -1px -1px 0 0 var(--color-secondary); +} + +.ui.cards > .card, +.ui.card { + background: var(--color-card); + border: 1px solid var(--color-secondary); + box-shadow: none; +} + +.ui.cards > .card > .content, +.ui.card > .content { + border-color: var(--color-secondary); +} + +.ui.cards > .card > .extra, +.ui.card > .extra, +.ui.cards > .card > .extra a:not(.ui), +.ui.card > .extra a:not(.ui) { + color: var(--color-text); +} + +.ui.cards > .card > .extra a:not(.ui):hover, +.ui.card > .extra a:not(.ui):hover { + color: var(--color-primary); +} + +.ui.cards > .card > .content > .header, +.ui.card > .content > .header { + color: var(--color-text); +} + +.ui.cards > .card > .content > .description, +.ui.card > .content > .description { + color: var(--color-text); +} + +.ui.cards > .card .meta > a:not(.ui), +.ui.card .meta > a:not(.ui) { + color: var(--color-text-light-2); +} + +.ui.cards > .card .meta > a:not(.ui):hover, +.ui.card .meta > a:not(.ui):hover { + color: var(--color-text); +} + +.ui.cards a.card:hover, +.ui.link.cards .card:not(.icon):hover, +a.ui.card:hover, +.ui.link.card:hover { + border: 1px solid var(--color-secondary); + background: var(--color-card); +} + +.ui.cards > .card > .extra, +.ui.card > .extra { + color: var(--color-text); + border-top-color: var(--color-secondary-light-1) !important; +} + +.ui.comments .comment .text { + margin: 0; +} + +.ui.comments .comment .text, +.ui.comments .comment .author { + color: var(--color-text); +} + +.ui.comments .comment a.author:hover { + color: var(--color-primary); +} + +.ui.comments .comment .metadata { + color: var(--color-text-light-2); +} + +.ui.comments .comment .actions a { + color: var(--color-text-light); +} + +.ui.comments .comment .actions a.active, +.ui.comments .comment .actions a:hover { + color: var(--color-primary); +} + +.ui.attached.table { + border-color: var(--color-secondary); +} + +.ui.table { + color: var(--color-text); + background: var(--color-box-body); + border-color: var(--color-secondary); +} + +.ui.table th, +.ui.table td { + transition: none; +} + +.ui.table > tr > td, +.ui.table > tbody > tr > td { + border-top-color: var(--color-secondary-alpha-50); +} + +.ui.ui.ui.ui.table tr.active, +.ui.ui.table td.active { + color: var(--color-text); + background: var(--color-active); +} + +.ui.ui.selectable.table > tbody > tr:hover, +.ui.table tbody tr td.selectable:hover { + color: var(--color-text); + background-color: var(--color-secondary-alpha-40); +} + +.ui.ui.ui.ui.table tr.grey:not(.marked), +.ui.ui.table td.grey:not(.marked) { + background: var(--color-body); + color: var(--color-text); +} + +.ui.table > thead > tr > th { + background: var(--color-box-header); + color: var(--color-text); +} + +.ui.modal { + background: var(--color-body); +} + +.ui.modal > .header { + color: var(--color-text-dark); + background: var(--color-secondary-bg); + border-color: var(--color-secondary); + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); +} + +.ui.modal > .content { + background: var(--color-body); + text-align: left !important; +} + +.ui.modal > .actions { + background: var(--color-secondary-bg); + border-color: var(--color-secondary); +} + +.ui.modal > .close.inside, +.ui.fullscreen.modal > .close { + top: 11px; /* align modal close icon, for example admin notices */ + color: var(--body-color); +} + +.ui.basic.table > tbody > tr { + border-color: var(--color-secondary); +} + +.ui.avatar img, +.ui.avatar svg, +.ui.avatar.img, +.ui.cards > .card img.avatar, +.ui.cards > .card .avatar img, +.ui.card img.avatar, +.ui.card .avatar img { + border-radius: var(--border-radius); +} + +.ui.divided.list > .item { + border-color: var(--color-secondary); +} + +.ui.link.list .item, +.ui.link.list a.item, +.ui.link.list .item a:not(.ui) { + color: var(--color-text); +} + +.ui.link.list.list a.item:hover, +.ui.link.list.list .item a:not(.ui):hover, +.ui.link.list.list a.item:active, +.ui.link.list.list .item a:not(.ui):active { + color: var(--color-text-dark); +} + +.ui.error.message .header, +.ui.warning.message .header { + color: inherit; + filter: saturate(2); +} + +.dont-break-out { + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-all; + hyphens: auto; +} + +.full.height { + flex-grow: 1; + padding-bottom: 80px; +} + +/* enable fluid page widths for medium size viewports */ +@media (min-width: 768px) and (max-width: 1200px) { + .ui.ui.ui.container:not(.fluid) { + width: calc(100vw - 3em); + } +} + +.following.bar { + z-index: 900; + left: 0; + margin: 0 !important; +} + +.following.bar.light { + background: var(--color-header-bar); + border-bottom: 1px solid var(--color-secondary); +} + +.following.bar .column .menu { + margin-top: 0; +} + +.following.bar .top.menu a.item.brand { + padding-left: 0; +} + +.following.bar .top.menu a.item:hover, +.following.bar .top.menu .dropdown.item:hover, +.following.bar .top.menu .dropdown.item.active { + background-color: transparent; +} + +.following.bar .top.menu a.item:hover { + color: rgba(0, 0, 0, 0.45); +} + +.following.bar .top.menu .menu { + z-index: 900; +} + +.following.bar .fitted .svg { + margin-right: 0; + vertical-align: middle; +} + +.following.bar .searchbox { + background-color: var(--color-input-background) !important; +} + +.following.bar .text .svg { + width: 16px; + text-align: center; +} + +.following.bar #navbar { + width: 100vw; + min-height: 52px; + padding: 0 0.5rem; +} + +.following.bar #navbar .brand { + margin: 0; +} + +.following.bar #navbar .dropdown .avatar { + margin-right: 0 !important; +} + +@media (max-width: 767px) { + .following.bar #navbar:not(.shown) > *:not(:first-child) { + display: none; + } +} + +.right.stackable.menu { + /* responsive fix: this makes sure that the right menu when the page */ + /* is on mobile view will have elements stacked on top of each other. */ + /* no, stackable won't work on right menus. */ + margin-left: auto; + display: flex; + align-items: inherit; + flex-direction: inherit; +} + +.ui.pagination.menu .active.item { + color: var(--color-text); + background: var(--color-active); +} + +.ui.form .field > .selection.dropdown > .dropdown.icon { + height: auto; +} + +.ui.loading.segment::before, +.ui.loading.form::before { + background: none; +} + +.ui.loading.form > *, +.ui.loading.segment > * { + opacity: 0.35; +} + +.ui.form .fields.error .field textarea, +.ui.form .fields.error .field select, +.ui.form .fields.error .field input:not([type]), +.ui.form .fields.error .field input[type="date"], +.ui.form .fields.error .field input[type="datetime-local"], +.ui.form .fields.error .field input[type="email"], +.ui.form .fields.error .field input[type="number"], +.ui.form .fields.error .field input[type="password"], +.ui.form .fields.error .field input[type="search"], +.ui.form .fields.error .field input[type="tel"], +.ui.form .fields.error .field input[type="time"], +.ui.form .fields.error .field input[type="text"], +.ui.form .fields.error .field input[type="file"], +.ui.form .fields.error .field input[type="url"], +.ui.form .fields.error .field .ui.dropdown, +.ui.form .fields.error .field .ui.dropdown .item, +.ui.form .field.error .ui.dropdown, +.ui.form .field.error .ui.dropdown .text, +.ui.form .field.error .ui.dropdown .item, +.ui.form .field.error textarea, +.ui.form .field.error select, +.ui.form .field.error input:not([type]), +.ui.form .field.error input[type="date"], +.ui.form .field.error input[type="datetime-local"], +.ui.form .field.error input[type="email"], +.ui.form .field.error input[type="number"], +.ui.form .field.error input[type="password"], +.ui.form .field.error input[type="search"], +.ui.form .field.error input[type="tel"], +.ui.form .field.error input[type="time"], +.ui.form .field.error input[type="text"], +.ui.form .field.error input[type="file"], +.ui.form .field.error input[type="url"], +.ui.form .field.error select:focus, +.ui.form .field.error input:not([type]):focus, +.ui.form .field.error input[type="date"]:focus, +.ui.form .field.error input[type="datetime-local"]:focus, +.ui.form .field.error input[type="email"]:focus, +.ui.form .field.error input[type="number"]:focus, +.ui.form .field.error input[type="password"]:focus, +.ui.form .field.error input[type="search"]:focus, +.ui.form .field.error input[type="tel"]:focus, +.ui.form .field.error input[type="time"]:focus, +.ui.form .field.error input[type="text"]:focus, +.ui.form .field.error input[type="file"]:focus, +.ui.form .field.error input[type="url"]:focus { + background-color: var(--color-error-bg); + border-color: var(--color-error-border); + color: var(--color-error-text); +} + +.ui.form .fields.error .field .ui.dropdown, +.ui.form .field.error .ui.dropdown, +.ui.form .fields.error .field .ui.dropdown:hover, +.ui.form .field.error .ui.dropdown:hover { + border-color: var(--color-error-border) !important; +} + +.ui.form .fields.error .field .ui.dropdown .menu .item:hover, +.ui.form .field.error .ui.dropdown .menu .item:hover { + background-color: var(--color-error-bg-hover); +} + +.ui.form .fields.error .field .ui.dropdown .menu .active.item, +.ui.form .field.error .ui.dropdown .menu .active.item { + background-color: var(--color-error-bg-active) !important; +} + +.ui.form .fields.error .dropdown .menu, +.ui.form .field.error .dropdown .menu { + border-color: var(--color-error-border) !important; +} + +/* A fix for text visibility issue in Chrome autofill in dark mode. */ +/* It's a problem from Formatic UI, and this rule overrides it. */ +.ui.form .field.field input:-webkit-autofill { + -webkit-text-fill-color: var(--color-black) !important; +} + +.ui.form .field.muted { + opacity: var(--opacity-disabled); +} + +.ui.loading.loading.input > i.icon svg { + visibility: hidden; +} + +.text.primary { + color: var(--color-primary) !important; +} + +.text.red { + color: var(--color-red) !important; +} + +.text.orange { + color: var(--color-orange) !important; +} + +.text.yellow { + color: var(--color-yellow) !important; +} + +.text.olive { + color: var(--color-olive) !important; +} + +.text.green { + color: var(--color-green) !important; +} + +.text.teal { + color: var(--color-teal) !important; +} + +.text.blue { + color: var(--color-blue) !important; +} + +.text.violet { + color: var(--color-violet) !important; +} + +.text.purple { + color: var(--color-purple) !important; +} + +.text.pink { + color: var(--color-pink) !important; +} + +.text.brown { + color: var(--color-brown) !important; +} + +.text.black { + color: var(--color-text) !important; +} + +.text.grey { + color: var(--color-text-light) !important; +} + +.text.light.grey { + color: var(--color-grey-light) !important; +} + +.text.gold { + color: var(--color-gold) !important; +} + +.ui.left:not(.action) { + float: left; +} + +.ui.right:not(.action) { + float: right; +} + +.ui.container.fluid.padded { + padding: 0 10px; +} + +.ui.form .ui.button { + font-weight: normal; +} + +.ui.floating.label { + z-index: 10; +} + +.ui.transparent.label { + background-color: transparent; +} + +.ui.menu, +.ui.vertical.menu, +.ui.segment { + box-shadow: none; +} + +/* Override semantic selector '.ui.menu:not(.vertical) .item > .button' */ +/* This fixes the commit graph button on the commits page */ +/* modal svg icons, copied from fomantic except width and height */ +/* center text in fomantic modal dialogs */ +.ui .menu:not(.vertical) .item > .button.compact { + padding: 0.58928571em 1.125em; +} + +.ui .menu:not(.vertical) .item > .button.small { + font-size: 0.92857143rem; +} + +.ui.menu .ui.dropdown.item .menu .item { + width: 100%; +} + +.ui.dropdown .menu > .item > .floating.label { + z-index: 11; +} + +.ui.dropdown .menu .menu > .item > .floating.label { + z-index: 21; +} + +.ui.dropdown .menu > .header { + font-size: 0.8em; +} + +.ui .text.left { + text-align: left !important; +} + +.ui .text.right { + text-align: right !important; +} + +.ui .text.small { + font-size: 0.75em; +} + +.ui .text.normal { + font-weight: normal; +} + +.ui .text.italic { + font-style: italic; +} + +.ui .text.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: inline-block; +} + +.ui .text.thin { + font-weight: normal; +} + +.ui .text.middle { + vertical-align: middle; +} + +.ui .message { + text-align: center; +} + +.ui .message > ul { + margin-left: auto; + margin-right: auto; + display: table; + text-align: left; +} + +.ui .header > i + .content { + padding-left: 0.75rem; + vertical-align: middle; +} + +.ui .info.segment.top h3, +.ui .info.segment.top h4 { + margin-top: 0; +} + +.ui .info.segment.top h3:last-child { + margin-top: 4px; +} + +.ui .info.segment.top > :last-child { + margin-bottom: 0; +} + +.ui .normal.header { + font-weight: normal; +} + +.ui .form .autofill-dummy { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + z-index: -10000; +} + +.ui .form .sub.field { + margin-left: 25px; +} + +.ui .sha.label { + font-family: var(--fonts-monospace); + font-size: 13px; + padding: 6px 10px 4px; + font-weight: normal; + margin: 0 6px; +} + +.ui .button.copy-commit-sha { + border: 1px solid var(--color-light-border); + margin-right: 3px; + padding: 6px 6px 4px; + background: var(--color-light); +} + +.ui .button.truncate { + display: inline-block; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; + white-space: nowrap; + margin-right: 6px; +} + +.ui.status.buttons .svg { + margin-right: 4px; +} + +.ui.inline.delete-button { + padding: 8px 15px; + font-weight: normal; +} + +.ui .background.red { + background-color: var(--color-red) !important; +} + +.ui .background.blue { + background-color: var(--color-blue) !important; +} + +.ui .background.black { + background-color: var(--color-black) !important; +} + +.ui .background.grey { + background-color: var(--color-grey) !important; +} + +.ui .background.light.grey { + background-color: var(--color-grey) !important; +} + +.ui .background.green { + background-color: var(--color-green) !important; +} + +.ui .background.purple { + background-color: var(--color-purple) !important; +} + +.ui .background.yellow { + background-color: var(--color-yellow) !important; +} + +.ui .background.orange { + background-color: var(--color-orange) !important; +} + +.ui .background.gold { + background-color: var(--color-gold) !important; +} + +.ui .migrate { + color: var(--color-text-light-2) !important; +} + +.ui .migrate a { + color: var(--color-text-light) !important; +} + +.ui .migrate a:hover { + color: var(--color-text) !important; +} + +.ui .border { + border: 1px solid; +} + +.ui .border.red { + border-color: var(--color-red) !important; +} + +.ui .border.blue { + border-color: var(--color-blue) !important; +} + +.ui .border.black { + border-color: var(--color-black) !important; +} + +.ui .border.grey { + border-color: var(--color-grey) !important; +} + +.ui .border.light.grey { + border-color: var(--color-grey) !important; +} + +.ui .border.green { + border-color: var(--color-green) !important; +} + +.ui .border.purple { + border-color: var(--color-purple) !important; +} + +.ui .border.yellow { + border-color: var(--color-yellow) !important; +} + +.ui .border.orange { + border-color: var(--color-orange) !important; +} + +.ui .border.gold { + border-color: var(--color-gold) !important; +} + +.ui .branch-tag-choice { + line-height: 20px; +} + +@media (max-width: 767px) { + .ui.pagination.menu .item:not(.active,.navigation), + .ui.pagination.menu .item.navigation span.navigation_label { + display: none; + } +} + +.ui.pagination.menu.narrow .item { + padding-left: 8px; + padding-right: 8px; + min-width: 1em; + text-align: center; +} + +.ui.pagination.menu.narrow .item .icon { + margin-right: 0; +} + +.ui.icon.header svg { + width: 3em; + height: 3em; + float: none; + display: block; + line-height: 1; + padding: 0; + margin: 0 auto 0.5rem; + opacity: 1; +} + +.ui.floating.dropdown .overflow.menu .scrolling.menu.items { + border-radius: 0 !important; + box-shadow: none !important; + border-bottom: 1px solid var(--color-secondary); +} + +.user-menu > .item { + width: 100%; + border-radius: 0 !important; +} + +.scrolling.menu .item.selected { + font-weight: 600 !important; +} + +.ui.dropdown .scrolling.menu { + border-color: var(--color-secondary); +} + +.color-preview { + display: inline-block; + margin-left: 0.4em; + height: 0.67em; + width: 0.67em; + border-radius: 0.15em; +} + +.attention-icon { + vertical-align: text-top; +} + +.attention-note { + font-weight: unset; + color: var(--color-info-text); +} + +.attention-warning { + font-weight: unset; + color: var(--color-warning-text); +} + +footer { + background-color: var(--color-footer); + border-top: 1px solid var(--color-secondary); + width: 100%; + flex-basis: 40px; + color: var(--color-text-light); +} + +footer .container { + width: 100vw !important; + padding: 0 0.5rem; + max-width: calc(100vw - 1rem) !important; +} + +footer .container .links > * { + border-left: 1px solid var(--color-secondary-dark-1); + padding-left: 8px; + margin-left: 5px; +} + +footer .container .links > *:first-child { + border-left: 0; +} + +footer .ui.language .menu { + max-height: 500px; + overflow-y: auto; + margin-bottom: 7px; +} + +footer .ui.language .svg { + margin-right: 0.15em; + vertical-align: top; + margin-top: calc(2em - 16px); +} + +footer .ui.left, +footer .ui.right { + line-height: 39px; /* there is a border-top on the footer, so make the line-height 1px less */ +} + +.center:not(.popup) { + text-align: center; +} + +/* Conditional display */ +@media (min-width: 768px) { + .mobile-only, + .ui.button.mobile-only { + display: none !important; + } + + /* has the same behaviour of sr-only, hiding the content for */ + /* non-screenreaders, but is shown on mobile devices. */ + .sr-mobile-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; + } +} + +@media (max-width: 767px) { + .not-mobile { + display: none !important; + } +} + +/* Accessibility for screen readers */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +.sr-only-focusable:active, +.sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; +} + +@media (min-width: 768px) and (max-width: 991px) { + .ui.container { + width: 95%; + } +} + +.ui.menu.new-menu { + margin-bottom: 15px; + background: var(--color-navbar); + border-bottom: 1px solid var(--color-secondary) !important; + overflow: auto; +} + +.ui.menu.new-menu .new-menu-inner { + display: flex; + margin-left: auto; + margin-right: auto; + overflow-x: auto; +} + +.ui.menu.new-menu::after { + position: absolute; + display: block; + background: linear-gradient(to right, var(--color-navbar-transparent), var(--color-navbar) 100%); + content: ''; + right: 0; + height: 39px; + width: 60px; + visibility: visible; + pointer-events: none; +} + +.ui.menu.new-menu.shadow-body::after { + background: linear-gradient(to right, transparent, var(--color-body) 100%); +} + +.ui.menu.new-menu .item { + margin: 0 !important; +} + +@media (max-width: 767px) { + .ui.menu.new-menu .item { + width: auto !important; + } +} + +.ui.menu.new-menu .item:last-child { + padding-right: 30px !important; +} + +.ui.menu.new-menu::-webkit-scrollbar { + height: 6px; + display: none; +} + +.ui.menu.new-menu::-webkit-scrollbar-track { + background: none !important; +} + +.ui.menu.new-menu::-webkit-scrollbar-thumb { + box-shadow: none !important; +} + +.ui.menu.new-menu:hover::-webkit-scrollbar { + display: block; +} + +.repos-search { + padding-bottom: 0 !important; +} + +.repos-filter { + margin-top: 0 !important; + border-bottom-width: 0 !important; + margin-bottom: 2px !important; + justify-content: space-evenly; +} + +.ui.secondary.pointing.menu.repos-filter .item { + padding-left: 4.5px; + padding-right: 4.5px; +} + +.repo-title { + font-size: 1.5rem; + display: flex; + align-items: center; + flex: 1; + word-break: break-all; + color: var(--color-text-light); +} + +.repo-title .avatar { + width: 32px !important; + height: 32px !important; +} + +.repo-title .labels { + margin-left: 0.5rem; +} + +.repo-title .labels > * + * { + margin-left: 0.5rem; +} + +.repo-icon { + display: inline-block; +} + +.activity-bar-graph { + background-color: var(--color-primary); + color: var(--color-primary-contrast); +} + +.activity-bar-graph-alt { + color: var(--color-primary-contrast); +} + +.archived-icon { + color: var(--color-secondary-dark-2) !important; +} + +.oauth2-authorize-application-box { + margin-top: 3em !important; +} + +/* multiple radio or checkboxes as inline element */ +.inline-grouped-list { + display: inline-block; + vertical-align: top; +} + +.inline-grouped-list > .ui { + display: block; + margin-top: 5px; + margin-bottom: 10px; +} + +.inline-grouped-list > .ui:first-child { + margin-top: 1px; +} + +i.icons .icon:first-child { + margin-right: 0; +} + +i.icon.centerlock { + top: 1em; +} + +.ui.label { + padding: 0.3em 0.5em; + background: var(--color-light); + color: var(--color-text-light); +} + +.ui.labels a.label:hover, +a.ui.label:hover { + background: var(--color-hover); + border-color: var(--color-hover); + color: var(--color-text); +} + +.ui.label > .detail .icons { + margin-right: 0.25em; +} + +.ui.label > .detail .icons .icon { + margin-right: 0; +} + +.lines-blame-btn { + padding-left: 10px; + padding-right: 10px; + text-align: right !important; + background-color: var(--color-code-sidebar-bg); + width: 2%; +} + +.lines-num { + padding-left: 10px; + padding-right: 10px; + text-align: right !important; + color: var(--color-text-light-1); + width: 1%; + font-family: var(--fonts-monospace); +} + +.lines-num span.bottom-line::after { + border-bottom: 1px solid var(--color-secondary); +} + +.lines-num span::after { + content: attr(data-line-number); + line-height: 20px !important; + padding: 0 10px; + cursor: pointer; + display: block; +} + +.lines-type-marker { + vertical-align: top; +} + +.lines-num, +.lines-code { + font-size: 12px; + font-family: var(--fonts-monospace); + line-height: 20px; + padding-top: 0; + padding-bottom: 0; + vertical-align: top; +} + +.lines-num pre, +.lines-code pre, +.lines-num ol, +.lines-code ol { + background-color: inherit; + margin: 0; + padding: 0 !important; +} + +.lines-num pre li, +.lines-code pre li, +.lines-num ol li, +.lines-code ol li { + display: block; + width: calc(100% - 1ch); + padding-left: 1ch; +} + +.lines-escape { + width: 0; +} + +.lines-code { + background-color: var(--color-code-bg); + padding-left: 5px; +} + +.lines-code.active, +.lines-code .active { + background: var(--color-active-line) !important; +} + +.blame .lines-num { + padding: 0 !important; + background-color: var(--color-code-sidebar-bg); +} + +.blame .lines-code { + padding: 0 !important; +} + +.code-inner { + font: 12px var(--fonts-monospace); + white-space: pre-wrap; + word-break: break-all; + overflow-wrap: anywhere; +} + +.blame .code-inner { + white-space: pre; + word-break: normal; + word-wrap: normal; /* not using overflow-wrap because safari does not treat is an an alias */ +} + +.lines-commit { + vertical-align: top; + color: var(--color-grey); + padding: 0 !important; + background: var(--color-code-sidebar-bg); + width: 1%; +} + +.lines-commit .blame-info { + width: 350px; + max-width: 350px; + display: block; + padding: 0 0 0 10px; + line-height: 20px; + box-sizing: content-box; +} + +.lines-commit .blame-info .blame-data { + display: flex; + font-family: var(--fonts-regular); +} + +.lines-commit .blame-info .blame-data .blame-message { + flex-grow: 2; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.lines-commit .blame-info .blame-data .blame-time, +.lines-commit .blame-info .blame-data .blame-avatar { + flex-shrink: 0; +} + +.lines-commit .ui.avatar { + height: 18px; + width: 18px; + display: block; + margin-top: 1px; +} + +.top-line-blame { + border-top: 1px solid var(--color-secondary); +} + +.lines-code .bottom-line, +.lines-commit .bottom-line { + border-bottom: 1px solid var(--color-secondary); +} + +.code-view table { + width: 100%; +} + +.octicon-tiny { + font-size: 0.85714286rem; +} + +.ui.button { + background: var(--color-button); + border: 1px solid var(--color-light-border); + color: var(--color-text); +} + +.page-content .ui.button { + box-shadow: none !important; +} + +.ui.button:focus, +.ui.button:hover { + background: var(--color-hover); + color: var(--color-text); +} + +.ui.active.button, +.ui.button:active, +.ui.active.button:active, +.ui.active.button:hover { + background: var(--color-active); + color: var(--color-text); +} + +.ui.button.no-text .icon { + margin: 0 !important; +} + +.ui.buttons .button:first-child { + border-left: 1px solid var(--color-light-border); +} + +.ui.buttons .button + .button { + border-left: none; +} + +.two-toggle-buttons .button:not(.active):first-of-type { + border-right: none; +} + +.two-toggle-buttons .button.active:last-of-type { + border-left: 1px solid var(--color-light-border); +} + +.ui.labeled.button.disabled > .button, +.ui.basic.buttons .button, +.ui.basic.button { + color: var(--color-text-light); + background: var(--color-light); +} + +.ui.basic.buttons .button:hover, +.ui.basic.button:hover { + color: var(--color-text); + background: var(--color-hover); +} + +.ui.basic.buttons .button:focus, +.ui.basic.button:focus, +.ui.basic.buttons .button:active, +.ui.basic.button:active, +.ui.basic.buttons .active.button, +.ui.basic.active.button, +.ui.basic.buttons .active.button:hover, +.ui.basic.active.button:hover { + color: var(--color-text); + background: var(--color-active); +} + +.ui.labeled.button > .label { + border-color: var(--color-light-border); +} + +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + background: var(--color-hover); +} + +.ui.primary.button, +.ui.primary.buttons .button { + background-color: var(--color-primary) !important; + color: var(--color-primary-contrast) !important; +} + +.ui.primary.button:hover, +.ui.primary.buttons .button:hover { + background-color: var(--color-primary-dark-2) !important; +} + +.ui.primary.button:focus, +.ui.primary.buttons .button:focus { + background-color: var(--color-primary-dark-3) !important; +} + +.ui.basic.primary.button, +.ui.basic.primary.buttons .button { + box-shadow: inset 0 0 0 1px var(--color-primary) !important; + color: var(--color-primary-contrast) !important; +} + +.ui.basic.primary.button:hover, +.ui.basic.primary.buttons .button:hover { + box-shadow: inset 0 0 0 1px var(--color-primary-dark-2) !important; +} + +.ui.basic.primary.button:focus, +.ui.basic.primary.buttons .button:focus { + box-shadow: inset 0 0 0 1px var(--color-primary-dark-3) !important; +} + +.ui.basic.secondary.buttons .button, +.ui.basic.secondary.button { + color: var(--color-secondary-dark-6) !important; +} + +.ui.basic.secondary.buttons .button:hover, +.ui.basic.secondary.button:hover, +.ui.basic.secondary.buttons .button:active, +.ui.basic.secondary.button:active { + color: var(--color-secondary-dark-8) !important; + border-color: var(--color-secondary-dark-1) !important; +} + +.ui.basic.secondary.button:focus, +.ui.basic.secondary.buttons .button:focus { + color: var(--color-secondary-dark-8) !important; + border-color: var(--color-secondary-dark-3) !important; +} + +.ui.tertiary.button { + color: var(--color-text-light); + border: none; +} + +.ui.tertiary.button:hover { + color: var(--color-text); +} + +.ui.primary.label, +.ui.primary.labels .label { + background-color: var(--color-primary) !important; + border-color: var(--color-primary-dark-2) !important; +} + +.ui.basic.labels .primary.label, +.ui.ui.ui.basic.primary.label { + background: transparent !important; + border-color: var(--color-primary) !important; + color: var(--color-primary) !important; +} + +.ui.basic.labels .label, +.ui.basic.label { + background: var(--color-light); + border-color: var(--color-light-border); + color: var(--color-text-light); +} + +.ui.basic.labels a.label:hover, +a.ui.basic.label:hover { + color: var(--color-text); + border-color: var(--color-light-border); + background: var(--color-hover); +} + +.ui.label > img { + width: auto !important; + vertical-align: middle; + height: 2.1666em !important; +} + +span.green .svg { + color: var(--color-green); +} + +span.red .svg { + color: var(--color-red); +} + +span.purple .svg { + color: var(--color-purple); +} + +.migrate .svg.gitea-git { + color: var(--color-git); +} + +.color-icon { + display: inline-block; + border-radius: 100%; + height: 14px; + width: 14px; +} + +.ui.label > .color-icon { + margin-left: 0; +} + +.invisible { + visibility: hidden; +} + +.ui.segment, +.ui.segments, +.ui.attached.segment { + background: var(--color-box-body); + color: var(--color-text); + border-color: var(--color-secondary); +} + +.ui.segments > .segment { + border-color: var(--color-secondary); +} + +.ui.secondary.segment { + background: var(--color-secondary-bg); + color: var(--color-text-light); +} + +.ui.attached.header { + position: relative; + background: var(--color-box-header); + border-color: var(--color-secondary); +} + +.ui.attached.header .right .button { + padding: 8px 10px; + font-weight: normal; +} + +/* fix misaligned right buttons on box headers */ +.ui.attached.header .right:not(.dropdown) { + position: absolute; + right: 0.78571429rem; + top: 0; + bottom: 0; + height: 30px; + margin-top: auto; + margin-bottom: auto; +} + +/* https://github.com/go-gitea/gitea/issues/10210 */ +.ui.attached.segment ~ .ui.top.attached.header { + margin-top: 1rem; +} + +.header-stopwatch-dot { + position: absolute; + left: 8px; + top: -8px; + width: 13px; + height: 13px; + background: var(--color-primary); + border: 2px solid var(--color-header-bar); + border-radius: 100%; +} + +.notification_count { + position: absolute; + left: 5px; + top: -8px; + min-width: 1.5em; + text-align: center; + background: var(--color-primary); + border: 2px solid var(--color-header-bar); + color: var(--color-header-bar); + padding: 2px; + border-radius: 1em; + font-size: 10px; + font-weight: 700; + line-height: 0.7; +} + +table th[data-sortt-asc]:hover, +table th[data-sortt-desc]:hover { + background: rgba(0, 0, 0, 0.1) !important; + cursor: pointer !important; +} + +table th[data-sortt-asc] .svg, +table th[data-sortt-desc] .svg { + margin-left: 0.25rem; +} + +.ui.dropdown .svg.dropdown.icon, +.svg.dropdown.icon { + margin-top: 0 !important; /* reset the "ui.selection.dropdown > .dropdown.icon {margin-top}", for the Issue Dependencies dropdown */ + margin-right: -0.5rem !important; /* fix up SVG dropdown triangles because Fomantic thinks they are icon fonts */ + height: auto; /* reset the ".ui.dropdown > .dropdown.icon {height}", otherwise the icon would be too small */ +} + +.ui.selection.dropdown > .search.icon, +.ui.selection.dropdown > .delete.icon, +.ui.selection.dropdown > .dropdown.icon { + top: 0 !important; +} + +.ui.dropdown.no-text > .dropdown.icon { + margin-left: 0 !important; + margin-right: 0 !important; +} + +.ui.dropdown .menu .item { + border-radius: 0; +} + +.ui.dropdown .menu .item:first-of-type { + border-radius: var(--border-radius) var(--border-radius) 0 0; +} + +.ui.dropdown .menu .item:last-of-type { + border-radius: 0 0 var(--border-radius) var(--border-radius); +} + +.text-label { + display: inline-flex !important; + align-items: center !important; +} + +.emoji, +.reaction { + font-size: 1.25em; + line-height: 1; + font-style: normal !important; + font-weight: normal !important; + vertical-align: -0.075em; +} + +@supports (-webkit-hyphens:none) { + body:not(.safari-above125) .emoji, + body:not(.safari-above125) .reaction { + font-size: inherit; + vertical-align: inherit; + } + body:not(.safari-above125) .emoji img, + body:not(.safari-above125) .reaction img { + font-size: 1.25em; + vertical-align: -0.225em !important; + } +} + +.emoji img, +.reaction img { + border-width: 0 !important; + margin: 0 !important; + width: 1em !important; + height: 1em !important; + vertical-align: -0.15em; +} + +.minicolors-panel { + background: var(--color-secondary-dark-1) !important; +} + +.labelspage { + list-style: none; + padding-top: 0; +} + +.labelspage .item { + margin-top: 0; + margin-right: -14px; + margin-left: -14px; + padding: 10px; + border-bottom: 1px solid var(--color-secondary); + border-top: none; +} + +.labelspage .item a { + font-size: 12px; + padding-right: 10px; + color: var(--color-text-light); +} + +.labelspage .item a:hover { + color: var(--color-primary-light-2); +} + +.labelspage .item a.open-issues { + margin-right: 30px; +} + +.labelspage .item:last-child { + border-bottom: none; + padding-bottom: 0; +} + +.labelspage .orglabel { + opacity: 0.7; +} + +/* https://github.com/go-gitea/gitea/pull/11486 */ +.ui.sub.header { + text-transform: none; +} + +.ui.tabular.menu { + border-color: var(--color-secondary); +} + +.ui.tabular.menu .item { + padding: 11px 12px; + color: var(--color-text-light-2); +} + +.ui.tabular.menu .item:hover { + color: var(--color-text); +} + +.ui.tabular.menu .active.item, +.ui.tabular.menu .active.item:hover { + background: var(--color-body); + border-color: var(--color-secondary); + color: var(--color-text); + margin-top: 1px; /* offset fomantic's margin-bottom: -1px */ +} + +.ui.segment .ui.tabular.menu .active.item, +.ui.segment .ui.tabular.menu .active.item:hover { + background: var(--color-box-body); +} + +.ui.secondary.pointing.menu { + border-color: var(--color-secondary); +} + +.ui.secondary.pointing.menu .item { + color: var(--color-text-light-2); +} + +.ui.secondary.pointing.menu .active.item, +.ui.secondary.pointing.menu .active.item:hover, +.ui.secondary.pointing.menu .dropdown.item:hover, +.ui.secondary.pointing.menu .link.item:hover, +.ui.secondary.pointing.menu a.item:hover { + color: var(--color-text-dark); +} + +.ui.header { + color: var(--color-text); +} + +.ui.header .ui.label { + margin-left: 0.25rem; +} + +.ui.header > .ui.label.compact { + margin-top: inherit; +} + +.ui.header .sub.header { + color: var(--color-text-light-1); +} + +.flash-error details code, +.flash-warning details code { + display: block; + text-align: left; +} + +.truncated-item-container { + display: flex !important; + align-items: center; +} + +.ellipsis-button { + padding: 0 5px 8px !important; + display: inline-block !important; + font-weight: 600 !important; + line-height: 6px !important; + vertical-align: middle !important; +} + +.truncated-item-name { + line-height: 2em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-top: -0.5em; + margin-bottom: -0.5em; +} + +.precolors { + padding-left: 0 !important; + padding-right: 0 !important; + margin: 3px 10px auto !important; + width: 120px !important; +} + +.precolors .color { + float: left; + width: 15px; + height: 15px; +} + +@media (max-width: 767px) { + .ui.stackable.menu:not(.no-vertical-tabs) { + overflow-y: hidden; + overflow-x: auto; + flex-direction: row; + flex-wrap: nowrap !important; + } + .ui.stackable.menu:not(.no-vertical-tabs) .item { + width: initial !important; + } + .ui.stackable.menu:not(.no-vertical-tabs) > .dropdown.item { + position: initial; + } + .ui.stackable.menu:not(.no-vertical-tabs) .menu { + flex-direction: row; + } +} + +.color-text-light-2 { + color: var(--color-text-light-2); +} diff --git a/web_src/css/chroma/base.css b/web_src/css/chroma/base.css new file mode 100644 index 0000000000..bfd49db7a4 --- /dev/null +++ b/web_src/css/chroma/base.css @@ -0,0 +1,50 @@ +.chroma { + background-color: var(--color-code-bg); +} + +/* LineTableTD */ +.chroma .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0; +} + +/* LineTable */ +.chroma .lntable { + border-spacing: 0; + padding: 0; + margin: 0; + border: 0; + width: auto; + overflow: auto; + display: block; +} + +/* LineHighlight */ +.chroma .hl { + display: block; + width: 100%; +} + +/* LineNumbersTable */ +.chroma .lnt { + margin-right: 0.4em; + padding: 0 0.4em; +} + +/* LineNumbers */ +.chroma .ln { + margin-right: 0.4em; + padding: 0 0.4em; +} + +/* GenericStrong */ +.chroma .gs { + font-weight: 600; +} + +/* GenericUnderline */ +.chroma .gl { + text-decoration: underline; +} diff --git a/web_src/css/chroma/dark.css b/web_src/css/chroma/dark.css new file mode 100644 index 0000000000..1b0c722a16 --- /dev/null +++ b/web_src/css/chroma/dark.css @@ -0,0 +1,74 @@ +.chroma .bp { color: #fabd2f; } /* NameBuiltinPseudo */ +.chroma .c { color: #777e94; } /* Comment */ +.chroma .c1 { color: #777e94; } /* CommentSingle */ +.chroma .ch { color: #777e94; } /* CommentHashbang */ +.chroma .cm { color: #777e94; } /* CommentMultiline */ +.chroma .cp { color: #8ec07c; } /* CommentPreproc */ +.chroma .cpf { color: #649bc4; } /* CommentPreprocFile */ +.chroma .cs { color: #9075cd; } /* CommentSpecial */ +.chroma .dl { color: #649bc4; } /* LiteralStringDelimiter */ +.chroma .fm {} /* NameFunctionMagic */ +.chroma .g {} /* Generic */ +.chroma .gd { color: #ffffff; background-color: #5f3737; } /* GenericDeleted */ +.chroma .ge { color: #ddee30; } /* GenericEmph */ +.chroma .gh { color: #ffaa10; } /* GenericHeading */ +.chroma .gi { color: #ffffff; background-color: #3a523a; } /* GenericInserted */ +.chroma .gl {} /* GenericUnderline */ +.chroma .go { color: #777e94; } /* GenericOutput */ +.chroma .gp { color: #ebdbb2; } /* GenericPrompt */ +.chroma .gr { color: #ff4433; } /* GenericError */ +.chroma .gs { color: #ebdbb2; } /* GenericStrong */ +.chroma .gt { color: #ff7540; } /* GenericTraceback */ +.chroma .gu { color: #b8bb26; } /* GenericSubheading */ +.chroma .il { color: #649bc4; } /* LiteralNumberIntegerLong */ +.chroma .k { color: #ff7540; } /* Keyword */ +.chroma .kc { color: #649bc4; } /* KeywordConstant */ +.chroma .kd { color: #ff7540; } /* KeywordDeclaration */ +.chroma .kn { color: #ffaa10; } /* KeywordNamespace */ +.chroma .kp { color: #5f8700; } /* KeywordPseudo */ +.chroma .kr { color: #ff7540; } /* KeywordReserved */ +.chroma .kt { color: #ff7b72; } /* KeywordType */ +.chroma .l {} /* Literal */ +.chroma .ld {} /* LiteralDate */ +.chroma .m { color: #649bc4; } /* LiteralNumber */ +.chroma .mb { color: #649bc4; } /* LiteralNumberBin */ +.chroma .mf { color: #649bc4; } /* LiteralNumberFloat */ +.chroma .mh { color: #649bc4; } /* LiteralNumberHex */ +.chroma .mi { color: #649bc4; } /* LiteralNumberInteger */ +.chroma .mo { color: #649bc4; } /* LiteralNumberOct */ +.chroma .n { color: #c9d1d9; } /* Name */ +.chroma .na { color: #b8bb26; } /* NameAttribute */ +.chroma .nb { color: #fabd2f; } /* NameBuiltin */ +.chroma .nc { color: #ffaa10; } /* NameClass */ +.chroma .nd { color: #8ec07c; } /* NameDecorator */ +.chroma .ne { color: #ff7540; } /* NameException */ +.chroma .nf { color: #fabd2f; } /* NameFunction */ +.chroma .ni { color: #fabd2f; } /* NameEntity */ +.chroma .nl { color: #ff7540; } /* NameLabel */ +.chroma .nn { color: #ffaa10; } /* NameNamespace */ +.chroma .no { color: #649bc4; } /* NameConstant */ +.chroma .nt { color: #ff7540; } /* NameTag */ +.chroma .nv { color: #ebdbb2; } /* NameVariable */ +.chroma .nx { color: #b6bac5; } /* NameOther */ +.chroma .o { color: #ff7540; } /* Operator */ +.chroma .ow { color: #5f8700; } /* OperatorWord */ +.chroma .p { color: #d2d4db; } /* Punctuation */ +.chroma .py {} /* NameProperty */ +.chroma .s { color: #b8bb26; } /* LiteralString */ +.chroma .s1 { color: #b8bb26; } /* LiteralStringSingle */ +.chroma .s2 { color: #b8bb26; } /* LiteralStringDouble */ +.chroma .sa { color: #649bc4; } /* LiteralStringAffix */ +.chroma .sb { color: #b8bb26; } /* LiteralStringBacktick */ +.chroma .sc { color: #649bc4; } /* LiteralStringChar */ +.chroma .sd { color: #777e94; } /* LiteralStringDoc */ +.chroma .se { color: #ff7540; } /* LiteralStringEscape */ +.chroma .sh { color: #649bc4; } /* LiteralStringHeredoc */ +.chroma .si { color: #ffaa10; } /* LiteralStringInterpol */ +.chroma .sr { color: #9075cd; } /* LiteralStringRegex */ +.chroma .ss { color: #ff7540; } /* LiteralStringSymbol */ +.chroma .sx { color: #ffaa10; } /* LiteralStringOther */ +.chroma .vc { color: #ff7540; } /* NameVariableClass */ +.chroma .vg { color: #ffaa10; } /* NameVariableGlobal */ +.chroma .vi { color: #ffaa10; } /* NameVariableInstance */ +.chroma .vm {} /* NameVariableMagic */ +.chroma .w { color: #7f8699; } /* TextWhitespace */ diff --git a/web_src/css/chroma/light.css b/web_src/css/chroma/light.css new file mode 100644 index 0000000000..4bfce8fe71 --- /dev/null +++ b/web_src/css/chroma/light.css @@ -0,0 +1,74 @@ +.chroma .bp { color: #999999; } /* NameBuiltinPseudo */ +.chroma .c { color: #6a737d; } /* Comment */ +.chroma .c1 { color: #6a737d; } /* CommentSingle */ +.chroma .ch { color: #6a737d; } /* CommentHashbang */ +.chroma .cm { color: #999988; } /* CommentMultiline */ +.chroma .cp { color: #109295; } /* CommentPreproc */ +.chroma .cpf { color: #4c4dbc; } /* CommentPreprocFile */ +.chroma .cs { color: #999999; } /* CommentSpecial */ +.chroma .dl { color: #106303; } /* LiteralStringDelimiter */ +.chroma .fm {} /* NameFunctionMagic */ +.chroma .g {} /* Generic */ +.chroma .gd { color: #000000; background-color: #ffdddd; } /* GenericDeleted */ +.chroma .ge { color: #000000; } /* GenericEmph */ +.chroma .gh { color: #999999; } /* GenericHeading */ +.chroma .gi { color: #000000; background-color: #ddffdd; } /* GenericInserted */ +.chroma .gl {} /* GenericUnderline */ +.chroma .go { color: #888888; } /* GenericOutput */ +.chroma .gp { color: #555555; } /* GenericPrompt */ +.chroma .gr { color: #aa0000; } /* GenericError */ +.chroma .gs {} /* GenericStrong */ +.chroma .gt { color: #aa0000; } /* GenericTraceback */ +.chroma .gu { color: #aaaaaa; } /* GenericSubheading */ +.chroma .il { color: #009999; } /* LiteralNumberIntegerLong */ +.chroma .k { color: #d73a49; } /* Keyword */ +.chroma .kc { color: #d73a49; } /* KeywordConstant */ +.chroma .kd { color: #d73a49; } /* KeywordDeclaration */ +.chroma .kn { color: #d73a49; } /* KeywordNamespace */ +.chroma .kp { color: #d73a49; } /* KeywordPseudo */ +.chroma .kr { color: #d73a49; } /* KeywordReserved */ +.chroma .kt { color: #445588; } /* KeywordType */ +.chroma .l {} /* Literal */ +.chroma .ld {} /* LiteralDate */ +.chroma .m { color: #009999; } /* LiteralNumber */ +.chroma .mb { color: #009999; } /* LiteralNumberBin */ +.chroma .mf { color: #009999; } /* LiteralNumberFloat */ +.chroma .mh { color: #009999; } /* LiteralNumberHex */ +.chroma .mi { color: #009999; } /* LiteralNumberInteger */ +.chroma .mo { color: #009999; } /* LiteralNumberOct */ +.chroma .n {} /* Name */ +.chroma .na { color: #d73a49; } /* NameAttribute */ +.chroma .nb { color: #005cc5; } /* NameBuiltin */ +.chroma .nc { color: #445588; } /* NameClass */ +.chroma .nd { color: #3c5d5d; } /* NameDecorator */ +.chroma .ne { color: #990000; } /* NameException */ +.chroma .nf { color: #005cc5; } /* NameFunction */ +.chroma .ni { color: #6f42c1; } /* NameEntity */ +.chroma .nl { color: #990000; } /* NameLabel */ +.chroma .nn { color: #555555; } /* NameNamespace */ +.chroma .no { color: #008080; } /* NameConstant */ +.chroma .nt { color: #22863a; } /* NameTag */ +.chroma .nv { color: #008080; } /* NameVariable */ +.chroma .nx { color: #24292e; } /* NameOther */ +.chroma .o { color: #d73a49; } /* Operator */ +.chroma .ow { color: #d73a49; } /* OperatorWord */ +.chroma .p {} /* Punctuation */ +.chroma .py {} /* NameProperty */ +.chroma .s { color: #106303; } /* LiteralString */ +.chroma .s1 { color: #cc7a00; } /* LiteralStringSingle */ +.chroma .s2 { color: #106303; } /* LiteralStringDouble */ +.chroma .sa { color: #106303; } /* LiteralStringAffix */ +.chroma .sb { color: #106303; } /* LiteralStringBacktick */ +.chroma .sc { color: #106303; } /* LiteralStringChar */ +.chroma .sd { color: #106303; } /* LiteralStringDoc */ +.chroma .se { color: #106303; } /* LiteralStringEscape */ +.chroma .sh { color: #106303; } /* LiteralStringHeredoc */ +.chroma .si { color: #106303; } /* LiteralStringInterpol */ +.chroma .sr { color: #22863a; } /* LiteralStringRegex */ +.chroma .ss { color: #106303; } /* LiteralStringSymbol */ +.chroma .sx { color: #106303; } /* LiteralStringOther */ +.chroma .vc { color: #008080; } /* NameVariableClass */ +.chroma .vg { color: #008080; } /* NameVariableGlobal */ +.chroma .vi { color: #008080; } /* NameVariableInstance */ +.chroma .vm {} /* NameVariableMagic */ +.chroma .w { color: #bbbbbb; } /* TextWhitespace */ diff --git a/web_src/css/code/linebutton.css b/web_src/css/code/linebutton.css new file mode 100644 index 0000000000..a2956ffc1f --- /dev/null +++ b/web_src/css/code/linebutton.css @@ -0,0 +1,24 @@ +.code-view .lines-num:hover { + color: var(--color-text-dark) !important; +} + +.code-line-menu { + width: auto !important; +} + +.code-line-button { + background-color: var(--color-menu); + color: var(--color-text-light); + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + padding: 1px 10px; + position: absolute; + font-family: var(--fonts-regular); + left: 0; + transform: translateX(-70%); + cursor: pointer; + + &:hover { + color: var(--color-primary); + } +} diff --git a/web_src/css/codemirror/base.css b/web_src/css/codemirror/base.css new file mode 100644 index 0000000000..b435fb1342 --- /dev/null +++ b/web_src/css/codemirror/base.css @@ -0,0 +1,45 @@ +.ui .field:not(:last-child) .EasyMDEContainer .editor-statusbar { + margin-bottom: -1em; /* when there is a statusbar, the "margin-bottom: 1em" of the "field" is not needed, because the statusbar is likely a blank line */ +} + +.EasyMDEContainer .CodeMirror { + color: var(--color-input-text); + background-color: var(--color-input-background); + border-color: var(--color-secondary); + font: 14px var(--fonts-monospace); +} + +.EasyMDEContainer .CodeMirror.cm-s-default { + border-radius: var(--border-radius); + padding: 0 !important; +} + +.EasyMDEContainer .CodeMirror.CodeMirror-fullscreen.CodeMirror-focused { + border-right: 1px solid var(--color-primary) !important; +} + +.CodeMirror-cursor { + border-color: var(--color-caret) !important; +} + +.CodeMirror .cm-comment { + background: inherit !important; +} + +.CodeMirror .CodeMirror-code { + font: 14px var(--fonts-monospace); +} + +.CodeMirror-selected { + background: var(--color-primary-light-1) !important; + color: var(--color-white) !important; +} + +.CodeMirror-placeholder { + color: var(--color-placeholder-text) !important; + opacity: 1 !important; +} + +.CodeMirror-focused { + border-color: var(--color-primary) !important; +} diff --git a/web_src/css/codemirror/dark.css b/web_src/css/codemirror/dark.css new file mode 100644 index 0000000000..8a20d1c004 --- /dev/null +++ b/web_src/css/codemirror/dark.css @@ -0,0 +1,106 @@ +.CodeMirror.cm-s-default .cm-property, +.CodeMirror.cm-s-paper .cm-property { + color: #a0cc75; +} + +.CodeMirror.cm-s-default .cm-header, +.CodeMirror.cm-s-paper .cm-header { + color: #9daccc; +} + +.CodeMirror.cm-s-default .cm-quote, +.CodeMirror.cm-s-paper .cm-quote { + color: #009900; +} + +.CodeMirror.cm-s-default .cm-keyword, +.CodeMirror.cm-s-paper .cm-keyword { + color: #cc8a61; +} + +.CodeMirror.cm-s-default .cm-atom, +.CodeMirror.cm-s-paper .cm-atom { + color: #ef5e77; +} + +.CodeMirror.cm-s-default .cm-number, +.CodeMirror.cm-s-paper .cm-number { + color: #ff5656; +} + +.CodeMirror.cm-s-default .cm-def, +.CodeMirror.cm-s-paper .cm-def { + color: #e4e4e4; +} + +.CodeMirror.cm-s-default .cm-variable-2, +.CodeMirror.cm-s-paper .cm-variable-2 { + color: #00bdbf; +} + +.CodeMirror.cm-s-default .cm-variable-3, +.CodeMirror.cm-s-paper .cm-variable-3 { + color: #008855; +} + +.CodeMirror.cm-s-default .cm-comment, +.CodeMirror.cm-s-paper .cm-comment { + color: #8e9ab3; +} + +.CodeMirror.cm-s-default .cm-string, +.CodeMirror.cm-s-paper .cm-string { + color: #a77272; +} + +.CodeMirror.cm-s-default .cm-string-2, +.CodeMirror.cm-s-paper .cm-string-2 { + color: #ff5500; +} + +.CodeMirror.cm-s-default .cm-meta, +.CodeMirror.cm-s-paper .cm-meta, +.CodeMirror.cm-s-default .cm-qualifier, +.CodeMirror.cm-s-paper .cm-qualifier { + color: #ffb176; +} + +.CodeMirror.cm-s-default .cm-builtin, +.CodeMirror.cm-s-paper .cm-builtin { + color: #b7c951; +} + +.CodeMirror.cm-s-default .cm-bracket, +.CodeMirror.cm-s-paper .cm-bracket { + color: #999977; +} + +.CodeMirror.cm-s-default .cm-tag, +.CodeMirror.cm-s-paper .cm-tag { + color: #f1d273; +} + +.CodeMirror.cm-s-default .cm-attribute, +.CodeMirror.cm-s-paper .cm-attribute { + color: #bfcc70; +} + +.CodeMirror.cm-s-default .cm-hr, +.CodeMirror.cm-s-paper .cm-hr { + color: #999999; +} + +.CodeMirror.cm-s-default .cm-url, +.CodeMirror.cm-s-paper .cm-url { + color: #c5cfd0; +} + +.CodeMirror.cm-s-default .cm-link, +.CodeMirror.cm-s-paper .cm-link { + color: #d8c792; +} + +.CodeMirror.cm-s-default .cm-error, +.CodeMirror.cm-s-paper .cm-error { + color: #dbdbeb; +} diff --git a/web_src/css/codemirror/light.css b/web_src/css/codemirror/light.css new file mode 100644 index 0000000000..aa89263bc1 --- /dev/null +++ b/web_src/css/codemirror/light.css @@ -0,0 +1 @@ +/* Placeholder, there is no light theme, it uses CM defaults */ diff --git a/web_src/css/console/console.css b/web_src/css/console/console.css new file mode 100644 index 0000000000..b2d8439f8c --- /dev/null +++ b/web_src/css/console/console.css @@ -0,0 +1,299 @@ +/* Based on https://github.com/buildkite/terminal-to-html/blob/697ff23bd8dc48b9d23f11f259f5256dae2455f0/assets/terminal.css */ + +.console { + background: var(--color-console-bg); + color: var(--color-console-fg); + font-family: var(--fonts-monospace); + border-radius: 5px; + word-break: break-word; + overflow-wrap: break-word; +} + +.console img { max-width: 100%; } + +.console a { + color: inherit; + text-decoration: underline; + text-decoration-style: dashed; +} +.console a:hover { color: var(--color-primary); } + +@keyframes blink-animation { + to { + visibility: hidden; + } +} + +.term-fg2 { color: #838887; } /* faint (decreased intensity) - same as gray really */ +.term-fg3 { font-style: italic; } /* italic */ +.term-fg4 { text-decoration: underline; } /* underline */ +.term-fg5 { animation: blink-animation 1s steps(3, start) infinite; } /* blink */ +.term-fg9 { text-decoration: line-through; } /* crossed-out */ + +.term-fg30 { color: #666666; } /* black (but we can't use black, so a diff color) */ +.term-fg31 { color: #ff7070; } /* red */ +.term-fg32 { color: #b0f986; } /* green */ +.term-fg33 { color: #c6c502; } /* yellow */ +.term-fg34 { color: #8db7e0; } /* blue */ +.term-fg35 { color: #f271fb; } /* magenta */ +.term-fg36 { color: #6bf7ff; } /* cyan */ + +/* high intense colors */ +.term-fgi1 { color: #5ef765; } +.term-fgi90 { color: #838887; } /* grey */ +.term-fgi91 { color: #ff3333; } /* red */ +.term-fgi92 { color: #00ff00; } /* green */ +.term-fgi93 { color: #fffc67; } /* yellow */ +.term-fgi94 { color: #6871ff; } /* blue */ +.term-fgi95 { color: #ff76ff; } /* magenta */ +.term-fgi96 { color: #60fcff; } /* cyan */ + +/* background colors */ +.term-bg40 { background: #676767; } /* grey */ +.term-bg41 { background: #ff4343; } /* red */ +.term-bg42 { background: #99ff5f; } /* green */ + +/* custom foreground/background combos for readability */ +.term-fg31.term-bg40 { color: #f8a39f; } + +/* xterm colors */ +.term-fgx16 { color: #000000; } +.term-fgx17 { color: #00005f; } +.term-fgx18 { color: #000087; } +.term-fgx19 { color: #0000af; } +.term-fgx20 { color: #0000d7; } +.term-fgx21 { color: #0000ff; } +.term-fgx22 { color: #005f00; } +.term-fgx23 { color: #005f5f; } +.term-fgx24 { color: #005f87; } +.term-fgx25 { color: #005faf; } +.term-fgx26 { color: #005fd7; } +.term-fgx27 { color: #005fff; } +.term-fgx28 { color: #008700; } +.term-fgx29 { color: #00875f; } +.term-fgx30 { color: #008787; } +.term-fgx31 { color: #0087af; } +.term-fgx32 { color: #0087d7; } +.term-fgx33 { color: #0087ff; } +.term-fgx34 { color: #00af00; } +.term-fgx35 { color: #00af5f; } +.term-fgx36 { color: #00af87; } +.term-fgx37 { color: #00afaf; } +.term-fgx38 { color: #00afd7; } +.term-fgx39 { color: #00afff; } +.term-fgx40 { color: #00d700; } +.term-fgx41 { color: #00d75f; } +.term-fgx42 { color: #00d787; } +.term-fgx43 { color: #00d7af; } +.term-fgx44 { color: #00d7d7; } +.term-fgx45 { color: #00d7ff; } +.term-fgx46 { color: #00ff00; } +.term-fgx47 { color: #00ff5f; } +.term-fgx48 { color: #00ff87; } +.term-fgx49 { color: #00ffaf; } +.term-fgx50 { color: #00ffd7; } +.term-fgx51 { color: #00ffff; } +.term-fgx52 { color: #5f0000; } +.term-fgx53 { color: #5f005f; } +.term-fgx54 { color: #5f0087; } +.term-fgx55 { color: #5f00af; } +.term-fgx56 { color: #5f00d7; } +.term-fgx57 { color: #5f00ff; } +.term-fgx58 { color: #5f5f00; } +.term-fgx59 { color: #5f5f5f; } +.term-fgx60 { color: #5f5f87; } +.term-fgx61 { color: #5f5faf; } +.term-fgx62 { color: #5f5fd7; } +.term-fgx63 { color: #5f5fff; } +.term-fgx64 { color: #5f8700; } +.term-fgx65 { color: #5f875f; } +.term-fgx66 { color: #5f8787; } +.term-fgx67 { color: #5f87af; } +.term-fgx68 { color: #5f87d7; } +.term-fgx69 { color: #5f87ff; } +.term-fgx70 { color: #5faf00; } +.term-fgx71 { color: #5faf5f; } +.term-fgx72 { color: #5faf87; } +.term-fgx73 { color: #5fafaf; } +.term-fgx74 { color: #5fafd7; } +.term-fgx75 { color: #5fafff; } +.term-fgx76 { color: #5fd700; } +.term-fgx77 { color: #5fd75f; } +.term-fgx78 { color: #5fd787; } +.term-fgx79 { color: #5fd7af; } +.term-fgx80 { color: #5fd7d7; } +.term-fgx81 { color: #5fd7ff; } +.term-fgx82 { color: #5fff00; } +.term-fgx83 { color: #5fff5f; } +.term-fgx84 { color: #5fff87; } +.term-fgx85 { color: #5fffaf; } +.term-fgx86 { color: #5fffd7; } +.term-fgx87 { color: #5fffff; } +.term-fgx88 { color: #870000; } +.term-fgx89 { color: #87005f; } +.term-fgx90 { color: #870087; } +.term-fgx91 { color: #8700af; } +.term-fgx92 { color: #8700d7; } +.term-fgx93 { color: #8700ff; } +.term-fgx94 { color: #875f00; } +.term-fgx95 { color: #875f5f; } +.term-fgx96 { color: #875f87; } +.term-fgx97 { color: #875faf; } +.term-fgx98 { color: #875fd7; } +.term-fgx99 { color: #875fff; } +.term-fgx100 { color: #878700; } +.term-fgx101 { color: #87875f; } +.term-fgx102 { color: #878787; } +.term-fgx103 { color: #8787af; } +.term-fgx104 { color: #8787d7; } +.term-fgx105 { color: #8787ff; } +.term-fgx106 { color: #87af00; } +.term-fgx107 { color: #87af5f; } +.term-fgx108 { color: #87af87; } +.term-fgx109 { color: #87afaf; } +.term-fgx110 { color: #87afd7; } +.term-fgx111 { color: #87afff; } +.term-fgx112 { color: #87d700; } +.term-fgx113 { color: #87d75f; } +.term-fgx114 { color: #87d787; } +.term-fgx115 { color: #87d7af; } +.term-fgx116 { color: #87d7d7; } +.term-fgx117 { color: #87d7ff; } +.term-fgx118 { color: #87ff00; } +.term-fgx119 { color: #87ff5f; } +.term-fgx120 { color: #87ff87; } +.term-fgx121 { color: #87ffaf; } +.term-fgx122 { color: #87ffd7; } +.term-fgx123 { color: #87ffff; } +.term-fgx124 { color: #af0000; } +.term-fgx125 { color: #af005f; } +.term-fgx126 { color: #af0087; } +.term-fgx127 { color: #af00af; } +.term-fgx128 { color: #af00d7; } +.term-fgx129 { color: #af00ff; } +.term-fgx130 { color: #af5f00; } +.term-fgx131 { color: #af5f5f; } +.term-fgx132 { color: #af5f87; } +.term-fgx133 { color: #af5faf; } +.term-fgx134 { color: #af5fd7; } +.term-fgx135 { color: #af5fff; } +.term-fgx136 { color: #af8700; } +.term-fgx137 { color: #af875f; } +.term-fgx138 { color: #af8787; } +.term-fgx139 { color: #af87af; } +.term-fgx140 { color: #af87d7; } +.term-fgx141 { color: #af87ff; } +.term-fgx142 { color: #afaf00; } +.term-fgx143 { color: #afaf5f; } +.term-fgx144 { color: #afaf87; } +.term-fgx145 { color: #afafaf; } +.term-fgx146 { color: #afafd7; } +.term-fgx147 { color: #afafff; } +.term-fgx148 { color: #afd700; } +.term-fgx149 { color: #afd75f; } +.term-fgx150 { color: #afd787; } +.term-fgx151 { color: #afd7af; } +.term-fgx152 { color: #afd7d7; } +.term-fgx153 { color: #afd7ff; } +.term-fgx154 { color: #afff00; } +.term-fgx155 { color: #afff5f; } +.term-fgx156 { color: #afff87; } +.term-fgx157 { color: #afffaf; } +.term-fgx158 { color: #afffd7; } +.term-fgx159 { color: #afffff; } +.term-fgx160 { color: #d70000; } +.term-fgx161 { color: #d7005f; } +.term-fgx162 { color: #d70087; } +.term-fgx163 { color: #d700af; } +.term-fgx164 { color: #d700d7; } +.term-fgx165 { color: #d700ff; } +.term-fgx166 { color: #d75f00; } +.term-fgx167 { color: #d75f5f; } +.term-fgx168 { color: #d75f87; } +.term-fgx169 { color: #d75faf; } +.term-fgx170 { color: #d75fd7; } +.term-fgx171 { color: #d75fff; } +.term-fgx172 { color: #d78700; } +.term-fgx173 { color: #d7875f; } +.term-fgx174 { color: #d78787; } +.term-fgx175 { color: #d787af; } +.term-fgx176 { color: #d787d7; } +.term-fgx177 { color: #d787ff; } +.term-fgx178 { color: #d7af00; } +.term-fgx179 { color: #d7af5f; } +.term-fgx180 { color: #d7af87; } +.term-fgx181 { color: #d7afaf; } +.term-fgx182 { color: #d7afd7; } +.term-fgx183 { color: #d7afff; } +.term-fgx184 { color: #d7d700; } +.term-fgx185 { color: #d7d75f; } +.term-fgx186 { color: #d7d787; } +.term-fgx187 { color: #d7d7af; } +.term-fgx188 { color: #d7d7d7; } +.term-fgx189 { color: #d7d7ff; } +.term-fgx190 { color: #d7ff00; } +.term-fgx191 { color: #d7ff5f; } +.term-fgx192 { color: #d7ff87; } +.term-fgx193 { color: #d7ffaf; } +.term-fgx194 { color: #d7ffd7; } +.term-fgx195 { color: #d7ffff; } +.term-fgx196 { color: #ff0000; } +.term-fgx197 { color: #ff005f; } +.term-fgx198 { color: #ff0087; } +.term-fgx199 { color: #ff00af; } +.term-fgx200 { color: #ff00d7; } +.term-fgx201 { color: #ff00ff; } +.term-fgx202 { color: #ff5f00; } +.term-fgx203 { color: #ff5f5f; } +.term-fgx204 { color: #ff5f87; } +.term-fgx205 { color: #ff5faf; } +.term-fgx206 { color: #ff5fd7; } +.term-fgx207 { color: #ff5fff; } +.term-fgx208 { color: #ff8700; } +.term-fgx209 { color: #ff875f; } +.term-fgx210 { color: #ff8787; } +.term-fgx211 { color: #ff87af; } +.term-fgx212 { color: #ff87d7; } +.term-fgx213 { color: #ff87ff; } +.term-fgx214 { color: #ffaf00; } +.term-fgx215 { color: #ffaf5f; } +.term-fgx216 { color: #ffaf87; } +.term-fgx217 { color: #ffafaf; } +.term-fgx218 { color: #ffafd7; } +.term-fgx219 { color: #ffafff; } +.term-fgx220 { color: #ffd700; } +.term-fgx221 { color: #ffd75f; } +.term-fgx222 { color: #ffd787; } +.term-fgx223 { color: #ffd7af; } +.term-fgx224 { color: #ffd7d7; } +.term-fgx225 { color: #ffd7ff; } +.term-fgx226 { color: #ffff00; } +.term-fgx227 { color: #ffff5f; } +.term-fgx228 { color: #ffff87; } +.term-fgx229 { color: #ffffaf; } +.term-fgx230 { color: #ffffd7; } +.term-fgx231 { color: #ffffff; } +.term-fgx232 { color: #080808; } +.term-fgx233 { color: #121212; } +.term-fgx234 { color: #1c1c1c; } +.term-fgx235 { color: #262626; } +.term-fgx236 { color: #303030; } +.term-fgx237 { color: #3a3a3a; } +.term-fgx238 { color: #444444; } +.term-fgx239 { color: #4e4e4e; } +.term-fgx240 { color: #585858; } +.term-fgx241 { color: #626262; } +.term-fgx242 { color: #6c6c6c; } +.term-fgx243 { color: #767676; } +.term-fgx244 { color: #808080; } +.term-fgx245 { color: #8a8a8a; } +.term-fgx246 { color: #949494; } +.term-fgx247 { color: #9e9e9e; } +.term-fgx248 { color: #a8a8a8; } +.term-fgx249 { color: #b2b2b2; } +.term-fgx250 { color: #bcbcbc; } +.term-fgx251 { color: #c6c6c6; } +.term-fgx252 { color: #d0d0d0; } +.term-fgx253 { color: #dadada; } +.term-fgx254 { color: #e4e4e4; } +.term-fgx255 { color: #eeeeee; } diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css new file mode 100644 index 0000000000..ced8b3a164 --- /dev/null +++ b/web_src/css/dashboard.css @@ -0,0 +1,203 @@ +.dashboard.feeds .context.user.menu, +.dashboard.issues .context.user.menu { + z-index: 101; + min-width: 200px; +} + +.dashboard.feeds .context.user.menu .ui.header, +.dashboard.issues .context.user.menu .ui.header { + font-size: 1rem; + text-transform: none; +} + +.dashboard.feeds .filter.menu, +.dashboard.issues .filter.menu { + width: initial; +} + +.dashboard.feeds .filter.menu .item, +.dashboard.issues .filter.menu .item { + text-align: left; + display: flex; + align-items: center; + justify-content: space-between; +} + +.dashboard.feeds .filter.menu .item .text, +.dashboard.issues .filter.menu .item .text { + height: 16px; + vertical-align: middle; +} + +.dashboard.feeds .filter.menu .item .text.truncate, +.dashboard.issues .filter.menu .item .text.truncate { + width: 75%; +} + +.dashboard.feeds .filter.menu .item .floating.label, +.dashboard.issues .filter.menu .item .floating.label { + top: 7px; + left: 90%; + width: 15%; +} + +@media (max-width: 767px) { + .dashboard.feeds .filter.menu .item .floating.label, + .dashboard.issues .filter.menu .item .floating.label { + top: 10px; + left: auto; + width: auto; + right: 13px; + } +} + +/* Sort */ +.dashboard.feeds .filter.menu .jump.item, +.dashboard.issues .filter.menu .jump.item { + margin: 1px; + padding-right: 0; +} + +.dashboard.feeds .filter.menu .menu, +.dashboard.issues .filter.menu .menu { + max-height: 300px; + overflow-x: auto; + right: 0 !important; + left: auto !important; +} + +@media (max-width: 767px) { + .dashboard.feeds .filter.menu, + .dashboard.issues .filter.menu { + width: 100%; + } +} + +.dashboard.feeds .right.stackable.menu > .item.active, +.dashboard.issues .right.stackable.menu > .item.active { + color: var(--color-red); +} + +.dashboard .dashboard-repos, +.dashboard .dashboard-orgs { + margin: 0 1px; /* Accommodate for Semantic's 1px hacks on .attached elements */ +} + +.dashboard .dashboard-navbar { + width: 100vw; + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.dashboard .dashboard-navbar .org-visibility .label { + margin-left: 5px; +} + +.dashboard .dashboard-navbar .ui.dropdown { + max-width: 100%; +} + +@media (max-width: 767px) { + .dashboard .dashboard-navbar .ui.dropdown > .menu { + position: static; + } +} + +.feeds .news li { + display: flex; + align-items: baseline; + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.feeds .news li img { + align-self: flex-start; +} + +.feeds .news li > * + * { + margin-left: 0.35rem; +} + +.feeds .news > .ui.grid { + margin-left: auto; + margin-right: auto; +} + +.feeds .news .left .ui.avatar { + margin-top: 13px; +} + +.feeds .news .time-since { + font-size: 13px; +} + +.feeds .news .issue.title { + width: 80%; + margin: 0 0 1em; +} + +.feeds .news .push.news .content ul { + line-height: 18px; + font-size: 13px; + list-style: none; + padding-left: 10px; +} + +.feeds .news .push.news .content ul .text.truncate { + width: 80%; +} + +.feeds .news .commit-id { + font-family: var(--fonts-monospace); +} + +.feeds .news code { + padding: 2px 4px; + border-radius: 3px; + background-color: var(--color-markup-code-block); + word-break: break-all; +} + +.feeds .news:last-of-type .divider { + display: none !important; +} + +.feeds .list ul { + list-style: none; + margin: 0; + padding-left: 0; +} + +.feeds .list ul li:not(:last-child) { + border-bottom: 1px solid var(--color-secondary); +} + +.feeds .list ul li.private { + background-color: var(--color-box-body-highlight); +} + +.feeds .list ul li .repo-list-link { + padding: 6px 1em; + display: block; +} + +.feeds .list ul li .repo-list-link .svg { + color: var(--color-text-light-2); +} + +.feeds .list ul li .repo-list-link .star-num { + font-size: 12px; +} + +.feeds .list #privateFilterCheckbox .svg { + color: var(--color-grey); + margin-right: 0.25rem; +} + +.feeds .list .repo-owner-name-list .item-name { + min-width: 0; +} + +.feeds .list .repo-owner-name-list .item-name svg { + min-width: 16px; +} diff --git a/web_src/css/editor.css b/web_src/css/editor.css new file mode 100644 index 0000000000..d3f9edeb2d --- /dev/null +++ b/web_src/css/editor.css @@ -0,0 +1,82 @@ +.repository.file.editor .tab[data-tab="write"] { + padding: 0 !important; +} + +.repository.file.editor .tab[data-tab="write"] .editor-toolbar { + border: 0 !important; +} + +.repository.file.editor .tab[data-tab="write"] .CodeMirror { + border-left: 0; + border-right: 0; + border-bottom: 0; +} + +.editor-toolbar { + max-width: calc(100vw - 80px); + border-color: var(--color-secondary); +} + +.editor-toolbar.fullscreen { + background: var(--color-body); +} + +.editor-toolbar button { + border: none !important; + color: var(--color-text-light); +} + +.editor-toolbar button:not(:hover) { + background-color: transparent !important; +} + +.editor-toolbar i.separator { + border-left: none; + border-right-color: var(--color-secondary); +} + +.editor-toolbar button:hover { + background: var(--color-hover); +} + +.editor-toolbar button.active { + background: var(--color-active); +} + +/* hide preview button, we have the preview tab for this */ +.editor-toolbar:not(.fullscreen) .preview { + display: none; +} + +/* hide revert button in fullscreen, it breaks the page */ +.editor-toolbar.fullscreen .revert-to-textarea { + display: none; +} + +.editor-preview { + background-color: var(--color-body); +} + +.editor-preview-side { + border-color: var(--color-secondary); +} + +.editor-statusbar { + color: var(--color-text-light); +} + +.editor-loading { + padding: 1rem; + text-align: center; +} + +.edit-diff { + padding: 0 !important; +} + +.edit-diff > div > .ui.table { + border-top: none !important; + border-bottom: none !important; + border-left: 1px solid var(--color-secondary) !important; + border-right: 1px solid var(--color-secondary) !important; +} diff --git a/web_src/css/explore.css b/web_src/css/explore.css new file mode 100644 index 0000000000..8543702252 --- /dev/null +++ b/web_src/css/explore.css @@ -0,0 +1,88 @@ +.explore .navbar { + justify-content: center; + margin-bottom: 15px !important; + background-color: var(--color-navbar) !important; + border-width: 1px !important; +} + +.explore .navbar .svg { + width: 16px; + text-align: center; + margin-right: 5px; +} + +.ui.repository.list .item { + padding-bottom: 1.5rem; +} + +.ui.repository.list .item:not(:first-child) { + border-top: 1px solid var(--color-secondary); + padding-top: 1.5rem; +} + +.ui.repository.list .item .ui.header { + font-size: 1.5rem; + margin-bottom: 0.5rem; +} + +.ui.repository.list .item .ui.header .name { + word-break: break-all; +} + +.ui.repository.list .item .ui.header .metas { + font-size: 14px; +} + +.ui.repository.list .item .time { + font-size: 12px; +} + +.ui.repository.list .item .ui.tags { + margin-bottom: 0.5rem; +} + +.ui.repository.branches .info { + font-size: 12px; + color: var(--color-text-light); + display: flex; + white-space: pre; +} + +.ui.repository.branches .info .commit-message { + max-width: 72em; + overflow: hidden; + text-overflow: ellipsis; +} + +.ui.repository.branches .overflow-visible { + overflow: visible; +} + +/* fix alignment of PR popup in branches table */ +.ui.repository.branches table .ui.popup { + text-align: left; +} + +.ui.user.list .item { + padding-bottom: 25px; + display: flex; +} + +.ui.user.list .item:not(:first-child) { + border-top: 1px solid var(--color-secondary); + padding-top: 25px; +} + +.ui.user.list .item img.ui.avatar { + width: 40px; + height: 40px; + margin-right: 10px; +} + +.ui.user.list .item .description { + margin-top: 5px; +} + +.ui.user.list .item .description .svg:not(:first-child) { + margin-left: 5px; +} diff --git a/web_src/css/features/codeeditor.css b/web_src/css/features/codeeditor.css new file mode 100644 index 0000000000..f7e7777409 --- /dev/null +++ b/web_src/css/features/codeeditor.css @@ -0,0 +1,33 @@ +.monaco-editor-container, +.editor-loading.is-loading { + width: 100%; + min-height: 200px; + height: 90vh; +} + +.edit.githook .monaco-editor-container { + border: 1px solid var(--color-secondary); + height: 70vh; +} + +/* overwrite conflicting styles from fomantic */ +.monaco-editor-container .inputarea { + min-height: 0 !important; + margin: 0 !important; + padding: 0 !important; + resize: none !important; + border: none !important; + color: transparent !important; + background-color: transparent !important; +} + +/* these seem unthemeable */ +.monaco-scrollable-element > .scrollbar > .slider { + background: var(--color-primary) !important; +} +.monaco-scrollable-element > .scrollbar > .slider:hover { + background: var(--color-primary-dark-1) !important; +} +.monaco-scrollable-element > .scrollbar > .slider:active { + background: var(--color-primary-dark-2) !important; +} diff --git a/web_src/css/features/dropzone.css b/web_src/css/features/dropzone.css new file mode 100644 index 0000000000..0ce067ef30 --- /dev/null +++ b/web_src/css/features/dropzone.css @@ -0,0 +1,53 @@ +.ui .field .dropzone { + border: 2px dashed var(--color-secondary); + background: none; + box-shadow: none; + padding: 0; + border-radius: 4px; + min-height: 0; +} + +.ui .field .dropzone .dz-message { + margin: 10px 0; +} + +.dropzone .dz-button { + color: var(--color-text-light) !important; +} + +.dropzone:hover .dz-button { + color: var(--color-text) !important; +} + +.dropzone .dz-error-message { + top: 145px !important; +} + +.dropzone .dz-image { + display: flex !important; + align-items: center !important; + justify-content: center !important; + border-radius: 0 !important; +} + +.dropzone .dz-image img { + max-width: 100% !important; + max-height: 100% !important; + object-fit: contain !important; +} + +.dropzone .dz-preview.dz-image-preview, +.dropzone-attachments .thumbnails img { + background: transparent !important; +} + +.dropzone-attachments .thumbnails img { + height: 120px !important; + width: 120px !important; + object-fit: contain !important; + margin-bottom: 0 !important; +} + +.dropzone .dz-preview:hover .dz-image img { + filter: opacity(0.5) !important; +} diff --git a/web_src/css/features/gitgraph.css b/web_src/css/features/gitgraph.css new file mode 100644 index 0000000000..f7477997fe --- /dev/null +++ b/web_src/css/features/gitgraph.css @@ -0,0 +1,317 @@ +#git-graph-container { + overflow-x: auto; + width: 100%; + min-height: 350px; +} + +#git-graph-container > .ui.segment.loading { + border: 0; + z-index: 1; + min-height: 246px; +} + +#git-graph-container h2 { + display: flex; + justify-content: space-between; + align-items: center; +} + +#git-graph-container .color-buttons { + margin-right: 0; +} + +#git-graph-container .ui.header.dividing { + padding-bottom: 10px; +} + +#git-graph-container #flow-select-refs-dropdown { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + min-width: 250px; + border-right: none; +} + +#git-graph-container #flow-select-refs-dropdown .ui.label { + max-width: 180px; + display: inline-flex !important; + align-items: center; +} + +#git-graph-container #flow-select-refs-dropdown .ui.label .truncate { + display: inline-block; + max-width: 140px; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; + white-space: nowrap; +} + +#git-graph-container #flow-select-refs-dropdown .dropdown.icon { + display: none; +} + +#git-graph-container #flow-select-refs-dropdown .default.text { + padding-top: 4px; + padding-bottom: 4px; +} + +#git-graph-container #flow-select-refs-dropdown input.search { + position: relative; + top: 1px; +} + +#git-graph-container li { + list-style-type: none; + height: 24px; + line-height: 24px; + white-space: nowrap; + display: flex; + align-items: center; +} + +#git-graph-container li .node-relation { + font-family: var(--fonts-monospace); +} + +#git-graph-container li .author { + color: var(--color-text-light); +} + +#git-graph-container li .time { + color: var(--color-text-light-3); + font-size: 80%; +} + +#git-graph-container li a:not(.ui):hover { + text-decoration: underline; +} + +#git-graph-container li a em { + color: var(--color-red); + border-bottom: 1px dotted var(--color-secondary); + text-decoration: none; + font-style: normal; +} + +#git-graph-container #rel-container { + max-width: 30%; + overflow-x: auto; + float: left; +} + +#git-graph-container #rev-container { + width: 100%; +} + +#git-graph-container #rev-list { + margin: 0; + padding: 0; + width: 100%; +} + +#git-graph-container #rev-list li.highlight.hover { + background-color: var(--color-secondary-alpha-30); +} + +#git-graph-container #rev-list .tags a.button { + padding: 2px 4px; +} + +#git-graph-container #rev-list .sha.label { + padding-top: 5px; + padding-bottom: 3px; +} + +#git-graph-container #rev-list .sha.label .shortsha { + padding-top: 0; +} + +#git-graph-container #rev-list .sha.label .shortsha-pad { + padding-right: 10px; +} + +#git-graph-container #rev-list .sha.label .ui.detail.icon.button { + padding-top: 3px; + margin-top: -5px; + padding-bottom: 1px; +} + +#git-graph-container #rev-list .author img.ui.avatar { + width: auto; + height: 18px; + max-width: none; +} + +#git-graph-container #graph-raw-list { + margin: 0; +} + +#git-graph-container.monochrome #rel-container .flow-group { + stroke: var(--color-secondary-dark-5); + fill: var(--color-secondary-dark-5); +} + +#git-graph-container.monochrome #rel-container .flow-group.highlight { + stroke: var(--color-secondary-dark-12); + fill: var(--color-secondary-dark-12); +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-1 { + stroke: #499a37; + fill: #499a37; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-2 { + stroke: #ce4751; + fill: #ce4751; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-3 { + stroke: #8f9121; + fill: #8f9121; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-4 { + stroke: #ac32a6; + fill: #ac32a6; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-5 { + stroke: #7445e9; + fill: #7445e9; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-6 { + stroke: #c67d28; + fill: #c67d28; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-7 { + stroke: #4db392; + fill: #4db392; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-8 { + stroke: #aa4d30; + fill: #aa4d30; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-9 { + stroke: #2a6f84; + fill: #2a6f84; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-10 { + stroke: #c45327; + fill: #c45327; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-11 { + stroke: #3d965c; + fill: #3d965c; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-12 { + stroke: #792a93; + fill: #792a93; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-13 { + stroke: #439d73; + fill: #439d73; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-14 { + stroke: #103aad; + fill: #103aad; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-15 { + stroke: #982e85; + fill: #982e85; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-0 { + stroke: #7db233; + fill: #7db233; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-1 { + stroke: #5ac144; + fill: #5ac144; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-2 { + stroke: #ed5a8b; + fill: #ed5a8b; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-3 { + stroke: #ced049; + fill: #ced048; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-4 { + stroke: #db61d7; + fill: #db62d6; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-5 { + stroke: #8455f9; + fill: #8455f9; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-6 { + stroke: #e6a151; + fill: #e6a151; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-7 { + stroke: #44daaa; + fill: #44daaa; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-8 { + stroke: #dd7a5c; + fill: #dd7a5c; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-9 { + stroke: #38859c; + fill: #38859c; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-10 { + stroke: #d95520; + fill: #d95520; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-11 { + stroke: #42ae68; + fill: #42ae68; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-12 { + stroke: #9126b5; + fill: #9126b5; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-13 { + stroke: #4ab080; + fill: #4ab080; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-14 { + stroke: #284fb8; + fill: #284fb8; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-15 { + stroke: #971c80; + fill: #971c80; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-0 { + stroke: #87ca28; + fill: #87ca28; +} diff --git a/web_src/css/features/heatmap.css b/web_src/css/features/heatmap.css new file mode 100644 index 0000000000..d0cd2b5734 --- /dev/null +++ b/web_src/css/features/heatmap.css @@ -0,0 +1,68 @@ +#user-heatmap { + width: 100%; + font-size: 9px; + position: relative; + min-height: 125px; +} + +#user-heatmap text { + fill: currentcolor !important; +} + +/* for the "Less" and "More" legend */ +#user-heatmap .vch__legend .vch__legend { + display: flex; + font-size: 11px; + align-items: center; + justify-content: right; +} + +#user-heatmap .vch__legend .vch__legend div:first-child, +#user-heatmap .vch__legend .vch__legend div:last-child { + display: inline-block; + padding: 0 5px; +} + +/* move the "? contributions in the last ? months" text from top to bottom */ +#user-heatmap .total-contributions { + font-size: 11px; + position: absolute; + bottom: 0; + left: 25px; +} + +@media (max-width: 1200px) { + #user-heatmap { + min-height: 105px; + } + #user-heatmap .total-contributions { + left: 21px; + } +} + +@media (max-width: 1000px) { + #user-heatmap { + min-height: 80px; + } + #user-heatmap .total-contributions { + font-size: 10px; + left: 17px; + bottom: -4px; + } +} + +.user.profile #user-heatmap { + min-height: 135px; +} + +@media (max-width: 1200px) { + .user.profile #user-heatmap { + min-height: 115px; + } +} + +@media (max-width: 1000px) { + .user.profile #user-heatmap { + min-height: 90px; + } +} diff --git a/web_src/css/features/imagediff.css b/web_src/css/features/imagediff.css new file mode 100644 index 0000000000..f796bc19ae --- /dev/null +++ b/web_src/css/features/imagediff.css @@ -0,0 +1,107 @@ +.image-diff-container { + text-align: center; + padding: 1em 0; +} + +.image-diff-container img { + border: 1px solid var(--color-primary-light-7); + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC") right bottom var(--color-primary-light-7); +} + +.image-diff-container .before-container { + border: 1px solid var(--color-red); + display: block; +} + +.image-diff-container .after-container { + border: 1px solid var(--color-green); + display: block; +} + +.image-diff-container .diff-side-by-side .side { + display: inline-block; + line-height: 0; + vertical-align: top; + margin: 0 1em; +} + +.image-diff-container .diff-side-by-side .side .side-header { + font-weight: bold; +} + +.image-diff-container .diff-swipe { + margin: auto; +} + +.image-diff-container .diff-swipe .swipe-frame { + position: absolute; +} + +.image-diff-container .diff-swipe .swipe-frame .before-container { + position: absolute; +} + +.image-diff-container .diff-swipe .swipe-frame .swipe-container { + position: absolute; + right: 0; + display: block; + border-left: 2px solid var(--color-secondary-dark-8); + height: 100%; + overflow: hidden; +} + +.image-diff-container + .diff-swipe + .swipe-frame + .swipe-container + .after-container { + position: absolute; + right: 0; +} + +.image-diff-container .diff-swipe .swipe-frame .swipe-bar { + position: absolute; + height: 100%; + top: 0; + left: 0; +} + +.image-diff-container .diff-swipe .swipe-frame .swipe-bar .handle { + background: var(--color-secondary-dark-8); + left: -5px; + height: 12px; + width: 12px; + position: absolute; + transform: rotate(45deg); + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.image-diff-container .diff-swipe .swipe-frame .swipe-bar .top-handle { + top: -12px; +} + +.image-diff-container .diff-swipe .swipe-frame .swipe-bar .bottom-handle { + bottom: -14px; +} + +.image-diff-container .diff-overlay { + margin: 0 auto; +} + +.image-diff-container .diff-overlay .overlay-frame { + margin: 0 auto; + position: relative; +} + +.image-diff-container .diff-overlay .before-container, +.image-diff-container .diff-overlay .after-container { + position: absolute; +} + +.image-diff-container .diff-overlay input { + max-width: 300px; +} diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css new file mode 100644 index 0000000000..2bc68ccf0d --- /dev/null +++ b/web_src/css/features/projects.css @@ -0,0 +1,147 @@ +.board { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + overflow-x: auto; + margin: 0 0.5em; +} + +.board-column { + background-color: var(--color-project-board-bg) !important; + border: 1px solid var(--color-secondary) !important; + margin: 0 0.5rem !important; + padding: 0.5rem !important; + width: 320px; + height: calc(100vh - 450px); + min-height: 60vh; + overflow-y: scroll; + flex: 0 0 auto; + overflow: visible; + display: flex; + flex-direction: column; +} + +.board-column-header { + display: flex; + justify-content: space-between; +} + +.board-column-header.dark-label { + color: var(--color-project-board-dark-label) !important; +} + +.board-column-header.dark-label .board-label { + color: var(--color-project-board-dark-label) !important; +} + +.board-column-header.light-label { + color: var(--color-project-board-light-label) !important; +} + +.board-column-header.light-label .board-label { + color: var(--color-project-board-light-label) !important; +} + +.board-label { + background: none !important; + line-height: 1.25 !important; +} + +.board-column > .cards { + flex: 1; + display: flex; + align-content: baseline; + margin: 0 !important; + padding: 0 !important; + flex-wrap: nowrap !important; + flex-direction: column; +} + +.project-board-title { + word-break: break-word; +} + +.board-column > .divider { + margin: 5px 0; +} + +.board-column:first-child { + margin-left: auto !important; +} + +.board-column:last-child { + margin-right: auto !important; +} + +.board-column .ui.cards > .card > .content { + border: none; +} + +.board-card { + margin: 4px 2px !important; + border-radius: 5px !important; + cursor: move; + width: calc(100% - 4px) !important; + padding: 0.5rem !important; + min-height: auto !important; +} + +.board-card .meta * { + margin-right: 0 !important; +} + +.board-card .header { + margin-top: 0 !important; + font-size: 16px !important; +} + +.board-card .card-attachment-images { + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-align: center; +} + +.board-card .card-attachment-images img { + display: inline-block; + max-height: 50px; + border-radius: var(--border-radius); + margin-right: 2px; +} + +.board-card .card-attachment-images img:only-child { + max-height: 90px; + margin: auto; +} + +.card-ghost { + border-style: dashed !important; + background: none !important; +} + +.card-ghost * { + opacity: 0; +} + +.color-field .minicolors.minicolors-theme-default { + display: block; +} + +.color-field .minicolors.minicolors-theme-default .minicolors-input { + height: 38px; + padding-left: 2rem; +} + +.color-field .minicolors.minicolors-theme-default .minicolors-swatch { + top: 10px; +} + +.edit-project-board .color.picker.column, +.new-board-modal .color.picker.column { + display: flex; +} + +.edit-project-board .color.picker.column .minicolors, +.new-board-modal .color.picker.column .minicolors { + flex: 1; +} diff --git a/web_src/css/font_i18n.css b/web_src/css/font_i18n.css new file mode 100644 index 0000000000..e3de906532 --- /dev/null +++ b/web_src/css/font_i18n.css @@ -0,0 +1,393 @@ +:root :lang(ja) { + --fonts-override: var(--fonts-default-override-ja); +} + +:root :lang(zh-CN) { + --fonts-override: var(--fonts-default-override-zh-cn); +} + +:root :lang(zh-TW) { + --fonts-override: var(--fonts-default-override-zh-tw); +} + +:root :lang(zh-HK) { + --fonts-override: var(--fonts-default-override-zh-hk); +} + +:root :lang(ko) { + --fonts-override: var(--fonts-default-override-ko); +} + +[lang] { + font-family: var(--fonts-regular); +} + +:root { + --fonts-default-override-ja: system-ui-ja, var(--fonts-proportional); + --fonts-default-override-zh-cn: system-ui-zh-cn, var(--fonts-proportional); + --fonts-default-override-zh-tw: system-ui-zh-tw, var(--fonts-proportional); + --fonts-default-override-zh-hk: system-ui-zh-hk, var(--fonts-proportional); + --fonts-default-override-ko: system-ui-ko, var(--fonts-proportional); +} + +/* Special handling for Firefox on Windows/Linux */ +@supports (-moz-appearance: none) { + :root { + --fonts-default-override-ja: var(--fonts-proportional), system-ui-ja; + --fonts-default-override-zh-cn: var(--fonts-proportional), system-ui-zh-cn; + --fonts-default-override-zh-tw: var(--fonts-proportional), system-ui-zh-tw; + --fonts-default-override-zh-hk: var(--fonts-proportional), system-ui-zh-hk; + --fonts-default-override-ko: var(--fonts-proportional), system-ui-ko; + } +} + +@font-face { + font-family: system-ui-ja; + src: local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN W3"), + local("HiraginoSans-W2"), local("Source Han Sans JP Light"), + local("SourceHanSansJP-Light"), local("Source Han Sans J Light"), + local("SourceHanSansJ-Light"), local("Noto Sans CJK JP Light"), + local("NotoSansCJKJP-Light"), local("Source Han Sans Light"), + local("SourceHanSans-Light"), local("Yu Gothic Regular"), + local("YuGothic Regular"), local("Droid Sans Japanese"), local("Meiryo"), + local("MS PGothic"); + font-weight: 300; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +@font-face { + font-family: system-ui-ja; + src: local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN W3"), + local("HiraginoSans-W4"), local("Source Han Sans JP Regular"), + local("SourceHanSansJP-Regular"), local("Source Han Sans J Regular"), + local("SourceHanSansJ-Regular"), local("Noto Sans CJK JP Regular"), + local("NotoSansCJKJP-Regular"), local("Source Han Sans Regular"), + local("SourceHanSans-Regular"), local("Yu Gothic Medium"), + local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"), + local("MS PGothic"); + font-weight: 400; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +@font-face { + font-family: system-ui-ja; + src: local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN W3"), + local("HiraginoSans-W5"), local("Source Han Sans JP Medium"), + local("SourceHanSansJP-Medium"), local("Source Han Sans J Medium"), + local("SourceHanSansJ-Medium"), local("Noto Sans CJK JP Medium"), + local("NotoSansCJKJP-Medium"), local("Source Han Sans Medium"), + local("SourceHanSans-Medium"), local("Yu Gothic Medium"), + local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"), + local("MS PGothic"); + font-weight: 500; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +@font-face { + font-family: system-ui-ja; + src: local("HiraKakuProN-W6"), local("Hiragino Kaku Gothic ProN W6"), + local("HiraginoSans-W6"), local("Source Han Sans JP Bold"), + local("SourceHanSansJP-Bold"), local("Source Han Sans J Bold"), + local("SourceHanSansJ-Bold"), local("Noto Sans CJK JP Bold"), + local("NotoSansCJKJP-Bold"), local("Source Han Sans Bold"), + local("SourceHanSans-Bold"), local("Yu Gothic Bold"), local("YuGothic Bold"), + local("Droid Sans Japanese"), local("Meiryo Bold"), local("MS PGothic"); + font-weight: 700; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +/* Safari on macOS/iOS */ +@font-face { + font-family: system-ui-ja; + src: local("HelveticaNeue"); + unicode-range: U+A0; +} + +/* Other browsers on macOS/iOS */ +@supports not (-webkit-hyphens: none) { + @font-face { + font-family: system-ui-ja; + src: local("HelveticaNeue"); + unicode-range: U+20; + } +} + +@font-face { + font-family: system-ui-zh-cn; + src: local("PingFangSC-Light"), local("Source Han Sans CN Light"), + local("SourceHanSansCN-Light"), local("Source Han Sans SC Light"), + local("SourceHanSansSC-Light"), local("Noto Sans CJK SC Light"), + local("NotoSansCJKSC-Light"), local("HiraginoSansGB-W3"), + local("Hiragino Sans GB W3"), local("Microsoft YaHei Light"), + local("Heiti SC Light"), local("SimHei"); + font-weight: 300; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +@font-face { + font-family: system-ui-zh-cn; + src: local("PingFangSC-Regular"), local("Source Han Sans CN Regular"), + local("SourceHanSansCN-Regular"), local("Source Han Sans SC Regular"), + local("SourceHanSansSC-Regular"), local("Noto Sans CJK SC Regular"), + local("NotoSansCJKSC-Regular"), local("HiraginoSansGB-W3"), + local("Hiragino Sans GB W3"), local("Microsoft YaHei"), + local("Heiti SC Light"), local("SimHei"); + font-weight: 400; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +@font-face { + font-family: system-ui-zh-cn; + src: local("PingFangSC-Medium"), local("Source Han Sans CN Medium"), + local("SourceHanSansCN-Medium"), local("Source Han Sans SC Medium"), + local("SourceHanSansSC-Medium"), local("Noto Sans CJK SC Medium"), + local("NotoSansCJKSC-Medium"), local("HiraginoSansGB-W3"), + local("Hiragino Sans GB W3"), local("Microsoft YaHei"), + local("Heiti SC Light"), local("SimHei"); + font-weight: 500; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +@font-face { + font-family: system-ui-zh-cn; + src: local("PingFangSC-Semibold"), local("Source Han Sans CN Bold"), + local("SourceHanSansCN-Bold"), local("Source Han Sans SC Bold"), + local("SourceHanSansSC-Bold"), local("Noto Sans CJK SC Bold"), + local("NotoSansCJKSC-Bold"), local("HiraginoSansGB-W6"), + local("Hiragino Sans GB W6"), local("Microsoft YaHei Bold"), + local("Heiti SC Medium"), local("SimHei"); + font-weight: 700; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +/* Safari on macOS/iOS */ +@font-face { + font-family: system-ui-zh-cn; + src: local("HelveticaNeue"); + unicode-range: U+A0; +} + +/* Other browsers on macOS/iOS */ +@supports not (-webkit-hyphens: none) { + @font-face { + font-family: system-ui-zh-cn; + src: local("HelveticaNeue"); + unicode-range: U+20; + } +} + +@font-face { + font-family: system-ui-zh-tw; + src: local("PingFangTC-Light"), local("Source Han Sans TW Light"), + local("SourceHanSansTW-Light"), local("Source Han Sans TC Light"), + local("SourceHanSansTC-Light"), local("Noto Sans CJK TC Light"), + local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"), + local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"), + local("Heiti TC Light"), local("PMingLiU"); + font-weight: 300; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +@font-face { + font-family: system-ui-zh-tw; + src: local("PingFangTC-Regular"), local("Source Han Sans TW Regular"), + local("SourceHanSansTW-Regular"), local("Source Han Sans TC Regular"), + local("SourceHanSansTC-Regular"), local("Noto Sans CJK TC Regular"), + local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"), + local("Hiragino Sans TC W3"), local("Microsoft JhengHei"), + local("Heiti TC Light"), local("PMingLiU"); + font-weight: 400; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +@font-face { + font-family: system-ui-zh-tw; + src: local("PingFangTC-Medium"), local("Source Han Sans TW Medium"), + local("SourceHanSansTW-Medium"), local("Source Han Sans TC Medium"), + local("SourceHanSansTC-Medium"), local("Noto Sans CJK TC Medium"), + local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"), + local("Hiragino Sans TC W3"), local("Microsoft JhengHei"), + local("Heiti TC Light"), local("PMingLiU"); + font-weight: 500; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +@font-face { + font-family: system-ui-zh-tw; + src: local("PingFangTC-Semibold"), local("Source Han Sans TW Bold"), + local("SourceHanSansTW-Bold"), local("Source Han Sans TC Bold"), + local("SourceHanSansTC-Bold"), local("Noto Sans CJK TC Bold"), + local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"), + local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"), + local("Heiti TC Medium"), local("PMingLiU"); + font-weight: 700; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +/* Safari on macOS/iOS */ +@font-face { + font-family: system-ui-zh-tw; + src: local("HelveticaNeue"); + unicode-range: U+A0; +} + +/* Other browsers on macOS/iOS */ +@supports not (-webkit-hyphens: none) { + @font-face { + font-family: system-ui-zh-tw; + src: local("HelveticaNeue"); + unicode-range: U+20; + } +} + +@font-face { + font-family: system-ui-zh-hk; + src: local("PingFangHK-Light"), local("Source Han Sans HK Light"), + local("SourceHanSansHK-Light"), local("Source Han Sans HC Light"), + local("SourceHanSansHC-Light"), local("Noto Sans CJK HK Light"), + local("NotoSansCJKHK-Light"), local("Source Han Sans TC Light"), + local("SourceHanSansTC-Light"), local("Noto Sans CJK TC Light"), + local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"), + local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"), + local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU"); + font-weight: 300; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +@font-face { + font-family: system-ui-zh-hk; + src: local("PingFangHK-Regular"), local("Source Han Sans HK Regular"), + local("SourceHanSansHK-Regular"), local("Source Han Sans HC Regular"), + local("SourceHanSansHC-Regular"), local("Noto Sans CJK HK Regular"), + local("NotoSansCJKHK-Regular"), local("Source Han Sans TC Regular"), + local("SourceHanSansTC-Regular"), local("Noto Sans CJK TC Regular"), + local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"), + local("Hiragino Sans TC W3"), local("Microsoft JhengHei"), + local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU"); + font-weight: 400; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +@font-face { + font-family: system-ui-zh-hk; + src: local("PingFangHK-Medium"), local("Source Han Sans HK Medium"), + local("SourceHanSansHK-Medium"), local("Source Han Sans HC Medium"), + local("SourceHanSansHC-Medium"), local("Noto Sans CJK HK Medium"), + local("NotoSansCJKHK-Medium"), local("Source Han Sans TC Medium"), + local("SourceHanSansTC-Medium"), local("Noto Sans CJK TC Medium"), + local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"), + local("Hiragino Sans TC W3"), local("Microsoft JhengHei"), + local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU"); + font-weight: 500; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +@font-face { + font-family: system-ui-zh-hk; + src: local("PingFangHK-Semibold"), local("Source Han Sans HK Bold"), + local("SourceHanSansHK-Bold"), local("Source Han Sans HC Bold"), + local("SourceHanSansHC-Bold"), local("Noto Sans CJK HK Bold"), + local("NotoSansCJKHK-Bold"), local("Source Han Sans TC Bold"), + local("SourceHanSansTC-Bold"), local("Noto Sans CJK TC Bold"), + local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"), + local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"), + local("Heiti TC Medium"), local("PMingLiU_HKSCS"), local("PMingLiU"); + font-weight: 700; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +/* Safari on macOS/iOS */ +@font-face { + font-family: system-ui-zh-hk; + src: local("HelveticaNeue"); + unicode-range: U+A0; +} + +/* Other browsers on macOS/iOS */ +@supports not (-webkit-hyphens: none) { + @font-face { + font-family: system-ui-zh-hk; + src: local("HelveticaNeue"); + unicode-range: U+20; + } +} + +@font-face { + font-family: system-ui-ko; + src: local("AppleSDGothicNeo-Light"), local("Source Han Sans KR Light"), + local("SourceHanSansKR-Light"), local("Source Han Sans K Light"), + local("SourceHanSansK-Light"), local("Noto Sans CJK KR Light"), + local("NotoSansCJKKR-Light"), local("NanumBarunGothic Light"), + local("Malgun Gothic Semilight"), local("Nanum Gothic"), local("Dotum"); + font-weight: 300; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +@font-face { + font-family: system-ui-ko; + src: local("AppleSDGothicNeo-Regular"), local("Source Han Sans KR Regular"), + local("SourceHanSansKR-Regular"), local("Source Han Sans K Regular"), + local("SourceHanSansK-Regular"), local("Noto Sans CJK KR Regular"), + local("NotoSansCJKKR-Regular"), local("NanumBarunGothic"), + local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum"); + font-weight: 400; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +@font-face { + font-family: system-ui-ko; + src: local("AppleSDGothicNeo-Medium"), local("Source Han Sans KR Medium"), + local("SourceHanSansKR-Medium"), local("Source Han Sans K Medium"), + local("SourceHanSansK-Medium"), local("Noto Sans CJK KR Medium"), + local("NotoSansCJKKR-Medium"), local("NanumBarunGothic"), + local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum"); + font-weight: 500; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +@font-face { + font-family: system-ui-ko; + src: local("AppleSDGothicNeo-SemiBold"), local("Source Han Sans KR Bold"), + local("SourceHanSansKR-Bold"), local("Source Han Sans K Bold"), + local("SourceHanSansK-Bold"), local("Noto Sans CJK KR Bold"), + local("NotoSansCJKKR-Bold"), local("NanumBarunGothic Bold"), + local("Malgun Gothic Bold"), local("Nanum Gothic Bold"), local("Dotum"); + font-weight: 700; + unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, + U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????; +} + +/* Safari on macOS/iOS */ +@font-face { + font-family: system-ui-ko; + src: local("HelveticaNeue"); + unicode-range: U+A0; +} + +/* Other browsers on macOS/iOS */ +@supports not (-webkit-hyphens: none) { + @font-face { + font-family: system-ui-ko; + src: local("HelveticaNeue"); + unicode-range: U+20; + } +} diff --git a/web_src/css/form.css b/web_src/css/form.css new file mode 100644 index 0000000000..e325a377f8 --- /dev/null +++ b/web_src/css/form.css @@ -0,0 +1,547 @@ +input, +textarea, +.ui.input > input, +.ui.form input:not([type]), +.ui.form select, +.ui.form textarea, +.ui.form input[type="date"], +.ui.form input[type="datetime-local"], +.ui.form input[type="email"], +.ui.form input[type="file"], +.ui.form input[type="number"], +.ui.form input[type="password"], +.ui.form input[type="search"], +.ui.form input[type="tel"], +.ui.form input[type="text"], +.ui.form input[type="time"], +.ui.form input[type="url"], +.ui.selection.dropdown, +.ui.checkbox label::before, +.ui.checkbox input:checked ~ label::before, +.ui.checkbox input:not([type="radio"]):indeterminate ~ label::before { + background: var(--color-input-background); + border-color: var(--color-input-border); + color: var(--color-input-text); +} + +input:hover, +textarea:hover, +.ui.input input:hover, +.ui.form input:not([type]):hover, +.ui.form select:hover, +.ui.form textarea:hover, +.ui.form input[type="date"]:hover, +.ui.form input[type="datetime-local"]:hover, +.ui.form input[type="email"]:hover, +.ui.form input[type="file"]:hover, +.ui.form input[type="number"]:hover, +.ui.form input[type="password"]:hover, +.ui.form input[type="search"]:hover, +.ui.form input[type="tel"]:hover, +.ui.form input[type="text"]:hover, +.ui.form input[type="time"]:hover, +.ui.form input[type="url"]:hover, +.ui.selection.dropdown:hover, +.ui.checkbox label:hover::before, +.ui.checkbox label:active::before, +.ui.radio.checkbox label::after, +.ui.radio.checkbox input:focus ~ label::before, +.ui.radio.checkbox input:checked ~ label::before { + background: var(--color-input-background); + border-color: var(--color-input-border-hover); + color: var(--color-input-text); +} + +input:focus, +textarea:focus, +.ui.input input:focus, +.ui.form input:not([type]):focus, +.ui.form select:focus, +.ui.form textarea:focus, +.ui.form input[type="date"]:focus, +.ui.form input[type="datetime-local"]:focus, +.ui.form input[type="email"]:focus, +.ui.form input[type="file"]:focus, +.ui.form input[type="number"]:focus, +.ui.form input[type="password"]:focus, +.ui.form input[type="search"]:focus, +.ui.form input[type="tel"]:focus, +.ui.form input[type="text"]:focus, +.ui.form input[type="time"]:focus, +.ui.form input[type="url"]:focus, +.ui.selection.dropdown:focus, +.ui.checkbox input:focus ~ label::before, +.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before, +.ui.checkbox input:checked:focus ~ label::before, +.ui.radio.checkbox input:focus:checked ~ label::before { + background: var(--color-input-background); + border-color: var(--color-primary); + color: var(--color-input-text); +} + +.ui.form .field > label, +.ui.form .inline.fields > label, +.ui.form .inline.fields .field > label, +.ui.form .inline.fields .field > p, +.ui.form .inline.field > label, +.ui.form .inline.field > p, +.ui.checkbox label, +.ui.checkbox + label, +.ui.checkbox label:hover, +.ui.checkbox + label:hover, +.ui.checkbox input:focus ~ label, +.ui.checkbox input:active ~ label { + color: var(--color-text); +} + +.ui.input, +.ui.checkbox input:focus ~ label::after, +.ui.checkbox input:checked ~ label::after, +.ui.checkbox label:active::after, +.ui.checkbox input:not([type="radio"]):indeterminate ~ label::after, +.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::after, +.ui.checkbox input:checked:focus ~ label::after, +.ui.disabled.checkbox label, +.ui.checkbox input[disabled] ~ label { + color: var(--color-input-text); +} + +.ui.radio.checkbox input:focus ~ label::after, +.ui.radio.checkbox input:checked ~ label::after, +.ui.radio.checkbox input:focus:checked ~ label::after { + background: var(--color-input-text); +} + +.ui.toggle.checkbox label::before { + background: var(--color-input-toggle-background); +} + +.ui.toggle.checkbox label, +.ui.toggle.checkbox input:checked ~ label, +.ui.toggle.checkbox input:focus:checked ~ label { + color: var(--color-text) !important; +} + +.ui.toggle.checkbox input:checked ~ label::before, +.ui.toggle.checkbox input:focus:checked ~ label::before { + background: var(--color-primary) !important; +} + +/* match <select> padding to <input> */ +.ui.form select { + padding: 0.67857143em 1em; +} + +.form .help { + color: var(--color-secondary-dark-5); + padding-bottom: 0.6em; + display: inline-block; +} + +#create-page-form form { + margin: auto; +} + +#create-page-form form .ui.message { + text-align: center; +} + +@media (min-width: 768px) { + #create-page-form form { + width: 800px !important; + } + #create-page-form form .header { + padding-left: 280px !important; + } + #create-page-form form .inline.field > label, + #create-page-form form .inline.field.captcha-field > span { + text-align: right; + width: 250px !important; + word-wrap: break-word; + } + #create-page-form form .help { + margin-left: 265px !important; + } + #create-page-form form .optional .title { + margin-left: 250px !important; + } + #create-page-form form .inline.field > input, + #create-page-form form .inline.field > textarea { + width: 50%; + } +} + +@media (max-width: 767px) { + #create-page-form form .optional .title { + margin-left: 15px; + } + #create-page-form form .inline.field > label { + display: block; + } +} + +.signin .oauth2 div { + display: inline-block; +} + +.signin .oauth2 div p { + margin: 10px 5px 0 0; + float: left; +} + +.signin .oauth2 a { + margin-right: 3px; +} + +.signin .oauth2 a:last-child { + margin-right: 0; +} + +.signin .oauth2 img { + width: 32px; + height: 32px; +} + +.signin .oauth2 img.openidConnect { + width: auto; +} + +@media (min-width: 768px) { + .g-recaptcha-style, + .h-captcha-style { + margin: 0 auto !important; + width: 304px; + padding-left: 30px; + } + .g-recaptcha-style iframe, + .h-captcha-style iframe { + border-radius: 5px !important; + width: 302px !important; + height: 76px !important; + } +} + +@media (max-height: 575px) { + #rc-imageselect, + .g-recaptcha-style, + .h-captcha-style { + transform: scale(0.77); + transform-origin: 0 0; + } +} + +.user.activate form, +.user.forgot.password form, +.user.reset.password form, +.user.link-account form, +.user.signin form, +.user.signup form { + margin: auto; + width: 700px !important; +} + +.user.activate form .ui.message, +.user.forgot.password form .ui.message, +.user.reset.password form .ui.message, +.user.link-account form .ui.message, +.user.signin form .ui.message, +.user.signup form .ui.message { + text-align: center; +} + +@media (min-width: 768px) { + .user.activate form, + .user.forgot.password form, + .user.reset.password form, + .user.link-account form, + .user.signin form, + .user.signup form { + width: 800px !important; + } + .user.activate form .header, + .user.forgot.password form .header, + .user.reset.password form .header, + .user.link-account form .header, + .user.signin form .header, + .user.signup form .header { + padding-left: 280px !important; + } + .user.activate form .inline.field > label, + .user.forgot.password form .inline.field > label, + .user.reset.password form .inline.field > label, + .user.link-account form .inline.field > label, + .user.signin form .inline.field > label, + .user.signup form .inline.field > label, + .user.activate form .inline.field.captcha-field > span, + .user.forgot.password form .inline.field.captcha-field > span, + .user.reset.password form .inline.field.captcha-field > span, + .user.link-account form .inline.field.captcha-field > span, + .user.signin form .inline.field.captcha-field > span, + .user.signup form .inline.field.captcha-field > span { + text-align: right; + width: 250px !important; + word-wrap: break-word; + } + .user.activate form .help, + .user.forgot.password form .help, + .user.reset.password form .help, + .user.link-account form .help, + .user.signin form .help, + .user.signup form .help { + margin-left: 265px !important; + } + .user.activate form .optional .title, + .user.forgot.password form .optional .title, + .user.reset.password form .optional .title, + .user.link-account form .optional .title, + .user.signin form .optional .title, + .user.signup form .optional .title { + margin-left: 250px !important; + } + .user.activate form .inline.field > input, + .user.forgot.password form .inline.field > input, + .user.reset.password form .inline.field > input, + .user.link-account form .inline.field > input, + .user.signin form .inline.field > input, + .user.signup form .inline.field > input, + .user.activate form .inline.field > textarea, + .user.forgot.password form .inline.field > textarea, + .user.reset.password form .inline.field > textarea, + .user.link-account form .inline.field > textarea, + .user.signin form .inline.field > textarea, + .user.signup form .inline.field > textarea { + width: 50%; + } +} + +@media (max-width: 767px) { + .user.activate form .optional .title, + .user.forgot.password form .optional .title, + .user.reset.password form .optional .title, + .user.link-account form .optional .title, + .user.signin form .optional .title, + .user.signup form .optional .title { + margin-left: 15px; + } + .user.activate form .inline.field > label, + .user.forgot.password form .inline.field > label, + .user.reset.password form .inline.field > label, + .user.link-account form .inline.field > label, + .user.signin form .inline.field > label, + .user.signup form .inline.field > label { + display: block; + } +} + +.user.activate form .header, +.user.forgot.password form .header, +.user.reset.password form .header, +.user.link-account form .header, +.user.signin form .header, +.user.signup form .header { + padding-left: 0 !important; + text-align: center; +} + +.user.activate form .inline.field > label, +.user.forgot.password form .inline.field > label, +.user.reset.password form .inline.field > label, +.user.link-account form .inline.field > label, +.user.signin form .inline.field > label, +.user.signup form .inline.field > label { + width: 200px; +} + +@media (max-width: 767px) { + .user.activate form .inline.field > label, + .user.forgot.password form .inline.field > label, + .user.reset.password form .inline.field > label, + .user.link-account form .inline.field > label, + .user.signin form .inline.field > label, + .user.signup form .inline.field > label, + .user.activate form input, + .user.forgot.password form input, + .user.reset.password form input, + .user.link-account form input, + .user.signin form input, + .user.signup form input { + width: 100% !important; + } +} + +.user.activate form input[type="number"], +.user.forgot.password form input[type="number"], +.user.reset.password form input[type="number"], +.user.link-account form input[type="number"], +.user.signin form input[type="number"], +.user.signup form input[type="number"] { + -moz-appearance: textfield; +} + +.user.activate form input::-webkit-outer-spin-button, +.user.forgot.password form input::-webkit-outer-spin-button, +.user.reset.password form input::-webkit-outer-spin-button, +.user.link-account form input::-webkit-outer-spin-button, +.user.signin form input::-webkit-outer-spin-button, +.user.signup form input::-webkit-outer-spin-button, +.user.activate form input::-webkit-inner-spin-button, +.user.forgot.password form input::-webkit-inner-spin-button, +.user.reset.password form input::-webkit-inner-spin-button, +.user.link-account form input::-webkit-inner-spin-button, +.user.signin form input::-webkit-inner-spin-button, +.user.signup form input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +.user.signin.webauthn-prompt { + margin-top: 15px; +} + +.repository.new.repo form, +.repository.new.migrate form, +.repository.new.fork form { + margin: auto; +} + +.repository.new.repo form .ui.message, +.repository.new.migrate form .ui.message, +.repository.new.fork form .ui.message { + text-align: center; +} + +@media (min-width: 768px) { + .repository.new.repo form, + .repository.new.migrate form, + .repository.new.fork form { + width: 800px !important; + } + .repository.new.repo form .header, + .repository.new.migrate form .header, + .repository.new.fork form .header { + padding-left: 280px !important; + } + .repository.new.repo form .inline.field > label, + .repository.new.migrate form .inline.field > label, + .repository.new.fork form .inline.field > label, + .repository.new.repo form .inline.field.captcha-field > span, + .repository.new.migrate form .inline.field.captcha-field > span, + .repository.new.fork form .inline.field.captcha-field > span { + text-align: right; + width: 250px !important; + word-wrap: break-word; + } + .repository.new.repo form .help, + .repository.new.migrate form .help, + .repository.new.fork form .help { + margin-left: 265px !important; + } + .repository.new.repo form .optional .title, + .repository.new.migrate form .optional .title, + .repository.new.fork form .optional .title { + margin-left: 250px !important; + } + .repository.new.repo form .inline.field > input, + .repository.new.migrate form .inline.field > input, + .repository.new.fork form .inline.field > input, + .repository.new.repo form .inline.field > textarea, + .repository.new.migrate form .inline.field > textarea, + .repository.new.fork form .inline.field > textarea { + width: 50%; + } +} + +@media (max-width: 767px) { + .repository.new.repo form .optional .title, + .repository.new.migrate form .optional .title, + .repository.new.fork form .optional .title { + margin-left: 15px; + } + .repository.new.repo form .inline.field > label, + .repository.new.migrate form .inline.field > label, + .repository.new.fork form .inline.field > label { + display: block; + } +} + +.repository.new.repo form .dropdown .text, +.repository.new.migrate form .dropdown .text, +.repository.new.fork form .dropdown .text { + margin-right: 0 !important; +} + +.repository.new.repo form .header, +.repository.new.migrate form .header, +.repository.new.fork form .header { + padding-left: 0 !important; + text-align: center; +} + +.repository.new.repo form .selection.dropdown, +.repository.new.migrate form .selection.dropdown, +.repository.new.fork form .selection.dropdown { + vertical-align: middle; + width: 50% !important; +} + +@media (max-width: 767px) { + .repository.new.repo form label, + .repository.new.migrate form label, + .repository.new.fork form label, + .repository.new.repo form input, + .repository.new.migrate form input, + .repository.new.fork form input, + .repository.new.repo form .selection.dropdown, + .repository.new.migrate form .selection.dropdown, + .repository.new.fork form .selection.dropdown { + width: 100% !important; + } + .repository.new.repo form .field button, + .repository.new.migrate form .field button, + .repository.new.fork form .field button, + .repository.new.repo form .field a, + .repository.new.migrate form .field a, + .repository.new.fork form .field a { + margin-bottom: 1em; + width: 100%; + } +} + +@media (min-width: 768px) { + .repository.new.repo .ui.form #auto-init { + margin-left: 265px !important; + } +} + +.repository.new.repo .ui.form .selection.dropdown:not(.owner) { + width: 50% !important; +} + +@media (max-width: 767px) { + .repository.new.repo .ui.form .selection.dropdown:not(.owner) { + width: 100% !important; + } +} + +.new.webhook form .help { + margin-left: 25px; +} + +.new.webhook .events.fields .column { + padding-left: 40px; +} + +.githook textarea { + font-family: var(--fonts-monospace); +} + +@media (max-width: 767px) { + .new.org .ui.form .field button, + .new.org .ui.form .field a { + margin-bottom: 1em; + width: 100%; + } + .new.org .ui.form .field input { + width: 100% !important; + } +} diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css new file mode 100644 index 0000000000..9e974b9ea1 --- /dev/null +++ b/web_src/css/helpers.css @@ -0,0 +1,216 @@ +.gt-df { display: flex !important; } +.gt-di { display: inline !important; } +.gt-dif { display: inline-flex !important; } +.gt-dib { display: inline-block !important; } +.gt-ac { align-items: center !important; } +.gt-ab { align-items: baseline !important; } +.gt-tc { text-align: center !important; } +.gt-tl { text-align: left !important; } +.gt-tdn { text-decoration: none !important; } +.gt-jc { justify-content: center !important; } +.gt-js { justify-content: flex-start !important; } +.gt-je { justify-content: flex-end !important; } +.gt-sb { justify-content: space-between !important; } +.gt-fc { flex-direction: column !important; } +.gt-f1 { flex: 1 !important; } +.gt-fw { flex-wrap: wrap !important; } +.gt-vm { vertical-align: middle !important; } +.gt-w-100 { width: 100% !important; } +.gt-h-100 { height: 100% !important; } +.gt-br-0 { border-radius: 0 !important; } + +/* below class names match Tailwind CSS */ +.gt-pointer-events-none { pointer-events: none !important; } +.gt-relative { position: relative !important; } + +.gt-mono { + font-family: var(--fonts-monospace) !important; + font-size: .9em !important; /* compensate for monospace fonts being usually slightly larger */ +} + +.gt-bold { font-weight: 600 !important; } + +.gt-word-break { + word-wrap: break-word !important; + word-break: break-word; /* compat: Safari */ + overflow-wrap: anywhere; +} + +.gt-ellipsis { + overflow: hidden !important; + white-space: nowrap !important; + text-overflow: ellipsis !important; +} + +.gt-full-screen-width { width: 100vw !important; } +.gt-full-screen-height { height: 100vh !important; } + +.gt-rounded { border-radius: var(--border-radius) !important; } +.gt-rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; } +.gt-rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; } +.gt-rounded-left { border-radius: var(--border-radius) 0 0 var(--border-radius) !important; } +.gt-rounded-right { border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; } + +.gt-border-secondary { border: 1px solid var(--color-secondary) !important; } +.gt-border-secondary-top { border-top: 1px solid var(--color-secondary) !important; } +.gt-border-secondary-bottom { border-bottom: 1px solid var(--color-secondary) !important; } +.gt-border-secondary-left { border-left: 1px solid var(--color-secondary) !important; } +.gt-border-secondary-right { border-right: 1px solid var(--color-secondary) !important; } + +.gt-no-transition { transition: none !important; } + +.gt-bg-red { background: var(--color-red) !important; } +.gt-bg-orange { background: var(--color-orange) !important; } +.gt-bg-yellow { background: var(--color-yellow) !important; } +.gt-bg-olive { background: var(--color-olive) !important; } +.gt-bg-green { background: var(--color-green) !important; } +.gt-bg-teal { background: var(--color-teal) !important; } +.gt-bg-blue { background: var(--color-blue) !important; } +.gt-bg-violet { background: var(--color-violet) !important; } +.gt-bg-purple { background: var(--color-purple) !important; } +.gt-bg-pink { background: var(--color-pink) !important; } +.gt-bg-brown { background: var(--color-brown) !important; } +.gt-bg-grey { background: var(--color-grey) !important; } +.gt-bg-gold { background: var(--color-gold) !important; } + +.gt-text-white { color: var(--color-white) !important; } + +.gt-m-0 { margin: 0 !important; } +.gt-m-1 { margin: .125rem !important; } +.gt-m-2 { margin: .25rem !important; } +.gt-m-3 { margin: .5rem !important; } +.gt-m-4 { margin: 1rem !important; } +.gt-m-5 { margin: 2rem !important; } + +.gt-ml-0 { margin-left: 0 !important; } +.gt-ml-1 { margin-left: .125rem !important; } +.gt-ml-2 { margin-left: .25rem !important; } +.gt-ml-3 { margin-left: .5rem !important; } +.gt-ml-4 { margin-left: 1rem !important; } +.gt-ml-5 { margin-left: 2rem !important; } + +.gt-mr-0 { margin-right: 0 !important; } +.gt-mr-1 { margin-right: .125rem !important; } +.gt-mr-2 { margin-right: .25rem !important; } +.gt-mr-3 { margin-right: .5rem !important; } +.gt-mr-4 { margin-right: 1rem !important; } +.gt-mr-5 { margin-right: 2rem !important; } + +.gt-mt-0 { margin-top: 0 !important; } +.gt-mt-1 { margin-top: .125rem !important; } +.gt-mt-2 { margin-top: .25rem !important; } +.gt-mt-3 { margin-top: .5rem !important; } +.gt-mt-4 { margin-top: 1rem !important; } +.gt-mt-5 { margin-top: 2rem !important; } + +.gt-mb-0 { margin-bottom: 0 !important; } +.gt-mb-1 { margin-bottom: .125rem !important; } +.gt-mb-2 { margin-bottom: .25rem !important; } +.gt-mb-3 { margin-bottom: .5rem !important; } +.gt-mb-4 { margin-bottom: 1rem !important; } +.gt-mb-5 { margin-bottom: 2rem !important; } + +.gt-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } +.gt-mx-1 { margin-left: .125rem !important; margin-right: .125rem !important; } +.gt-mx-2 { margin-left: .25rem !important; margin-right: .25rem !important; } +.gt-mx-3 { margin-left: .5rem !important; margin-right: .5rem !important; } +.gt-mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; } +.gt-mx-5 { margin-left: 2rem !important; margin-right: 2rem !important; } + +.gt-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } +.gt-my-1 { margin-top: .125rem !important; margin-bottom: .125rem !important; } +.gt-my-2 { margin-top: .25rem !important; margin-bottom: .25rem !important; } +.gt-my-3 { margin-top: .5rem !important; margin-bottom: .5rem !important; } +.gt-my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; } +.gt-my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; } + +.gt-p-0 { padding: 0 !important; } +.gt-p-1 { padding: .125rem !important; } +.gt-p-2 { padding: .25rem !important; } +.gt-p-3 { padding: .5rem !important; } +.gt-p-4 { padding: 1rem !important; } +.gt-p-5 { padding: 2rem !important; } + +.gt-pl-0 { padding-left: 0 !important; } +.gt-pl-1 { padding-left: .125rem !important; } +.gt-pl-2 { padding-left: .25rem !important; } +.gt-pl-3 { padding-left: .5rem !important; } +.gt-pl-4 { padding-left: 1rem !important; } +.gt-pl-5 { padding-left: 2rem !important; } + +.gt-pr-0 { padding-right: 0 !important; } +.gt-pr-1 { padding-right: .125rem !important; } +.gt-pr-2 { padding-right: .25rem !important; } +.gt-pr-3 { padding-right: .5rem !important; } +.gt-pr-4 { padding-right: 1rem !important; } +.gt-pr-5 { padding-right: 2rem !important; } + +.gt-pt-0 { padding-top: 0 !important; } +.gt-pt-1 { padding-top: .125rem !important; } +.gt-pt-2 { padding-top: .25rem !important; } +.gt-pt-3 { padding-top: .5rem !important; } +.gt-pt-4 { padding-top: 1rem !important; } +.gt-pt-5 { padding-top: 2rem !important; } + +.gt-pb-0 { padding-bottom: 0 !important; } +.gt-pb-1 { padding-bottom: .125rem !important; } +.gt-pb-2 { padding-bottom: .25rem !important; } +.gt-pb-3 { padding-bottom: .5rem !important; } +.gt-pb-4 { padding-bottom: 1rem !important; } +.gt-pb-5 { padding-bottom: 2rem !important; } + +.gt-px-0 { padding-left: 0 !important; padding-right: 0 !important; } +.gt-px-1 { padding-left: .125rem !important; padding-right: .125rem !important; } +.gt-px-2 { padding-left: .25rem !important; padding-right: .25rem !important; } +.gt-px-3 { padding-left: .5rem !important; padding-right: .5rem !important; } +.gt-px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } +.gt-px-5 { padding-left: 2rem !important; padding-right: 2rem !important; } + +.gt-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } +.gt-py-1 { padding-top: .125rem !important; padding-bottom: .125rem !important; } +.gt-py-2 { padding-top: .25rem !important; padding-bottom: .25rem !important; } +.gt-py-3 { padding-top: .5rem !important; padding-bottom: .5rem !important; } +.gt-py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } +.gt-py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; } + +.gt-gap-0 { gap: 0 !important; } +.gt-gap-1 { gap: .125rem !important; } +.gt-gap-2 { gap: .25rem !important; } +.gt-gap-3 { gap: .5rem !important; } +.gt-gap-4 { gap: 1rem !important; } +.gt-gap-5 { gap: 2rem !important; } + +.gt-gap-x-0 { column-gap: 0 !important; } +.gt-gap-x-1 { column-gap: .125rem !important; } +.gt-gap-x-2 { column-gap: .25rem !important; } +.gt-gap-x-3 { column-gap: .5rem !important; } +.gt-gap-x-4 { column-gap: 1rem !important; } +.gt-gap-x-5 { column-gap: 2rem !important; } + +.gt-gap-y-0 { row-gap: 0 !important; } +.gt-gap-y-1 { row-gap: .125rem !important; } +.gt-gap-y-2 { row-gap: .25rem !important; } +.gt-gap-y-3 { row-gap: .5rem !important; } +.gt-gap-y-4 { row-gap: 1rem !important; } +.gt-gap-y-5 { row-gap: 2rem !important; } + +.gt-content-center { align-content: center !important; } + +@media (max-width: 767px) { + .gt-db-small { display: block !important; } + .gt-w-100-small { width: 100% !important; } + .gt-js-small { justify-content: flex-start !important; } +} + +/* +gt-hidden must be placed after all other "display: xxx !important" classes to win the chance +do not use: +* "[hidden]" attribute: it's too weak, can not be applied to an element with "display: flex" +* ".hidden" class: it has been polluted by Fomantic UI in many cases +* inline style="display: none": it's difficult to tweak +* jQuery's show/hide/toggle: it can not show/hide elements with "display: xxx !important" +only use: +* this ".gt-hidden" class +* showElem/hideElem/toggleElem functions in "utils/dom.js" +*/ +.gt-hidden { display: none !important; } diff --git a/web_src/css/home.css b/web_src/css/home.css new file mode 100644 index 0000000000..5d36da594c --- /dev/null +++ b/web_src/css/home.css @@ -0,0 +1,53 @@ +.home .logo { + max-width: 220px; +} + +@media (max-width: 767px) { + .home .hero h1 { + font-size: 3.5em; + } + .home .hero h2 { + font-size: 2em; + } +} + +@media (min-width: 768px) { + .home .hero h1 { + font-size: 5.5em; + } + .home .hero h2 { + font-size: 3em; + } +} + +.home .hero .svg { + color: var(--color-green); + height: 40px; + width: 50px; + vertical-align: bottom; +} + +.home .hero.header { + font-size: 20px; +} + +.home p.large { + font-size: 16px; +} + +.home .stackable { + padding-top: 30px; +} + +.home a { + color: var(--color-green); +} + +@media (max-width: 880px) { + footer .ui.container .left, + footer .ui.container .right { + display: block; + text-align: center; + float: none; + } +} diff --git a/web_src/css/index.css b/web_src/css/index.css new file mode 100644 index 0000000000..dd5f739379 --- /dev/null +++ b/web_src/css/index.css @@ -0,0 +1,40 @@ +@import "font-awesome/css/font-awesome.css"; + +@import "./animations.css"; +@import "./shared/issuelist.css"; +@import "./features/dropzone.css"; +@import "./features/gitgraph.css"; +@import "./features/heatmap.css"; +@import "./features/imagediff.css"; +@import "./features/codeeditor.css"; +@import "./features/projects.css"; +@import "./modules/tippy.css"; +@import "./code/linebutton.css"; +@import "./markup/content.css"; +@import "./markup/codecopy.css"; +@import "./markup/asciicast.css"; + +@import "./chroma/base.css"; +@import "./chroma/light.css"; +@import "./codemirror/base.css"; +@import "./codemirror/light.css"; +@import "./console/console.css"; + +@import "./svg.css"; +@import "./tribute.css"; +@import "./font_i18n.css"; +@import "./base.css"; +@import "./home.css"; +@import "./install.css"; +@import "./form.css"; +@import "./repository.css"; +@import "./editor.css"; +@import "./organization.css"; +@import "./user.css"; +@import "./dashboard.css"; +@import "./admin.css"; +@import "./explore.css"; +@import "./review.css"; +@import "./package.css"; +@import "./runner.css"; +@import "./helpers.css"; diff --git a/web_src/css/install.css b/web_src/css/install.css new file mode 100644 index 0000000000..b936ba66fd --- /dev/null +++ b/web_src/css/install.css @@ -0,0 +1,65 @@ +.page-content.install { + padding-top: 45px; +} + +.page-content.install form.ui.form .inline.field > label { + text-align: right; + width: 30%; + padding-right: 10px; + margin-right: 0; +} + +.page-content.install form.ui.form .inline.field > .ui.checkbox:first-child { + margin-left: 30%; + padding-left: 5px; +} + +.page-content.install form.ui.form .inline.field > .ui.checkbox:first-child label { + width: auto; +} + +.page-content.install form.ui.form .title { + margin-left: 30%; + padding-left: 5px; +} + +.page-content.install form.ui.form input { + width: 60%; +} + +.page-content.install form.ui.form details.optional.field[open] { + border-bottom: 1px solid var(--color-secondary); + padding-bottom: 10px; +} + +.page-content.install form.ui.form details.optional.field[open] summary { + margin-bottom: 10px; +} + +.page-content.install form.ui.form details.optional.field * { + box-sizing: border-box; +} + +.page-content.install form.ui.form .field { + text-align: left; +} + +.page-content.install form.ui.form .field .help { + margin-left: 30%; + padding-left: 5px; + width: 60%; +} + +.page-content.install .ui .reinstall-message { + width: 70%; + margin: 20px auto; + color: var(--color-red); + text-align: left; + font-weight: bold; +} + +.page-content.install .ui .reinstall-confirm { + width: 70%; + text-align: left; + margin: 10px auto; +} diff --git a/web_src/css/markup/asciicast.css b/web_src/css/markup/asciicast.css new file mode 100644 index 0000000000..a52b2ae12e --- /dev/null +++ b/web_src/css/markup/asciicast.css @@ -0,0 +1,8 @@ +.asciinema-player-container { + width: 100%; + height: auto; +} + +.asciinema-terminal { + overflow: hidden !important; +} diff --git a/web_src/css/markup/codecopy.css b/web_src/css/markup/codecopy.css new file mode 100644 index 0000000000..e3017ae962 --- /dev/null +++ b/web_src/css/markup/codecopy.css @@ -0,0 +1,35 @@ +.markup .code-block, +.markup .mermaid-block { + position: relative; +} + +.markup .code-copy { + position: absolute; + top: 8px; + right: 6px; + padding: 9px; + visibility: hidden; + animation: fadeout 0.2s both; +} + +/* adjustments for comment content having only 14px font size */ +.repository.view.issue .comment-list .comment .markup .code-copy { + right: 5px; + padding: 8px; +} + +/* can not use regular transparent button colors for hover and active states because + we need opaque colors here as code can appear behind the button */ +.markup .code-copy:hover { + background: var(--color-secondary) !important; +} + +.markup .code-copy:active { + background: var(--color-secondary-dark-1) !important; +} + +.markup .code-block:hover .code-copy, +.markup .mermaid-block:hover .code-copy { + visibility: visible; + animation: fadein 0.2s both; +} diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css new file mode 100644 index 0000000000..00283dd0a2 --- /dev/null +++ b/web_src/css/markup/content.css @@ -0,0 +1,559 @@ +.markup { + overflow: hidden; + font-size: 16px; + line-height: 1.5 !important; + word-wrap: break-word; +} + +.markup.ui.segment { + padding: 3em; +} + +.markup.file-view { + padding: 2em !important; +} + +.markup > *:first-child { + margin-top: 0 !important; +} + +.markup > *:last-child { + margin-bottom: 0 !important; +} + +.markup a:not([href]) { + color: inherit; + text-decoration: none; +} + +.markup .absent { + color: var(--color-red); +} + +.markup .anchor { + padding-right: 4px; + margin-left: -20px; + line-height: 1; + color: inherit; +} + +.markup .anchor .svg { + vertical-align: middle; +} + +.markup .anchor:focus { + outline: none; +} + +.markup h1 .anchor .svg, +.markup h2 .anchor .svg, +.markup h3 .anchor .svg, +.markup h4 .anchor .svg, +.markup h5 .anchor .svg, +.markup h6 .anchor .svg { + visibility: hidden; +} + +.markup h1:hover .anchor .svg, +.markup h2:hover .anchor .svg, +.markup h3:hover .anchor .svg, +.markup h4:hover .anchor .svg, +.markup h5:hover .anchor .svg, +.markup h6:hover .anchor .svg { + visibility: visible; +} + +.markup h2 .anchor .svg, +.markup h3 .anchor .svg, +.markup h4 .anchor .svg { + position: relative; + top: -2px; +} + +.markup h1, +.markup h2, +.markup h3, +.markup h4, +.markup h5, +.markup h6 { + margin-top: 24px; + margin-bottom: 16px; + font-weight: 600; + line-height: 1.25; +} + +.markup h1 tt, +.markup h1 code, +.markup h2 tt, +.markup h2 code, +.markup h3 tt, +.markup h3 code, +.markup h4 tt, +.markup h4 code, +.markup h5 tt, +.markup h5 code, +.markup h6 tt, +.markup h6 code { + font-size: inherit; +} + +.markup h1 { + padding-bottom: 0.3em; + font-size: 2em; + border-bottom: 1px solid var(--color-secondary); +} + +.markup h2 { + padding-bottom: 0.3em; + font-size: 1.5em; + border-bottom: 1px solid var(--color-secondary); +} + +.markup h3 { + font-size: 1.25em; +} + +.markup h4 { + font-size: 1em; +} + +.markup h5 { + font-size: 0.875em; +} + +.markup h6 { + font-size: 0.85em; + color: var(--color-text-light-2); +} + +.markup p, +.markup blockquote, +.markup details, +.markup ul, +.markup ol, +.markup dl, +.markup table, +.markup pre { + margin-top: 0; + margin-bottom: 16px; +} + +.markup hr { + height: 4px; + padding: 0; + margin: 16px 0; + background-color: var(--color-secondary); + border: 0; +} + +.markup ul, +.markup ol { + padding-left: 2em; +} + +.markup ul.no-list, +.markup ol.no-list { + padding: 0; + list-style-type: none; +} + +.markup .task-list-item { + list-style-type: none; + position: relative; + line-height: 1.5rem; + min-height: 1.5rem; /* // to render a checkbox list without content `- [ ]`, we need this min-height to make sure the <li> can be visible */ +} + +.markup .task-list-item input[type="checkbox"] { + position: absolute; + top: 0.25em; + left: -1.6em; +} + +.markup .task-list-item p { + line-height: 1.5rem; +} + +.markup .task-list-item + .task-list-item { + margin-top: 3px; +} + +.markup input[type="checkbox"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + position: relative; + border: 1px solid var(--color-secondary); + border-radius: 2px; + background: var(--color-input-background); + height: 14px; + width: 14px; + opacity: 1 !important; /* override fomantic on edit preview */ + pointer-events: auto !important; /* override fomantic on edit preview */ + vertical-align: middle !important; /* override fomantic on edit preview */ + -webkit-print-color-adjust: exact; + color-adjust: exact; +} + +.markup input[type="checkbox"]:not([disabled]):hover, +.markup input[type="checkbox"]:not([disabled]):active { + border-color: var(--color-primary); +} + +.markup input[type="checkbox"]::after { + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + pointer-events: none; + background: var(--color-text); + mask-size: cover; + -webkit-mask-size: cover; +} + +.markup input[type="checkbox"]:checked::after { + content: ""; + mask-image: var(--checkbox-mask-checked); + -webkit-mask-image: var(--checkbox-mask-checked); + -webkit-print-color-adjust: exact; + color-adjust: exact; +} + +.markup input[type="checkbox"]:indeterminate::after { + content: ""; + mask-image: var(--checkbox-mask-indeterminate); + -webkit-mask-image: var(--checkbox-mask-indeterminate); +} + +.markup ul ul, +.markup ul ol, +.markup ol ol, +.markup ol ul { + margin-top: 0; + margin-bottom: 0; +} + +.markup ol ol, +.markup ul ol { + list-style-type: lower-roman; +} + +.markup li > p { + margin-top: 16px; +} + +.markup li + li { + margin-top: 0.25em; +} + +.markup dl { + padding: 0; +} + +.markup dl dt { + padding: 0; + margin-top: 16px; + font-size: 1em; + font-style: italic; + font-weight: 600; +} + +.markup dl dd { + padding: 0 16px; + margin-bottom: 16px; +} + +.markup blockquote { + margin-left: 0; + padding: 0 15px; + color: var(--color-text-light-2); + border-left: 4px solid var(--color-secondary); +} + +.markup blockquote > :first-child { + margin-top: 0; +} + +.markup blockquote > :last-child { + margin-bottom: 0; +} + +.markup table { + display: block; + width: 100%; + width: max-content; + max-width: 100%; + overflow: auto; +} + +.markup table th { + font-weight: 600; +} + +.markup table th, +.markup table td { + padding: 6px 13px !important; + border: 1px solid var(--color-secondary) !important; +} + +.markup table tr { + border-top: 1px solid var(--color-secondary); +} + +.markup table tr:nth-child(2n) { + background-color: var(--color-markup-table-row); +} + +.markup img { + max-width: 100%; + box-sizing: initial; +} + +.markup img[align="right"] { + padding-left: 20px; +} + +.markup img[align="left"] { + padding-right: 20px; +} + +.markup .emoji { + max-width: none; + vertical-align: text-top; +} + +.markup span.frame { + display: block; + overflow: hidden; +} + +.markup span.frame > span { + display: block; + float: left; + width: auto; + padding: 7px; + margin: 13px 0 0; + overflow: hidden; + border: 1px solid var(--color-secondary); +} + +.markup span.frame span img { + display: block; + float: left; +} + +.markup span.frame span span { + display: block; + padding: 5px 0 0; + clear: both; + color: var(--color-text); +} + +.markup span.align-center { + display: block; + overflow: hidden; + clear: both; +} + +.markup span.align-center > span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: center; +} + +.markup span.align-center span img { + margin: 0 auto; + text-align: center; +} + +.markup span.align-right { + display: block; + overflow: hidden; + clear: both; +} + +.markup span.align-right > span { + display: block; + margin: 13px 0 0; + overflow: hidden; + text-align: right; +} + +.markup span.align-right span img { + margin: 0; + text-align: right; +} + +.markup span.float-left { + display: block; + float: left; + margin-right: 13px; + overflow: hidden; +} + +.markup span.float-left span { + margin: 13px 0 0; +} + +.markup span.float-right { + display: block; + float: right; + margin-left: 13px; + overflow: hidden; +} + +.markup span.float-right > span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: right; +} + +.markup code, +.markup tt { + padding: 0.2em 0.4em; + margin: 0; + font-size: 85%; + white-space: break-spaces; + background-color: var(--color-markup-code-block); + border-radius: 4px; +} + +.markup code br, +.markup tt br { + display: none; +} + +.markup del code { + text-decoration: inherit; +} + +.markup pre > code { + padding: 0; + margin: 0; + font-size: 100%; + white-space: pre-wrap; + word-break: break-all; + overflow-wrap: break-word; + background: transparent; + border: 0; +} + +.markup .highlight { + margin-bottom: 16px; +} + +.markup .highlight pre, +.markup pre { + padding: 16px; + font-size: 85%; + line-height: 1.45; + background-color: var(--color-markup-code-block); + border-radius: 4px; +} + +.markup .highlight pre { + margin-bottom: 0; + word-break: normal; +} + +.markup pre { + word-wrap: normal; +} + +.markup pre code, +.markup pre tt { + display: inline; + max-width: initial; + padding: 0; + margin: 0; + overflow: initial; + line-height: inherit; + word-wrap: normal; + background-color: transparent; + border: 0; +} + +.markup pre code::before, +.markup pre code::after, +.markup pre tt::before, +.markup pre tt::after { + content: normal; +} + +.markup kbd { + display: inline-block; + padding: 3px 5px; + font-size: 11px; + line-height: 10px; + color: var(--color-text-light); + vertical-align: middle; + background-color: var(--color-markup-code-block); + border: 1px solid var(--color-secondary); + border-radius: 3px; + box-shadow: inset 0 -1px 0 var(--color-secondary); +} + +.markup .ui.list .list, +.markup ol.ui.list ol, +.markup ul.ui.list ul { + padding-left: 2em; +} + +.repository.wiki.revisions .ui.container > .ui.stackable.grid { + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} + +.repository.wiki.revisions .ui.container > .ui.stackable.grid > .header { + margin-top: 0; +} + +.repository.wiki.revisions .ui.container > .ui.stackable.grid > .header .sub.header { + padding-left: 52px; + word-break: break-word; +} + +.file-revisions-btn { + display: block; + float: left; + margin-bottom: 2px !important; + padding: 11px !important; + margin-right: 10px !important; +} + +.file-revisions-btn i { + -webkit-touch-callout: none; + -webkit-user-select: none; + user-select: none; +} + +.markup-render { + display: block; + border: none; + width: 100%; + height: var(--height-loading); /* actual height is set in JS after loading */ + overflow: hidden; + color-scheme: normal; /* match the value inside the iframe to allow it to become transparent */ +} + +.markup-block-error { + border: 1px solid var(--color-error-border) !important; + margin-bottom: 0 !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; + box-shadow: none !important; + font-size: 85% !important; + white-space: pre-wrap !important; + padding: 0.5rem 1rem !important; + text-align: left !important; +} + +.markup-block-error + pre { + border-top: none !important; + margin-top: 0 !important; + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; +} diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css new file mode 100644 index 0000000000..a026f9c6b6 --- /dev/null +++ b/web_src/css/modules/tippy.css @@ -0,0 +1,116 @@ +/* styles are based on node_modules/tippy.js/dist/tippy.css */ + +/* class to hide tippy target elements on page load */ +.tippy-target { + display: none !important; +} + +[data-tippy-root] { + max-width: calc(100vw - 10px); +} + +.tippy-box { + position: relative; + background-color: var(--color-body); + color: var(--color-secondary-dark-6); + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + font-size: 1rem; +} + +.tippy-box[data-theme="tooltip"] { + background-color: var(--color-tooltip-bg); + color: var(--color-tooltip-text); + border: none; +} + +.tippy-box[data-theme="menu"] { + background-color: transparent; + color: var(--color-tooltip-text); +} + +.tippy-box[data-theme="menu"] .ui.menu { + border: none; +} + +.tippy-content { + position: relative; + padding: 1rem; + z-index: 1; +} + +.tippy-box[data-theme="tooltip"] .tippy-content { + padding: 0.5rem 1rem; +} + +.tippy-box[data-theme="menu"] .tippy-content { + padding: 0; +} + +.tippy-box[data-placement^="top"] > .tippy-svg-arrow { + bottom: 0; +} + +.tippy-box[data-placement^="top"] > .tippy-svg-arrow::after, +.tippy-box[data-placement^="top"] > .tippy-svg-arrow > svg { + top: 16px; + transform: rotate(180deg); +} + +.tippy-box[data-placement^="bottom"] > .tippy-svg-arrow { + top: 0; +} + +.tippy-box[data-placement^="bottom"] > .tippy-svg-arrow > svg { + bottom: 16px; +} + +.tippy-box[data-placement^="left"] > .tippy-svg-arrow { + right: 0; +} + +.tippy-box[data-placement^="left"] > .tippy-svg-arrow::after, +.tippy-box[data-placement^="left"] > .tippy-svg-arrow > svg { + transform: rotate(90deg); + top: calc(50% - 3px); + left: 11px; +} + +.tippy-box[data-placement^="right"] > .tippy-svg-arrow { + left: 0; +} + +.tippy-box[data-placement^="right"] > .tippy-svg-arrow::after, +.tippy-box[data-placement^="right"] > .tippy-svg-arrow > svg { + transform: rotate(-90deg); + top: calc(50% - 3px); + right: 11px; +} + +.tippy-svg-arrow { + width: 16px; + height: 16px; + text-align: initial; +} + +.tippy-svg-arrow, +.tippy-svg-arrow > svg { + position: absolute; +} + +.tippy-svg-arrow-outer { + fill: var(--color-secondary); +} + +.tippy-svg-arrow-inner { + fill: var(--color-body); +} + +.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-inner, +.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-outer { + fill: var(--color-tooltip-bg); +} + +.tippy-box[data-theme="menu"] .tippy-svg-arrow-inner { + fill: var(--color-menu); +} diff --git a/web_src/css/organization.css b/web_src/css/organization.css new file mode 100644 index 0000000000..0a7cd26513 --- /dev/null +++ b/web_src/css/organization.css @@ -0,0 +1,250 @@ +#create-page-form form { + margin: auto; +} + +#create-page-form form .ui.message { + text-align: center; +} + +@media (min-width: 768px) { + #create-page-form form { + width: 800px !important; + } + #create-page-form form .header { + padding-left: 280px !important; + } + #create-page-form form .inline.field > label, + #create-page-form form .inline.field.captcha-field > span { + text-align: right; + width: 250px !important; + word-wrap: break-word; + } + #create-page-form form .help { + margin-left: 265px !important; + } + #create-page-form form .optional .title { + margin-left: 250px !important; + } + #create-page-form form .inline.field > input, + #create-page-form form .inline.field > textarea { + width: 50%; + } +} + +@media (max-width: 767px) { + #create-page-form form .optional .title { + margin-left: 15px; + } + #create-page-form form .inline.field > label { + display: block; + } +} + +.organization .head .ui.header .text { + vertical-align: middle; + font-size: 1.6rem; + margin-left: 15px; +} + +.organization .head .ui.header .org-visibility .label { + margin-left: 5px; + margin-top: 5px; +} + +.organization .head .ui.header .ui.right { + margin-top: 5px; +} + +.organization .ui.secondary.stackable.pointing.menu { + flex-wrap: wrap; + margin-top: 5px; + margin-bottom: 10px; +} + +.organization.new.org form { + margin: auto; +} + +.organization.new.org form .ui.message { + text-align: center; +} + +@media (min-width: 768px) { + .organization.new.org form { + width: 800px !important; + } + .organization.new.org form .header { + padding-left: 280px !important; + } + .organization.new.org form .inline.field > label, + .organization.new.org form .inline.field.captcha-field > span { + text-align: right; + width: 250px !important; + word-wrap: break-word; + } + .organization.new.org form .help { + margin-left: 265px !important; + } + .organization.new.org form .optional .title { + margin-left: 250px !important; + } + .organization.new.org form .inline.field > input, + .organization.new.org form .inline.field > textarea { + width: 50%; + } +} + +@media (max-width: 767px) { + .organization.new.org form .optional .title { + margin-left: 15px; + } + .organization.new.org form .inline.field > label { + display: block; + } +} + +.organization.new.org form .header { + padding-left: 0 !important; + text-align: center; +} + +.organization.options input { + min-width: 300px; +} + +.organization.profile .org-avatar { + width: 100px; + height: 100px; + margin-right: 15px; +} + +.organization.profile #org-info { + overflow-wrap: anywhere; +} + +.organization.profile #org-info .ui.header { + display: flex; + align-items: center; + font-size: 36px; + margin-bottom: 0; +} + +.organization.profile #org-info .ui.header .org-visibility .label { + margin-left: 5px; + margin-top: 2px; +} + +.organization.profile #org-info .desc { + font-size: 16px; + margin-bottom: 10px; +} + +.organization.profile #org-info .meta .item { + display: inline-block; + margin-right: 10px; +} + +.organization.profile #org-info .meta .item .icon { + margin-right: 5px; +} + +.organization.profile .ui.top.header .ui.right { + margin-top: 0; +} + +.organization.profile .teams .item { + padding: 10px 15px; +} + +.organization.teams .members a:hover, +.organization.profile .members a:hover { + text-decoration: none; +} + +.organization.teams .members .ui.avatar, +.organization.profile .members .ui.avatar { + width: 48px; + height: 48px; + margin-right: 5px; + margin-bottom: 5px; +} + +.organization.invite #invite-box { + margin: 50px auto auto; + width: 500px !important; +} + +.organization.invite #invite-box #search-user-box input { + margin-left: 0; + width: 300px; +} + +.organization.invite #invite-box .ui.button { + margin-left: 5px; + margin-top: -3px; +} + +.organization.invite .ui.avatar { + width: 100%; + height: 100%; +} + +.organization.members .list .item { + margin-left: 0; + margin-right: 0; + border-bottom: 1px solid var(--color-secondary); +} + +.organization.members .list .item .ui.avatar { + width: 48px; + height: auto; + margin-right: 1rem; + align-self: flex-start; +} + +.organization.members .list .item .meta { + line-height: 24px; + word-break: break-word; + min-width: 2em; +} + +.organization.teams .detail .item { + padding: 10px 15px; +} + +.organization.teams .detail .item:not(:last-child) { + border-bottom: 1px solid var(--color-secondary); +} + +.organization.teams .repositories .item, +.organization.teams .members .item { + padding: 10px 20px; + line-height: 32px; +} + +.organization.teams .repositories .item:not(:last-child), +.organization.teams .members .item:not(:last-child) { + border-bottom: 1px solid var(--color-secondary); +} + +.organization.teams .repositories .item .button, +.organization.teams .members .item .button { + padding: 9px 10px; +} + +.organization.teams #add-repo-form input, +.organization.teams #repo-multiple-form input, +.organization.teams #add-member-form input { + margin-left: 0; +} + +.organization.teams #add-repo-form .ui.button, +.organization.teams #repo-multiple-form .ui.button, +.organization.teams #add-member-form .ui.button { + margin-left: 5px; + margin-top: -3px; +} + +.organization.teams #repo-top-segment { + height: 60px; +} diff --git a/web_src/css/package.css b/web_src/css/package.css new file mode 100644 index 0000000000..c229e176f5 --- /dev/null +++ b/web_src/css/package.css @@ -0,0 +1,7 @@ +.container-labels td:nth-child(1) { + vertical-align: top; +} + +.container-labels td:nth-child(2) { + overflow-wrap: anywhere; +} diff --git a/web_src/css/repository.css b/web_src/css/repository.css new file mode 100644 index 0000000000..ad2ac49b99 --- /dev/null +++ b/web_src/css/repository.css @@ -0,0 +1,3629 @@ +.repository .data-table .line-num, +.repository .diff-file-box .file-body.file-code .lines-num, +.repository .diff-file-box .code-diff tbody tr .lines-type-marker, +.repository .repository-summary .segment.language-stats { + -webkit-touch-callout: none; + -webkit-user-select: none; + user-select: none; +} + +.repository .repo-header .ui.compact.menu { + margin-left: 1rem; +} + +.repository .repo-header .ui.header { + margin-top: 0; +} + +.repository .repo-header .fork-flag { + font-size: 12px; + margin-top: 2px; +} + +.repository .repo-header .repo-buttons .svg { + margin: 0 0.42857143em 0 -0.21428571em; +} + +.repository .repo-header .button { + margin-top: 2px; + margin-bottom: 2px; +} + +.repository .tabs .navbar { + justify-content: initial; +} + +.repository .navbar { + display: flex; + justify-content: space-between; +} + +.repository .navbar .ui.label { + margin-left: 7px; + padding: 3px 5px; +} + +.repository .owner.dropdown { + min-width: 40% !important; +} + +.repository .unicode-escaped .escaped-code-point[data-escaped]::before { + visibility: visible; + content: attr(data-escaped); + font-family: var(--fonts-monospace); + color: var(--color-red); +} + +.repository .unicode-escaped .escaped-code-point .char { + display: none; +} + +.repository .broken-code-point { + font-family: var(--fonts-monospace); + color: var(--color-blue); +} + +.repository .unicode-escaped .ambiguous-code-point { + border: 1px var(--color-yellow) solid; +} + +.repository .metas .menu { + overflow-x: auto; + max-height: 500px; +} + +.repository .metas .ui.list.assignees .icon { + line-height: 2em; +} + +.repository .metas .ui.list.assignees .teamavatar { + margin-top: 0.125rem; + margin-left: 6.75px; + margin-right: 8.75px; +} + +.repository .metas .ui.list .dependency { + padding: 0; + white-space: nowrap; +} + +.repository .metas .ui.list .title { + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; +} + +@media (max-width: 1200px) { + .repository .metas .ui.list .title { + max-width: 150px; + } +} + +@media (max-width: 1000px) { + .repository .metas .ui.list .title { + max-width: 100px; + } +} + +.repository .metas #deadlineForm input { + width: 12.8rem; + border-radius: 4px 0 0 4px; + border-right: 0; + white-space: nowrap; +} + +.repository .header-wrapper { + background-color: var(--color-navbar); +} + +.repository .header-wrapper .ui.tabs.divider { + border-bottom: 0; +} + +.repository .header-wrapper .ui.tabular .svg { + margin-right: 5px; +} + +.repository .filter.menu.labels .label-filter .menu .info { + display: inline-block; + padding: 0.5rem 0.25rem; + border-bottom: 1px solid var(--color-secondary); + font-size: 12px; + width: 100%; + white-space: nowrap; + text-align: center; +} + +.repository .filter.menu.labels .label-filter .menu .info code { + border: 1px solid var(--color-secondary); + border-radius: 3px; + padding: 1px 2px; + font-size: 11px; +} + +.repository .filter.menu .menu { + max-height: 500px; + overflow-x: auto; + right: 0 !important; + left: auto !important; +} + +.repository .select-label .desc { + padding-left: 23px; +} + +.repository .ui.tabs.container { + margin-top: 14px; + margin-bottom: 0; +} + +.repository .ui.tabs.container .ui.menu { + border-bottom: 0; +} + +.repository .ui.tabs.divider { + margin-top: 0; + margin-bottom: 20px; +} + +.repository #clone-panel #repo-clone-url { + width: 320px; +} + +@media (min-width: 768px) and (max-width: 991px) { + .repository #clone-panel #repo-clone-url { + width: 200px; + } +} + +@media (max-width: 767px) { + .repository #clone-panel #repo-clone-url { + width: 200px; + } +} + +.repository #clone-panel #repo-clone-https, +.repository #clone-panel #repo-clone-ssh { + border-right: none; +} + +.repository #clone-panel #more-btn { + border-left: none; +} + +.repository #clone-panel button:first-of-type { + border-radius: var(--border-radius) 0 0 var(--border-radius) !important; +} + +.repository #clone-panel button:last-of-type { + border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; +} + +.repository #clone-panel .dropdown .menu { + right: 0 !important; + left: auto !important; +} + +.repository.file.list .repo-description { + display: flex; + justify-content: space-between; + align-items: center; +} + +.repository.file.list #repo-desc { + font-size: 1.2em; +} + +.repository.file.list .repo-path .section, +.repository.file.list .repo-path .divider { + display: inline; +} + +.repository.file.list #repo-files-table { + table-layout: fixed; +} + +.repository.file.list #repo-files-table thead th { + padding-top: 8px; + padding-bottom: 5px; + font-weight: normal; +} + +.repository.file.list #repo-files-table thead .ui.avatar { + margin-bottom: 5px; +} + +.repository.file.list #repo-files-table tbody .svg { + margin-left: 3px; + margin-right: 5px; +} + +.repository.file.list #repo-files-table tbody .svg.octicon-reply { + margin-right: 10px; +} + +.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill, +.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule { + color: var(--color-primary); +} + +.repository.file.list #repo-files-table tbody .svg.octicon-file, +.repository.file.list #repo-files-table tbody .svg.octicon-file-symlink-file { + color: var(--color-secondary-dark-7); +} + +.repository.file.list #repo-files-table td { + padding-top: 0; + padding-bottom: 0; + overflow: initial; +} + +.repository.file.list #repo-files-table td.name { + width: 33%; + max-width: calc(100vw - 140px); +} + +@media (min-width: 1201px) { + .repository.file.list #repo-files-table td.name { + max-width: 150px; + } +} + +@media (min-width: 992px) and (max-width: 1200px) { + .repository.file.list #repo-files-table td.name { + max-width: 200px; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .repository.file.list #repo-files-table td.name { + max-width: 300px; + } +} + +.repository.file.list #repo-files-table td.message { + color: var(--color-text-light-1); + width: 66%; +} + +@media (min-width: 1201px) { + .repository.file.list #repo-files-table td.message { + max-width: 400px; + } +} + +@media (min-width: 992px) and (max-width: 1200px) { + .repository.file.list #repo-files-table td.message { + max-width: 350px; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .repository.file.list #repo-files-table td.message { + max-width: 250px; + } +} + +.repository.file.list #repo-files-table td.age { + width: 120px; + color: var(--color-text-light-1); +} + +.repository.file.list #repo-files-table td .truncate { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + padding-top: 8px; + padding-bottom: 8px; +} + +.repository.file.list #repo-files-table td a { + padding-top: 8px; + padding-bottom: 8px; +} + +.repository.file.list #repo-files-table td .at { + margin-left: 3px; + margin-right: 3px; +} + +.repository.file.list #repo-files-table td > * { + vertical-align: middle; +} + +.repository.file.list #repo-files-table td.message .isSigned { + cursor: default; +} + +.repository.file.list #repo-files-table tr:last-of-type td:first-child { + border-bottom-left-radius: var(--border-radius); +} + +.repository.file.list #repo-files-table tr:last-of-type td:last-child { + border-bottom-right-radius: var(--border-radius); +} + +.repository.file.list #repo-files-table tr:hover { + background-color: var(--color-hover); +} + +.repository.file.list #repo-files-table tr.has-parent a { + display: inline-block; + padding-top: 8px; + padding-bottom: 8px; + width: calc(100% - 1.25rem); +} + +.repository.file.list .non-diff-file-content .header .icon { + font-size: 1em; +} + +.repository.file.list .non-diff-file-content .header .small.icon { + font-size: 0.75em; +} + +.repository.file.list .non-diff-file-content .header .tiny.icon { + font-size: 0.5em; +} + +.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon { + line-height: 1; + padding: 10px 8px; + vertical-align: middle; + color: var(--color-text); +} + +.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon:hover { + color: var(--color-primary); +} + +.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon-danger:hover { + color: var(--color-red); +} + +.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon.disabled { + color: inherit; + opacity: var(--opacity-disabled); + cursor: default; +} + +.repository.file.list .non-diff-file-content .view-raw { + padding: 5px; +} + +.repository.file.list .non-diff-file-content .view-raw > * { + max-width: 100%; + border: 1px solid var(--color-secondary); +} + +.repository.file.list .non-diff-file-content .view-raw img { + margin: 1rem 0; + border-radius: 0; + object-fit: contain; +} + +.repository.file.list .non-diff-file-content .view-raw img[src$=".svg" i] { + max-height: 600px !important; + max-width: 600px !important; +} + +.repository.file.list .non-diff-file-content .plain-text { + padding: 1em 2em; +} + +.repository.file.list .non-diff-file-content .plain-text pre { + word-break: break-word; + white-space: pre-wrap; +} + +.repository.file.list .non-diff-file-content .csv { + overflow-x: auto; + padding: 0 !important; +} + +.repository.file.list .non-diff-file-content pre { + overflow: auto; +} + +.repository.file.list .non-diff-file-content .asciicast { + padding: 5px !important; +} + +.repository.file.list .sidebar { + padding-left: 0; +} + +.repository.file.list .sidebar .svg { + width: 16px; +} + +.repository.file.editor .treepath { + width: 100%; +} + +.repository.file.editor .treepath input { + vertical-align: middle; + box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 2px inset; + width: inherit; + padding: 7px 8px; + margin-right: 5px; +} + +.repository.file.editor .tabular.menu .svg { + margin-right: 5px; +} + +.repository.file.editor .commit-form-wrapper { + padding-left: 64px; +} + +.repository.file.editor .commit-form-wrapper .commit-avatar { + float: left; + margin-left: -64px; + width: 3em; + height: auto; +} + +.repository.file.editor .commit-form-wrapper .commit-form { + position: relative; + padding: 15px; + margin-bottom: 10px; + border: 1px solid var(--color-secondary); + background: var(--color-box-body); + border-radius: 3px; +} + +.repository.file.editor .commit-form-wrapper .commit-form::before, +.repository.file.editor .commit-form-wrapper .commit-form::after { + right: 100%; + top: 20px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.repository.file.editor .commit-form-wrapper .commit-form::before { + border-right-color: var(--color-secondary); + border-width: 9px; + margin-top: -9px; +} + +.repository.file.editor .commit-form-wrapper .commit-form::after { + border-right-color: var(--color-box-body); + border-width: 8px; + margin-top: -8px; +} + +.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .branch-name { + display: inline-block; + padding: 2px 4px; + font: 12px var(--fonts-monospace); + color: var(--color-text); + background: var(--color-secondary); + border-radius: 3px; + margin: 0 2px; +} + +.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input { + position: relative; + margin-left: 25px; +} + +.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input input { + width: 240px !important; + padding-left: 26px !important; +} + +.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .octicon-git-branch { + position: absolute; + top: 9px; + left: 10px; + color: var(--color-grey); +} + +.repository.options #interval { + width: 100px !important; + min-width: 100px; +} + +.repository.options .danger .item { + padding: 20px 15px; +} + +.repository.options .danger .ui.divider { + margin: 0; +} + +.repository .comment textarea { + max-height: none !important; +} + +.repository.new.issue .comment.form .comment .avatar { + width: 3em; +} + +.repository.new.issue .comment.form .content { + margin-left: 4em; +} + +.repository.new.issue .comment.form .content::before, +.repository.new.issue .comment.form .content::after { + right: 100%; + top: 20px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.repository.new.issue .comment.form .content::before { + border-right-color: var(--color-secondary); + border-width: 9px; + margin-top: -9px; +} + +.repository.new.issue .comment.form .content::after { + border-right-color: var(--color-box-body); + border-width: 8px; + margin-top: -8px; +} + +.repository.new.issue .comment.form .content .markup { + font-size: 14px; +} + +.repository.new.issue .comment.form .metas { + min-width: 220px; +} + +.repository.new.issue .comment.form .metas .filter.menu { + max-height: 500px; + overflow-x: auto; +} + +.repository.view.issue .instruct-toggle { + display: inline-block; +} + +.repository.view.issue .title { + padding-bottom: 0 !important; +} + +.repository.view.issue .title .issue-title { + margin-bottom: 0.5rem; +} + +.repository.view.issue .title .issue-title.edit-active { + display: flex; + align-items: center; +} + +.repository.view.issue .title .issue-title.edit-active h1 { + display: flex; + width: 100%; +} + +@media (max-width: 767px) { + .repository.view.issue .title .issue-title.edit-active { + flex-direction: column; + } + .repository.view.issue .title .issue-title.edit-active h1 { + margin-right: 0; + margin-bottom: 1rem; + padding-right: 0; + } + .repository.view.issue .title .issue-title.edit-active h1 .ui.input input { + width: calc(100% - 2rem); + } + .repository.view.issue .title .issue-title.edit-active .edit-buttons { + padding-bottom: 1rem; + width: 100%; + } + .repository.view.issue .title .issue-title.edit-active .edit-buttons .button { + width: 100%; + margin-right: 0.5rem; + } + .repository.view.issue .title .issue-title.edit-active .edit-buttons .button:last-child { + margin-right: 0; + } +} + +.repository.view.issue .title .issue-title h1 { + font-weight: 300; + font-size: 2.3rem; + margin: 0; + padding-right: 0.5rem; +} + +.repository.view.issue .title .issue-title h1 .ui.input { + font-size: 0.5em; + width: 100%; +} + +.repository.view.issue .title .issue-title h1 .ui.input input { + font-size: 1.5em; + padding: 6px 1rem; +} + +.repository.view.issue .title .issue-title .edit-button { + float: right; + padding-left: 1rem; +} + +.repository.view.issue .title .issue-title .edit-buttons { + display: flex; +} + +.repository.view.issue .title .issue-title .index { + color: var(--color-text-light-2); +} + +.repository.view.issue .title .issue-title .label { + margin-right: 10px; +} + +.repository.view.issue .title .issue-title .edit-zone { + margin-top: 10px; +} + +.repository.view.issue .pull-desc code { + color: var(--color-primary); +} + +.repository.view.issue .pull-desc a[data-clipboard-text] { + cursor: pointer; +} + +.repository.view.issue .pull-desc a[data-clipboard-text] svg { + vertical-align: middle; + position: relative; + top: -2px; + right: 1px; +} + +.repository.view.issue .pull.tabular.menu { + margin-bottom: 1rem; +} + +.repository.view.issue .pull.tabular.menu .svg { + margin-right: 5px; +} + +.repository.view.issue .pull .merge.box .avatar { + margin-left: 10px; + margin-top: 10px; +} + +.repository.view.issue .pull .merge.box .branch-update.grid .row { + padding-bottom: 1rem; +} + +.repository.view.issue .pull .merge.box .branch-update.grid .row .icon { + margin-top: 1.1rem; +} + +.repository.view.issue .pull .review-item { + display: flex; + justify-content: space-between; + align-items: center; +} + +.repository.view.issue .pull .review-item .review-item-left, +.repository.view.issue .pull .review-item .review-item-right { + display: flex; + align-items: center; +} + +.repository.view.issue .pull .review-item .text { + margin: 0.3em 0 0.5em 0.5em; +} + +.repository.view.issue .pull .review-item .type-icon { + align-self: flex-start; + margin-right: 1em; +} + +.repository.view.issue .pull .review-item .type-icon i { + line-height: 1.8em; +} + +.repository.view.issue .pull .review-item .divider { + margin: 0.5rem 0; +} + +.repository.view.issue .pull .review-item .review-content { + padding: 1em 0 1em 3.8em; +} + +.repository.view.issue .comment-list:not(.prevent-before-timeline)::before { + display: block; + content: ""; + position: absolute; + margin-top: 12px; + margin-bottom: 14px; + top: 0; + bottom: 0; + left: 96px; + width: 2px; + background-color: var(--color-timeline); + z-index: -1; +} + +.repository.view.issue .comment-list .timeline { + position: relative; + display: block; + margin-left: 40px; + padding-left: 16px; +} + +.repository.view.issue .comment-list .timeline::before { /* ciara */ + display: block; + content: ""; + position: absolute; + margin-top: 12px; + margin-bottom: 14px; + top: 0; + bottom: 0; + left: 30px; + width: 2px; + background-color: var(--color-timeline); + z-index: -1; +} + +.repository.view.issue .comment-list .timeline-item, +.repository.view.issue .comment-list .timeline-item-group { + padding: 12px 0; +} + +.repository.view.issue .comment-list .timeline-item-group .timeline-item { + padding-top: 8px; + padding-bottom: 8px; +} + +.repository.view.issue .comment-list .timeline-item { + margin-left: 16px; + position: relative; +} + +.repository.view.issue .comment-list .timeline-item .timeline-avatar { + position: absolute; + left: -68px; +} + +.repository.view.issue .comment-list .timeline-item .timeline-avatar img { + width: 40px !important; + height: 40px !important; +} + +/* Don't show the mobile oriented avatar ".inline-timeline-avatar" on desktop. Desktop uses the avatar with class ".timeline-avatar" */ +.repository.view.issue .comment-list .timeline-item .inline-timeline-avatar { + display: none; +} + +.repository.view.issue .comment-list .timeline-item img.avatar, +.repository.view.issue .comment-list .timeline-item .avatar img { + width: 20px; + height: 20px; + vertical-align: middle; +} + +.repository.view.issue .comment-list .timeline-item:first-child:not(.commit) { + padding-top: 0 !important; +} + +.repository.view.issue .comment-list .timeline-item:last-child:not(.commit) { + padding-bottom: 0 !important; +} + +.repository.view.issue .comment-list .timeline-item .badge.badge-commit { + border-color: transparent; + background: radial-gradient(var(--color-body) 40%, transparent 40%) no-repeat; +} + +.repository.view.issue .comment-list .timeline-item .badge { + width: 34px; + height: 34px; + background-color: var(--color-timeline); + border-radius: 50%; + display: flex; + float: left; + margin-left: -33px; + margin-right: 8px; + color: var(--color-text); + align-items: center; + justify-content: center; +} + +.repository.view.issue .comment-list .timeline-item .badge .svg { + width: 22px; + height: 22px; + padding: 3px; +} + +.repository.view.issue .comment-list .timeline-item .badge .svg.octicon-comment { + margin-top: 2px; +} + +.repository.view.issue .comment-list .timeline-item.comment > .content { + margin-left: -16px; +} + +.repository.view.issue .comment-list .timeline-item.event > .text { + line-height: 32px; + vertical-align: middle; +} + +.repository.view.issue .comment-list .timeline-item.commits-list { + padding-left: 15px; + padding-top: 0; +} + +.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit { + line-height: 34px; /* this must be same as .badge height, to avoid overflow */ + clear: both; /* reset the "float right shabox", in the future, use flexbox instead */ +} + +.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit > img.avatar, +.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit > .avatar img { + position: relative; + top: -2px; +} + +.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label { + margin: 0; + border: 1px solid var(--color-light-border); +} + +.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isWarning { + border: 1px solid var(--color-red-badge); + background: var(--color-red-badge-bg); +} + +.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isWarning .shortsha { + display: inline-block; + padding-top: 1px; +} + +.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isWarning:hover { + background: var(--color-red-badge-hover-bg) !important; +} + +.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerified { + border: 1px solid var(--color-green-badge); + background: var(--color-green-badge-bg); +} + +.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerified .shortsha { + display: inline-block; + padding-top: 1px; +} + +.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerified:hover { + background: var(--color-green-badge-hover-bg) !important; +} + +.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted { + border: 1px solid var(--color-yellow-badge); + background: var(--color-yellow-badge-bg); +} + +.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted .shortsha { + display: inline-block; + padding-top: 1px; +} + +.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted:hover { + background: var(--color-yellow-badge-hover-bg) !important; +} + +.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched { + border: 1px solid var(--color-orange-badge); + background: var(--color-orange-badge-bg); +} + +.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched .shortsha { + display: inline-block; + padding-top: 1px; +} + +.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched:hover { + background: var(--color-orange-badge-hover-bg) !important; +} + +.repository.view.issue .comment-list .timeline-item.event > .commit-status-link { + float: right; + margin-right: 8px; + margin-top: 4px; +} + +.repository.view.issue .comment-list .timeline-item .comparebox { + line-height: 32px; + vertical-align: middle; +} + +.repository.view.issue .comment-list .timeline-item .comparebox .compare.label { + font-size: 1rem; + margin: 0; + border: 1px solid var(--color-light-border); +} + +@media (max-width: 767px) { + .repository.view.issue .comment-list .timeline-item .ui.segments { + margin-left: -2rem; + } +} + +.repository.view.issue .comment-list .ui.comments { + max-width: 100%; +} + +.repository.view.issue .comment-list .ui.comments .avatar { + margin-right: 0.5rem; +} + +.repository.view.issue .comment-list .comment > .content > div:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +.repository.view.issue .comment-list .comment > .content > div:last-child { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} + +.repository.view.issue .comment-list .comment .comment-container { + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); +} + +@media (max-width: 767px) { + .repository.view.issue .comment-list .comment .content .form .button { + width: 100%; + margin: 0; + } + .repository.view.issue .comment-list .comment .content .form .button:not(:last-child) { + margin-bottom: 1rem; + } +} + +.repository.view.issue .comment-list .comment .merge-section { + background-color: var(--color-box-body); +} + +.repository.view.issue .comment-list .comment .merge-section .item-section { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0; + margin-top: -0.25rem; + margin-bottom: -0.25rem; +} + +@media (max-width: 767px) { + .repository.view.issue .comment-list .comment .merge-section .item-section { + align-items: flex-start; + flex-direction: column; + } +} + +.repository.view.issue .comment-list .comment .merge-section .divider { + margin-left: -1rem; + margin-right: -1rem; +} + +.repository.view.issue .comment-list .comment .merge-section.no-header::before, +.repository.view.issue .comment-list .comment .merge-section.no-header::after { + right: 100%; + top: 20px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.repository.view.issue .comment-list .comment .merge-section.no-header::before { + border-right-color: var(--color-secondary); + border-width: 9px; + margin-top: -9px; +} + +.repository.view.issue .comment-list .comment .merge-section.no-header::after { + border-right-color: var(--color-box-body); + border-width: 8px; + margin-top: -8px; +} + +.repository.view.issue .comment-list .comment .markup { + font-size: 14px; +} + +.repository.view.issue .comment-list .comment .no-content { + color: var(--color-text-light-2); + font-style: italic; +} + +.repository.view.issue .comment-list .comment .ui.form .field:first-child { + clear: none; +} + +.repository.view.issue .comment-list .comment .ui.form .field.footer { + overflow: hidden; +} + +.repository.view.issue .comment-list .comment .ui.form .field .tab.markup { + min-height: 5rem; +} + +.repository.view.issue .comment-list .comment .ui.form textarea { + height: 200px; + font-family: var(--fonts-monospace); +} + +.repository.view.issue .comment-list .comment .edit.buttons { + margin-top: 10px; +} + +.repository.view.issue .comment-list .code-comment { + border: 1px solid transparent; + padding: 0.25rem 0.5rem; + margin: 0; +} + +.repository.view.issue .comment-list .code-comment .content { + border: none !important; +} + +.repository.view.issue .comment-list .code-comment .comment-header { + background: transparent; + border-bottom: 0 !important; + padding: 0 !important; +} + +.repository.view.issue .comment-list .code-comment .comment-header::after, +.repository.view.issue .comment-list .code-comment .comment-header::before { + display: none; +} + +.repository.view.issue .comment-list .code-comment .comment-content { + margin-left: 36px; +} + +.repository.view.issue .comment-list .code-comment img.avatar, +.repository.view.issue .comment-list .comment img.avatar { + width: 28px; + height: 28px; +} + +.repository.view.issue .comment-list .comment-code-cloud .segment.reactions { + margin-top: 16px !important; + margin-bottom: -8px !important; + border-top: none !important; +} + +.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label { + border: 1px solid; + padding: 6px 10px !important; + margin: 0 2px; + border-radius: var(--border-radius); + border-color: var(--color-secondary-dark-1) !important; +} + +.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label.basic.primary { + background-color: var(--color-reaction-active-bg) !important; + border-color: var(--color-primary-alpha-80) !important; +} + +.repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply { + margin: 0; +} + +.repository.view.issue .comment-list .event { + padding-left: 15px; +} + +.repository.view.issue .comment-list .event .detail { + margin-top: 4px; + margin-left: 14px; +} + +.repository.view.issue .comment-list .event .detail .svg { + margin-right: 2px; +} + +.repository.view.issue .comment-list .event .segments { + box-shadow: none; +} + +@media (max-width: 767px) { + .repository.view.issue .comment-list { + padding: 1rem 0 !important; /* Important is required here to override existing fomantic styles. */ + } +} + +.repository.view.issue .ui.depending .item.is-closed .title { + text-decoration: line-through; +} + +.repository .comment.form .ui.comments { + margin-top: -12px; + max-width: 100%; +} + +.repository .comment.form .content .field:first-child { + clear: none; +} + +.repository .comment.form .content .form::before, +.repository .comment.form .content .form::after { + right: 100%; + top: 20px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.repository .comment.form .content .form::before { + border-right-color: var(--color-secondary); + border-width: 9px; + margin-top: -9px; +} + +.repository .comment.form .content .form::after { + border-right-color: var(--color-box-body); + border-width: 8px; + margin-top: -8px; +} + +.repository .comment.form .content textarea { + height: 200px; + font-family: var(--fonts-monospace); +} + +.repository .comment.form .content .CodeMirror-scroll { + max-height: 85vh; +} + +.repository .milestone.list { + list-style: none; + padding-top: 15px; +} + +.repository .milestone.list > .item { + padding-top: 10px; + padding-bottom: 10px; + border-bottom: 1px dashed var(--color-secondary); +} + +.repository .milestone.list > .item progress { + width: 200px; + height: 16px; +} + +.repository .milestone.list > .item .meta { + color: var(--color-text-light-2); + padding-top: 5px; +} + +.repository .milestone.list > .item .meta .issue-stats .svg { + padding-left: 5px; +} + +.repository .milestone.list > .item .meta .overdue { + color: var(--color-red); +} + +.repository .milestone.list > .item .operate { + margin-top: -15px; +} + +.repository .milestone.list > .item .operate > a { + font-size: 15px; + padding-top: 5px; + padding-right: 10px; + color: var(--color-text-light-2); +} + +.repository .milestone.list > .item .operate > a:hover { + color: var(--color-text); +} + +.repository .milestone.list > .item .content { + padding-top: 10px; +} + +.repository.new.milestone textarea { + height: 200px; +} + +.repository.compare.pull .show-form-container { + text-align: left; +} + +.repository.compare.pull .choose.branch .svg { + margin-right: 10px; +} + +.repository.compare.pull .comment.form .content::before, +.repository.compare.pull .comment.form .content::after { + right: 100%; + top: 20px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.repository.compare.pull .comment.form .content::before { + border-right-color: var(--color-secondary); + border-width: 9px; + margin-top: -9px; +} + +.repository.compare.pull .comment.form .content::after { + border-right-color: var(--color-box-body); + border-width: 8px; + margin-top: -8px; +} + +.repository.compare.pull .pullrequest-form { + margin-bottom: 1.5rem; +} + +.repository.compare.pull .markup { + font-size: 14px; +} + +.repository.compare.pull .title .issue-title { + margin-bottom: 0.5rem; +} + +.repository.compare.pull .title .issue-title .index { + color: var(--color-text-light-2); +} + +.repository .filter.dropdown .menu { + margin-top: 1px !important; +} + +.repository.branches .commit-divergence .bar-group { + position: relative; + float: left; + padding-bottom: 6px; + width: 50%; + max-width: 90px; +} + +.repository.branches .commit-divergence .bar-group:last-child { + border-left: 1px solid var(--color-secondary-dark-2); +} + +.repository.branches .commit-divergence .count { + margin: 0 3px; +} + +.repository.branches .commit-divergence .count.count-ahead { + text-align: left; +} + +.repository.branches .commit-divergence .count.count-behind { + text-align: right; +} + +.repository.branches .commit-divergence .bar { + height: 4px; + position: absolute; + background-color: var(--color-secondary-dark-2); +} + +.repository.branches .commit-divergence .bar.bar-behind { + right: 0; +} + +.repository.branches .commit-divergence .bar.bar-ahead { + left: 0; +} + +.repository.commits .header .search input { + font-weight: normal; + padding: 5px 10px; +} + +.repository #commits-table thead th:first-of-type { + padding-left: 15px; +} + +.repository #commits-table thead .sha { + width: 200px; +} + +.repository #commits-table thead .shatd { + text-align: center; +} + +.repository #commits-table td.sha .sha.label { + margin: 0; +} + +.repository #commits-table td.message { + text-overflow: unset; +} + +.repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) { + background-color: rgba(0, 0, 0, 0.02) !important; +} + +.repository #commits-table td.sha .sha.label, +.repository #repo-files-table .sha.label, +.repository #rev-list .sha.label, +.repository .timeline-item.commits-list .singular-commit .sha.label { + border: 1px solid var(--color-light-border); +} + +.repository #commits-table td.sha .sha.label .ui.signature.avatar, +.repository #repo-files-table .sha.label .ui.signature.avatar, +.repository #rev-list .sha.label .ui.signature.avatar, +.repository .timeline-item.commits-list .singular-commit .sha.label .ui.signature.avatar { + height: 16px; + margin-bottom: 0; + width: 16px; +} + +.repository #commits-table td.sha .sha.label .detail.icon, +.repository #repo-files-table .sha.label .detail.icon, +.repository #rev-list .sha.label .detail.icon, +.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon { + background: var(--color-light); + margin: -6px -10px -4px 0; + padding: 5px 4px 5px 6px; + border-left: 1px solid var(--color-light-border); + border-top: 0; + border-right: 0; + border-bottom: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.repository #commits-table td.sha .sha.label .detail.icon img, +.repository #repo-files-table .sha.label .detail.icon img, +.repository #rev-list .sha.label .detail.icon img, +.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon img { + margin-right: 0; +} + +.repository #commits-table td.sha .sha.label .detail.icon .svg, +.repository #repo-files-table .sha.label .detail.icon .svg, +.repository #rev-list .sha.label .detail.icon .svg, +.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon .svg { + margin: 0 0.25em 0 0; +} + +.repository #commits-table td.sha .sha.label .detail.icon > div, +.repository #repo-files-table .sha.label .detail.icon > div, +.repository #rev-list .sha.label .detail.icon > div, +.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon > div { + display: flex; + align-items: center; +} + +.repository #commits-table td.sha .sha.label.isSigned.isWarning, +.repository #repo-files-table .sha.label.isSigned.isWarning, +.repository #rev-list .sha.label.isSigned.isWarning, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning { + border: 1px solid var(--color-red-badge); + background: var(--color-red-badge-bg); +} + +.repository #commits-table td.sha .sha.label.isSigned.isWarning .shortsha, +.repository #repo-files-table .sha.label.isSigned.isWarning .shortsha, +.repository #rev-list .sha.label.isSigned.isWarning .shortsha, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning .shortsha { + display: inline-block; + padding-top: 1px; +} + +.repository #commits-table td.sha .sha.label.isSigned.isWarning .detail.icon, +.repository #repo-files-table .sha.label.isSigned.isWarning .detail.icon, +.repository #rev-list .sha.label.isSigned.isWarning .detail.icon, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning .detail.icon { + border-left: 1px solid var(--color-red-badge); + color: var(--color-red-badge); +} + +.repository #commits-table td.sha .sha.label.isSigned.isWarning:hover, +.repository #repo-files-table .sha.label.isSigned.isWarning:hover, +.repository #rev-list .sha.label.isSigned.isWarning:hover, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning:hover { + background: var(--color-red-badge-hover-bg) !important; +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerified, +.repository #repo-files-table .sha.label.isSigned.isVerified, +.repository #rev-list .sha.label.isSigned.isVerified, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified { + border: 1px solid var(--color-green-badge); + background: var(--color-green-badge-bg); +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerified .shortsha, +.repository #repo-files-table .sha.label.isSigned.isVerified .shortsha, +.repository #rev-list .sha.label.isSigned.isVerified .shortsha, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified .shortsha { + display: inline-block; + padding-top: 1px; +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerified .detail.icon, +.repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon, +.repository #rev-list .sha.label.isSigned.isVerified .detail.icon, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified .detail.icon { + border-left: 1px solid var(--color-green-badge); + color: var(--color-green-badge); +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerified:hover, +.repository #repo-files-table .sha.label.isSigned.isVerified:hover, +.repository #rev-list .sha.label.isSigned.isVerified:hover, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified:hover { + background: var(--color-green-badge-hover-bg) !important; +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted, +.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted { + border: 1px solid var(--color-yellow-badge); + background: var(--color-yellow-badge-bg); +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted .shortsha, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted .shortsha, +.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted .shortsha, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted .shortsha { + display: inline-block; + padding-top: 1px; +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted .detail.icon, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted .detail.icon, +.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted .detail.icon, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted .detail.icon { + border-left: 1px solid var(--color-yellow-badge); + color: var(--color-yellow-badge); +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted:hover, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted:hover, +.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted:hover, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted:hover { + background: var(--color-yellow-badge-hover-bg) !important; +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched, +.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched { + border: 1px solid var(--color-orange-badge); + background: var(--color-orange-badge-bg); +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched .shortsha, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched .shortsha, +.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched .shortsha, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched .shortsha { + display: inline-block; + padding-top: 1px; +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched .detail.icon, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched .detail.icon, +.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched .detail.icon, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched .detail.icon { + border-left: 1px solid var(--color-orange-badge); + color: var(--color-orange-badge); +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched:hover, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched:hover, +.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched:hover, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched:hover { + background: var(--color-orange-badge-hover-bg) !important; +} + +.repository .data-table { + width: 100%; +} + +.repository .data-table tr { + border-top: 0; +} + +.repository .data-table td, +.repository .data-table th { + padding: 5px !important; + overflow: hidden; + font-size: 12px; + text-align: left; + white-space: nowrap; + border: 1px solid var(--color-secondary); +} + +.repository .data-table td { + white-space: pre-line; +} + +.repository .data-table th { + font-weight: 600; + background: var(--color-box-header); + border-top: 0; +} + +.repository .data-table td.added, +.repository .data-table th.added, +.repository .data-table tr.added { + background-color: var(--color-diff-added-row-bg) !important; +} + +.repository .data-table td.removed, +.repository .data-table th.removed, +.repository .data-table tr.removed { + background-color: var(--color-diff-removed-row-bg) !important; +} + +.repository .data-table td.moved, +.repository .data-table th.moved, +.repository .data-table tr.moved { + background-color: var(--color-diff-moved-row-bg) !important; +} + +.repository .data-table tbody.section { + border-top: 2px solid var(--color-secondary); +} + +.repository .data-table .line-num { + width: 1%; + min-width: 50px; + font-family: monospace; + line-height: 20px; + color: var(--color-secondary-dark-2); + white-space: nowrap; + vertical-align: top; + cursor: pointer; + text-align: right; + background: var(--color-body); + border: 0; +} + +.repository .diff-detail-box { + padding: 7px 0; + background: var(--color-body); + line-height: 30px; +} + +@media (max-width: 991px) { + .repository .diff-detail-box { + flex-direction: column; + align-items: flex-start; + } +} + +@media (max-width: 480px) { + .repository .diff-detail-box { + flex-wrap: wrap; + } +} + +.repository .diff-detail-box.sticky { + position: sticky; + top: 0; + z-index: 8; + border-bottom: 1px solid var(--color-secondary); + padding-left: 2px; + padding-right: 2px; + margin-left: -1px; + margin-right: -1px; +} + +.repository .diff-detail-box > div::after { + clear: both; + content: ""; + display: block; +} + +.repository .diff-detail-box .diff-detail-stats strong { + margin-left: 0.25rem; + margin-right: 0.25rem; +} + +/* Because the translations contain the <strong> we need to style with nth-of-type */ + +.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(1) { + color: var(--color-yellow); +} + +.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(2) { + color: var(--color-green); +} + +.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(3) { + color: var(--color-red); +} + +@media (max-width: 480px) { + .repository .diff-detail-box .diff-detail-stats { + font-size: 0; + line-height: 1.6rem; + } + .repository .diff-detail-box .diff-detail-stats strong { + font-size: 1rem; + } +} + +.repository .diff-detail-box .diff-detail-actions > * { + margin-right: 0; +} + +.repository .diff-detail-box .diff-detail-actions > * + * { + margin-left: 0.25rem; +} + +@media (max-width: 480px) { + .repository .diff-detail-box .diff-detail-actions { + padding-top: 0.25rem; + } + .repository .diff-detail-box .diff-detail-actions .ui.button:not(.btn-submit) { + padding-left: 0.5rem; + padding-right: 0.5rem; + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; + } +} + +.repository .diff-detail-box span.status { + display: inline-block; + width: 12px; + height: 12px; + margin-right: 8px; + vertical-align: middle; +} + +.repository .diff-detail-box span.status.modify { + background-color: var(--color-yellow); +} + +.repository .diff-detail-box span.status.add { + background-color: var(--color-green); +} + +.repository .diff-detail-box span.status.del { + background-color: var(--color-red); +} + +.repository .diff-detail-box span.status.rename { + background-color: var(--color-teal); +} + +.repository .diff-detail-box .button { + padding: 8px 12px; +} + +.repository .diff-box .header:not(.resolved-placeholder) { + display: flex; + align-items: center; +} + +.repository .diff-box .header:not(.resolved-placeholder) .file { + min-width: 0; +} + +.repository .diff-box .header:not(.resolved-placeholder) .file .file-link { + max-width: fit-content; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; +} + +.repository .diff-box .header:not(.resolved-placeholder) .button { + padding: 8px 12px; + flex: 0 0 auto; + margin-top: -8px; + margin-bottom: -8px; + margin-right: 0; +} + +.repository .diff-box .resolved-placeholder { + display: flex; + align-items: center; +} + +.repository .diff-box .resolved-placeholder .button { + padding: 8px 12px; +} + +.repository .diff-file-box .header { + background-color: var(--color-box-header); +} + +.repository .diff-file-box .file-body.file-code { + background: var(--color-code-bg); +} + +.repository .diff-file-box .file-body.file-code .lines-num { + text-align: right; + color: var(--color-text-light); + width: 1%; + min-width: 50px; +} + +.repository .diff-file-box .file-body.file-code .lines-num span.fold { + display: block; + text-align: center; +} + +.repository .diff-file-box .code-diff { + font-size: 12px; +} + +.repository .diff-file-box .code-diff td { + padding: 0 0 0 10px !important; + border-top: 0; +} + +.repository .diff-file-box .code-diff .lines-num { + padding: 0 5px !important; +} + +.repository .diff-file-box .code-diff .tag-code .lines-num, +.repository .diff-file-box .code-diff .tag-code td { + padding: 0 !important; +} + +.repository .diff-file-box .code-diff tbody tr td.halfwidth { + width: 49%; /* halfwidth is used in split view - and in that case, 1% of each */ +} + +.repository .diff-file-box .code-diff tbody tr td.center { + text-align: center; +} + +.repository .diff-file-box .code-diff tbody tr [data-line-num]::before { + content: attr(data-line-num); + text-align: right; +} + +.repository .diff-file-box .code-diff tbody tr .lines-type-marker { + width: 10px; + min-width: 10px; +} + +.repository .diff-file-box .code-diff tbody tr [data-type-marker]::before { + content: attr(data-type-marker); + text-align: right; + display: inline-block; +} + +.repository .diff-file-box .code-diff-split .tag-code .lines-code code.code-inner { + padding-left: 10px !important; +} + +.repository .diff-file-box .code-diff-split table, +.repository .diff-file-box .code-diff-split tbody { + width: 100%; +} + +.repository .diff-file-box.file-content { + clear: right; +} + +.repository .diff-file-box.file-content img { + max-width: 100%; + padding: 0; + border-radius: 0; +} + +.repository .diff-file-box.file-content img.emoji { + padding: 0; +} + +.repository .diff-file-box .ui.bottom.attached.table.segment { + padding-top: 5px; + padding-bottom: 5px; +} + +.repository .diff-stats { + clear: both; + margin-bottom: 5px; + max-height: 400px; + overflow: auto; + padding-left: 0; +} + +.repository .diff-stats li { + list-style: none; + padding-bottom: 4px; + margin-bottom: 4px; + padding-left: 6px; +} + +.repository .diff-stats li + li { + border-top: 1px solid var(--color-secondary); +} + +.repository .repo-search-result { + padding-top: 10px; + padding-bottom: 10px; +} + +.repository .repo-search-result .lines-num a { + color: inherit; +} + +.repository.quickstart .guide .item { + padding: 1em; +} + +.repository.quickstart .guide .item small { + font-weight: normal; +} + +.repository.quickstart .guide .clone.button:first-child { + border-radius: var(--border-radius) 0 0 var(--border-radius); +} + +.repository.quickstart .guide .ui.action.small.input { + width: 100%; +} + +.repository.quickstart .guide #repo-clone-url { + border-radius: 0; + padding: 5px 10px; + font-size: 1.2em; + line-height: 1.4; +} + +.repository.release #release-list { + border-top: 1px solid var(--color-secondary); + margin-top: 20px; + padding-top: 15px; + padding-left: 0; +} + +.repository.release #release-list .release-list-title { + font-size: 2rem; + font-weight: normal; + margin-top: -4px; + margin-bottom: 0; +} + +.repository.release #release-list > li { + list-style: none; +} + +.repository.release #release-list > li .meta, +.repository.release #release-list > li .detail { + padding-top: 30px; + padding-bottom: 40px; +} + +.repository.release #release-list > li .meta { + text-align: right; + position: relative; +} + +.repository.release #release-list > li .meta .label { + margin-right: 0; +} + +.repository.release #release-list > li .meta .commit { + display: block; + margin-top: 10px; +} + +.repository.release #release-list > li .meta .choose { + margin-top: 15px; +} + +.repository.release #release-list > li .meta .choose .button { + margin-right: 0; +} + +.repository.release #release-list > li .detail { + border-left: 2px solid var(--color-secondary); +} + +.repository.release #release-list > li .detail .author img { + margin-bottom: 3px; +} + +.repository.release #release-list > li .detail .download > a .svg { + margin-left: 5px; + margin-right: 5px; +} + +.repository.release #release-list > li .detail .download .list { + padding-left: 0; +} + +.repository.release #release-list > li .detail .download .list li { + list-style: none; + display: block; + padding: 8px; + border: 1px solid var(--color-secondary); + background: var(--color-light); +} + +.repository.release #release-list > li .detail .download .list li a > .text.right { + margin-right: 5px; +} + +.repository.release #release-list > li .detail .download .list li + li { + border-top: 0; +} + +.repository.release #release-list > li .detail .download .list li:first-of-type { + border-radius: var(--border-radius) 0 0 var(--border-radius); +} + +.repository.release #release-list > li .detail .download .list li:last-of-type { + border-radius: 0 var(--border-radius) var(--border-radius) 0; +} + +.repository.release #release-list > li .detail .dot { + width: 10px; + height: 10px; + background-color: var(--color-secondary-dark-3); + z-index: 9; + position: absolute; + display: block; + left: -6px; + top: 40px; + border-radius: 100%; + border: 2.5px solid var(--color-body); +} + +.repository.release #tags-table .tag { + padding: 8px 12px; +} + +.repository.release #tags-table .release-tag-name { + font-size: 18px; + font-weight: normal; +} + +.repository.new.release .target { + min-width: 500px; +} + +.repository.new.release .target #tag-name { + margin-top: -4px; +} + +.repository.new.release .target .at { + margin-left: -5px; + margin-right: 5px; +} + +.repository.new.release .target .selection.dropdown { + padding-top: 10px; + padding-bottom: 10px; +} + +.repository.new.release .prerelease.field { + margin-bottom: 0; +} + +@media (max-width: 438px) { + .repository.new.release .field button, + .repository.new.release .field input { + width: 100%; + } +} + +@media (max-width: 767px) { + .repository.new.release .field button { + margin-bottom: 1em; + } +} + +.repository.new.release .field .wrap_remove { + height: 38px; +} + +.repository.new.release .field .attachment_edit { + width: 450px !important; +} + +.repository.forks .list { + margin-top: 0; +} + +.repository.forks .list .item { + padding-top: 10px; + padding-bottom: 10px; + border-bottom: 1px solid var(--color-secondary); +} + +.repository.forks .list .item .ui.avatar { + float: left; + margin-right: 5px; +} + +.repository.forks .list .item .link { + padding-top: 5px; +} + +.repository.packages .empty { + padding-top: 70px; + padding-bottom: 100px; +} + +.repository.packages .empty .svg { + height: 48px; +} + +.repository.packages .file-size { + white-space: nowrap; +} + +.repository.wiki.start .ui.segment { + padding-top: 70px; + padding-bottom: 100px; +} + +.repository.wiki.start .ui.segment .svg { + height: 48px; +} + +.repository.wiki.new .ui.attached.tabular.menu.previewtabs { + margin-bottom: 15px; +} + +.repository.wiki.view > .markup { + padding: 15px 30px; +} + +.repository.wiki.view > .markup h1:first-of-type, +.repository.wiki.view > .markup h2:first-of-type, +.repository.wiki.view > .markup h3:first-of-type, +.repository.wiki.view > .markup h4:first-of-type, +.repository.wiki.view > .markup h5:first-of-type, +.repository.wiki.view > .markup h6:first-of-type { + margin-top: 0; +} + +.repository.wiki .form .CodeMirror-scroll { + max-height: 85vh; +} + +@media (max-width: 767px) { + .repository.wiki .dividing.header .stackable.grid .button { + margin-top: 2px; + margin-bottom: 2px; + } +} + +@media (max-width: 767px) { + .repository.wiki #clone-panel #repo-clone-url { + width: 160px; + } +} + +.repository.settings.collaboration .collaborator.list { + padding: 0; +} + +.repository.settings.collaboration .collaborator.list > .item { + margin: 0; + line-height: 2em; +} + +.repository.settings.collaboration .collaborator.list > .item:not(:last-child) { + border-bottom: 1px solid var(--color-secondary); +} + +.repository.settings.collaboration #repo-collab-form #search-user-box .results { + left: 7px; +} + +.repository.settings.collaboration #repo-collab-form .ui.button { + margin-left: 5px; + margin-top: -3px; +} + +.repository.settings.collaboration #repo-collab-team-form #search-team-box .results { + left: 7px; +} + +.repository.settings.collaboration #repo-collab-team-form .ui.button { + margin-left: 5px; + margin-top: -3px; +} + +.repository.settings.branches .protected-branches .selection.dropdown { + width: 300px; +} + +.repository.settings.branches .protected-branches .item { + border: 1px solid var(--color-secondary); + padding: 10px 15px; +} + +.repository.settings.branches .protected-branches .item:not(:last-child) { + border-bottom: 0; +} + +.repository.settings.branches .branch-protection .help { + margin-left: 26px; + padding-top: 0; +} + +.repository.settings.branches .branch-protection .fields { + margin-left: 20px; + display: block; +} + +.repository.settings.branches .branch-protection .whitelist { + margin-left: 26px; +} + +.repository.settings.branches .branch-protection .whitelist .dropdown img { + display: inline-block; +} + +.repository.settings.webhook .events .column { + padding-bottom: 0; +} + +.repository.settings.webhook .events .help { + font-size: 13px; + margin-left: 26px; + padding-top: 0; +} + +.repository .ui.attached.isSigned.isWarning { + border-left: 1px solid var(--color-error-border); + border-right: 1px solid var(--color-error-border); +} + +.repository .ui.attached.isSigned.isWarning.top, +.repository .ui.attached.isSigned.isWarning.message { + border-top: 1px solid var(--color-error-border); +} + +.repository .ui.attached.isSigned.isWarning.message { + box-shadow: none; + background-color: var(--color-error-bg); + color: var(--color-error-text); +} + +.repository .ui.attached.isSigned.isWarning.message .ui.text { + color: var(--color-error-text); +} + +.repository .ui.attached.isSigned.isWarning:last-child, +.repository .ui.attached.isSigned.isWarning.bottom { + border-bottom: 1px solid var(--color-error-border); +} + +.repository .ui.attached.isSigned.isVerified { + border-left: 1px solid var(--color-success-border); + border-right: 1px solid var(--color-success-border); +} + +.repository .ui.attached.isSigned.isVerified.top, +.repository .ui.attached.isSigned.isVerified.message { + border-top: 1px solid var(--color-success-border); +} + +.repository .ui.attached.isSigned.isVerified.message { + box-shadow: none; + background-color: var(--color-success-bg); + color: var(--color-success-text); +} + +.repository .ui.attached.isSigned.isVerified.message .pull-right { + color: var(--color-text); +} + +.repository .ui.attached.isSigned.isVerified.message .ui.text { + color: var(--color-success-text); +} + +.repository .ui.attached.isSigned.isVerified:last-child, +.repository .ui.attached.isSigned.isVerified.bottom { + border-bottom: 1px solid var(--color-success-border); +} + +.repository .ui.attached.isSigned.isVerifiedUntrusted, +.repository .ui.attached.isSigned.isVerifiedUnmatched { + border-left: 1px solid var(--color-warning-border); + border-right: 1px solid var(--color-warning-border); +} + +.repository .ui.attached.isSigned.isVerifiedUntrusted.top, +.repository .ui.attached.isSigned.isVerifiedUnmatched.top, +.repository .ui.attached.isSigned.isVerifiedUntrusted.message, +.repository .ui.attached.isSigned.isVerifiedUnmatched.message { + border-top: 1px solid var(--color-warning-border); +} + +.repository .ui.attached.isSigned.isVerifiedUntrusted.message, +.repository .ui.attached.isSigned.isVerifiedUnmatched.message { + box-shadow: none; + background-color: var(--color-warning-bg); + color: var(--color-warning-text); +} + +.repository .ui.attached.isSigned.isVerifiedUntrusted.message .ui.text, +.repository .ui.attached.isSigned.isVerifiedUnmatched.message .ui.text { + color: var(--color-warning-text); +} + +.repository .ui.attached.isSigned.isVerifiedUntrusted:last-child, +.repository .ui.attached.isSigned.isVerifiedUnmatched:last-child, +.repository .ui.attached.isSigned.isVerifiedUntrusted.bottom, +.repository .ui.attached.isSigned.isVerifiedUnmatched.bottom { + border-bottom: 1px solid var(--color-warning-border); +} + +.repository .ui.segment.sub-menu { + padding: 7px; + line-height: 0; +} + +.repository .ui.segment.sub-menu .list { + width: 100%; + display: flex; + align-items: center; +} + +.repository .ui.segment.sub-menu .list .item { + width: 100%; + color: var(--color-text); +} + +.repository .ui.segment.sub-menu .list .item:first-of-type { + border-radius: var(--border-radius) 0 0 var(--border-radius); + padding-left: 0.25rem; +} + +.repository .ui.segment.sub-menu .list .item:last-of-type { + border-radius: 0 var(--border-radius) var(--border-radius) 0; + padding-right: 0.25rem; +} + +.repository .ui.segment.sub-menu .list .item a { + color: var(--color-text); +} + +.repository .ui.segment.sub-menu .list .item a:hover { + color: var(--color-primary-light-2); +} + +.repository .ui.segment.sub-menu .list .item.active { + background: var(--color-secondary); +} + +.repository .segment.reactions.dropdown .menu, +.repository .select-reaction.dropdown .menu { + right: 0 !important; + left: auto !important; + min-width: 15em; +} + +.repository .segment.reactions.dropdown .menu > .header, +.repository .select-reaction.dropdown .menu > .header { + margin: 0.75rem 0 0.5rem; +} + +.repository .segment.reactions.dropdown .menu > .item, +.repository .select-reaction.dropdown .menu > .item { + float: left; + padding: 0.25rem !important; + margin: 0.25rem; + font-size: 1.5em; + width: 39px; + left: 13px; + border-radius: 6px; + display: flex; + justify-content: center; + align-items: center; +} + +.repository .segment.reactions.dropdown .menu > .item img.emoji, +.repository .select-reaction.dropdown .menu > .item img.emoji { + margin-right: 0; +} + +.repository .segment.reactions.dropdown .menu > .item:hover, +.repository .select-reaction.dropdown .menu > .item:hover { + background: var(--color-primary); +} + +.repository .segment.reactions { + padding: 0; + display: flex; + border: none !important; + border-top: 1px solid var(--color-secondary) !important; + width: 100% !important; + max-width: 100% !important; + margin: 0 !important; +} + +.repository .segment.reactions .ui.label { + max-height: 40px; + padding: 10px 18px !important; + display: flex !important; + align-items: center; + border: 0; + border-right: 1px solid; + border-radius: 0; + margin: 0; + font-size: 14px; + font-weight: normal; + border-color: var(--color-secondary) !important; + background: var(--color-reaction-bg); +} + +.repository .segment.reactions .ui.label.disabled { + cursor: default; + opacity: 1; +} + +.repository .segment.reactions .ui.label.basic { + color: var(--color-primary) !important; +} + +.repository .segment.reactions .ui.label.basic.primary { + background-color: var(--color-reaction-active-bg) !important; + border-color: var(--color-secondary) !important; +} + +.repository .segment.reactions .reaction-count { + margin-left: 0.5rem; +} + +.repository .segment.reactions .select-reaction { + display: flex; + align-items: center; + padding: 0 14px; +} + +.repository .segment.reactions .select-reaction:not(.active) a { + display: none; +} + +.repository .segment.reactions:hover .select-reaction a { + display: block; +} + +.repository .ui.fluid.action.input .ui.search.action.input { + flex: auto; +} + +.repository .repository-summary { + box-shadow: none !important; +} + +.repository .repository-summary .segment.language-stats-details, +.repository .repository-summary .segment.repository-summary { + border-top: none; + background: none; +} + +.repository .repository-summary .segment.language-stats-details .item { + white-space: nowrap; +} + +.repository .repository-summary .segment.language-stats { + padding: 0; + height: 11px; + display: flex; + white-space: nowrap; + width: 100%; + border-radius: 0; +} + +@media (max-width: 767px) { + .repository .repository-summary .segment.language-stats { + display: none; + } +} + +.repository .repository-summary .segment.language-stats .bar { + white-space: nowrap; + border: 0; + padding: 0; + margin: 0; + height: 100%; +} + +.repository .repository-menu { + padding: 0 !important; +} + +.repository .repository-menu .item { + padding-top: 9px !important; + padding-bottom: 9px !important; +} + +#cite-repo-modal #citation-panel { + width: 500px; +} + +@media (max-width: 767px) { + #cite-repo-modal #citation-panel { + width: 100%; + } +} + +#cite-repo-modal #citation-panel input { + border-radius: 0; + padding: 5px 10px; + width: 50%; + line-height: 1.4; +} + +#cite-repo-modal #citation-panel .citation.button { + font-size: 13px; + padding: 7.5px 5px; +} + +#cite-repo-modal #citation-panel #citation-copy-content { + border-radius: 0; + padding: 5px 10px; + font-size: 1.2em; + line-height: 1.4; +} + +#cite-repo-modal #citation-panel #citation-copy-apa, +#cite-repo-modal #citation-panel #citation-copy-bibtex { + border-right: none; +} + +#cite-repo-modal #citation-panel #goto-citation-btn { + border-left: none; +} + +#cite-repo-modal #citation-panel > :first-child { + border-radius: var(--border-radius) 0 0 var(--border-radius) !important; +} + +#cite-repo-modal #citation-panel > :last-child { + border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; +} + +#cite-repo-modal #citation-panel .icon.button { + padding: 0 10px; +} + +.user-cards .list { + padding: 0; + display: flex; + flex-wrap: wrap; +} + +.user-cards .list .item { + list-style: none; + width: 32%; + margin: 10px 10px 10px 0; + padding-bottom: 14px; + float: left; +} + +.user-cards .list .item .avatar { + width: 48px; + height: 48px; + float: left; + display: block; + margin-right: 10px; +} + +.user-cards .list .item .name { + margin-top: 0; + margin-bottom: 0; + font-weight: normal; +} + +.user-cards .list .item .meta { + margin-top: 5px; +} + +#search-repo-box .results .result img, +#search-user-box .results .result img { + float: left; + margin-right: 8px; + width: 2em; + height: 2em; +} + +#search-repo-box .results .result .content, +#search-user-box .results .result .content { + margin: 6px 0; +} + +#search-team-box .results .result .content { + margin: 6px 0; +} + +#issue-actions { + margin-top: -1rem !important; /* counteract padding from Semantic */ +} + +.ui.menu .item > img:not(.ui) { + width: auto; +} + +.page.buttons { + padding-top: 15px; +} + +.commit-header-row { + min-height: 50px !important; + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.settings .content > .header, +.settings .content .segment { + box-shadow: 0 1px 2px 0 var(--color-box-header); +} + +.settings.webhooks .list > .item:not(:first-child), +.settings.githooks .list > .item:not(:first-child), +.settings.runners .list > .item:not(:first-child) { + padding: 0.25rem 1rem; + margin: 12px -1rem -1rem; +} + +.settings .list > .item:not(:first-child) { + border-top: 1px solid var(--color-secondary); + padding: 1rem; + margin: 16px -1rem -1rem; +} + +.settings .list > .item > .svg { + display: table-cell; +} + +.settings .list > .item > .svg + .content { + display: table-cell; + padding: 0 0 0 0.5em; + vertical-align: top; +} + +.settings .list > .item .info { + margin-top: 10px; +} + +.settings .list > .item .info .tab.segment { + border: 0; + padding: 10px 0 0; +} + +.settings .list.key .meta { + padding-top: 5px; + color: var(--color-text-light-2); +} + +.settings .list.email > .item:not(:first-child) { + min-height: 60px; +} + +.settings .list.collaborator > .item { + padding: 0; +} + +.ui.vertical.menu .header.item { + font-size: 1.1em; + background: var(--color-box-header); +} + +.comment:target .comment-container { + border-color: var(--color-primary) !important; + box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important; +} + +.comment:target .header::before { + border-right-color: var(--color-primary) !important; + filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important; +} + +.code-comment:target { + border-color: var(--color-primary) !important; + border-radius: var(--border-radius) !important; + box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important; +} + +.code-comment:target .content { + box-shadow: none !important; +} + +.comment-header { + border: none !important; + background: var(--color-box-header); + border-bottom: 1px solid var(--color-secondary) !important; + font-weight: normal !important; + padding: 0.5rem 1rem; + margin: 0 !important; + position: relative; + color: var(--color-text-light-2); + min-height: 41px; + background-color: var(--color-box-header); + display: flex; + justify-content: space-between; + align-items: center; +} + +.comment-header::before, +.comment-header::after { + right: 100%; + top: 20px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.comment-header::before { + border-right-color: var(--color-secondary); + border-width: 9px; + margin-top: -9px; +} + +.comment-header::after { + border-right-color: var(--color-box-header); + border-width: 8px; + margin-top: -8px; +} + +.comment-header.arrow-top::before, +.comment-header.arrow-top::after { + transform: rotate(90deg); +} + +.comment-header.arrow-top::before { + top: -9px; + left: 6px; +} + +.comment-header.arrow-top::after { + top: -8px; + left: 7px; +} + +.comment-header a { + color: var(--color-text); +} + +.comment-header a:hover { + color: var(--color-primary); +} + +.comment-header .actions a { + margin-right: 0 !important; + padding: 0.5rem !important; +} + +.comment-header-left > * + *, +.comment-header-right > * + * { + margin-left: 0.25rem; +} + +.comment-body { + background: var(--color-box-body); + border: none !important; + width: 100% !important; + max-width: 100% !important; + margin: 0 !important; +} + +.edit-label.modal .form .column, +.new-label.modal .form .column { + padding-right: 0; +} + +.edit-label.modal .form .buttons, +.new-label.modal .form .buttons { + margin-left: auto; + padding-top: 15px; +} + +.edit-label.modal .form .color.picker.column, +.new-label.modal .form .color.picker.column { + display: flex; +} + +.edit-label.modal .form .color.picker.column .minicolors, +.new-label.modal .form .color.picker.column .minicolors { + flex: 1; +} + +.edit-label.modal .form .minicolors-swatch.minicolors-sprite, +.new-label.modal .form .minicolors-swatch.minicolors-sprite { + top: 10px; + left: 10px; + width: 15px; + height: 15px; +} + +#avatar-arrow::before, +#avatar-arrow::after { + right: 100%; + top: 20px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +#avatar-arrow::before { + border-right-color: var(--color-secondary); + border-width: 9px; + margin-top: -9px; +} + +#avatar-arrow::after { + border-right-color: var(--color-box-header); + border-width: 8px; + margin-top: -8px; +} + +#transfer-repo-modal .ui.message, +#delete-repo-modal .ui.message, +#delete-wiki-modal .ui.message, +#convert-fork-repo-modal .ui.message, +#convert-mirror-repo-modal .ui.message, +#fork-repo-modal .ui.message { + width: 100% !important; +} + +.tab-size-1 { + tab-size: 1 !important; + -moz-tab-size: 1 !important; +} + +.tab-size-2 { + tab-size: 2 !important; + -moz-tab-size: 2 !important; +} + +.tab-size-3 { + tab-size: 3 !important; + -moz-tab-size: 3 !important; +} + +.tab-size-4 { + tab-size: 4 !important; + -moz-tab-size: 4 !important; +} + +.tab-size-5 { + tab-size: 5 !important; + -moz-tab-size: 5 !important; +} + +.tab-size-6 { + tab-size: 6 !important; + -moz-tab-size: 6 !important; +} + +.tab-size-7 { + tab-size: 7 !important; + -moz-tab-size: 7 !important; +} + +.tab-size-8 { + tab-size: 8 !important; + -moz-tab-size: 8 !important; +} + +.tab-size-9 { + tab-size: 9 !important; + -moz-tab-size: 9 !important; +} + +.tab-size-10 { + tab-size: 10 !important; + -moz-tab-size: 10 !important; +} + +.tab-size-11 { + tab-size: 11 !important; + -moz-tab-size: 11 !important; +} + +.tab-size-12 { + tab-size: 12 !important; + -moz-tab-size: 12 !important; +} + +.tab-size-13 { + tab-size: 13 !important; + -moz-tab-size: 13 !important; +} + +.tab-size-14 { + tab-size: 14 !important; + -moz-tab-size: 14 !important; +} + +.tab-size-15 { + tab-size: 15 !important; + -moz-tab-size: 15 !important; +} + +.tab-size-16 { + tab-size: 16 !important; + -moz-tab-size: 16 !important; +} + +.stats-table { + display: table; + width: 100%; +} + +.stats-table .table-cell { + display: table-cell; +} + +.stats-table .table-cell.tiny { + height: 0.5em; +} + +.labels-list .label { + margin: 2px 0; + display: inline-flex !important; + line-height: 1.3em; /* there is a `font-size: 1.25em` for inside emoji, so here the line-height needs to be larger slightly */ +} + +/* Scoped labels with different colors on left and right */ +.scope-parent { + background: none !important; + padding: 0 !important; +} + +.ui.label.scope-left { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + margin-right: 0; +} + +.ui.label.scope-right { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + margin-left: 0; +} + +.repo-button-row { + margin-bottom: 10px; +} + +.repo-button-row > * { + margin-top: 8px; +} + +.wiki .repo-button-row { + margin-bottom: 0; +} + +.wiki .repo-button-row > * { + margin-top: 0; +} + +.repo-button-row .button { + padding: 6px 10px !important; + height: 30px; +} + +.repo-button-row input { + height: 30px; +} + +tbody.commit-list { + vertical-align: baseline; +} + +.message-wrapper, +.author-wrapper { + overflow: hidden; + text-overflow: ellipsis; + max-width: calc(100% - 50px); + display: inline-block; + vertical-align: middle; +} + +.author-wrapper { + max-width: 180px; +} + +/* in the commit list, messages can wrap so we can use inline */ +.commit-list .message-wrapper { + display: inline; +} + +/* but in the repo-files-table we cannot */ +#repo-files-table .commit-list .message-wrapper { + display: inline-block; +} + +@media (max-width: 767px) { + tr.commit-list { + width: 100%; + } + th .message-wrapper { + display: block; + max-width: calc(100vw - 70px); + } + .author-wrapper { + max-width: 80px; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + tr.commit-list { + width: 723px; + } + th .message-wrapper { + max-width: 120px; + } +} + +@media (min-width: 992px) and (max-width: 1200px) { + tr.commit-list { + width: 933px; + } + th .message-wrapper { + max-width: 350px; + } +} + +@media (min-width: 1201px) { + tr.commit-list { + width: 1127px; + } + th .message-wrapper { + max-width: 525px; + } +} + +.commit-list .commit-status-link { + display: inline-block; + vertical-align: middle; +} + +.commit-body { + white-space: pre-wrap; + line-height: initial; +} + +/* commit history list */ +.repository:not(.diff) .commit-body { + margin: 0; +} + +/* PR-comment */ +.repository:not(.diff) .timeline-item .commit-body { + margin-left: 40px; +} + +.git-notes.top { + text-align: left; +} + +.comment-diff-data { + background: var(--color-code-bg); + max-height: calc(100vh - 10.5rem); + overflow-y: auto; +} + +.comment-diff-data pre { + line-height: 18px; + white-space: pre-wrap; + word-break: break-all; + overflow-wrap: break-word; +} + +.content-history-detail-dialog .header .avatar { + position: relative; + top: -2px; +} + +#topic_edit { + margin-top: 5px; +} + +#repo-topics { + margin-top: 5px; + display: flex; + align-items: center; + flex-wrap: wrap; +} + +.repo-topic { + font-weight: normal !important; + cursor: pointer; + margin: 2px !important; +} + +#new-dependency-drop-list.ui.selection.dropdown { + min-width: 0; + width: 100%; + border-radius: 4px 0 0 4px; + border-right: 0; + white-space: nowrap; +} + +#new-dependency-drop-list .text { + width: 100%; + overflow: hidden; +} + +#manage_topic { + font-size: 12px; +} + +.label + #manage_topic { + margin-left: 5px; +} + +.ui.small.label.topic { + margin-bottom: 4px; +} + +.repo-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + word-break: break-word; +} + +@media (max-width: 767px) { + .repo-header + .container { + margin-top: 7px; + } +} + +.repo-buttons { + align-items: center; + display: flex; + flex-direction: row; + flex-wrap: wrap; + word-break: keep-all; +} + +@media (max-width: 767px) { + .repo-buttons { + margin-top: 1em; + } +} + +.repo-buttons .ui.labeled.button > .label:hover { + color: var(--color-primary-light-2); + background: var(--color-light); +} + +.repo-buttons button[disabled] ~ .label { + opacity: var(--opacity-disabled); + color: var(--color-text-dark); + background: var(--color-light-mimic-enabled) !important; +} + +.repo-buttons button[disabled] ~ .label:hover { + color: var(--color-primary-dark-1); +} + +.repo-buttons .ui.labeled.button { + cursor: initial; +} + +.repo-buttons .ui.labeled.button > .label { + border-left: 0 !important; + margin: 0 !important; +} + +.repo-buttons .ui.labeled.button.disabled { + pointer-events: inherit !important; +} + +.repo-buttons .ui.labeled.button.disabled > .label { + color: var(--color-text-dark); + background: var(--color-light-mimic-enabled) !important; +} + +.repo-buttons .ui.labeled.button.disabled > .label:hover { + color: var(--color-primary-dark-1); +} + +.repo-buttons .ui.labeled.button.disabled > .button { + pointer-events: none !important; +} + +@media (max-width: 767px) { + .repo-buttons .ui.labeled.button .svg { + display: none; + } +} + +.tag-code { + height: 28px; +} + +.tag-code, +.tag-code td, +.tag-code .blob-excerpt { + background-color: var(--color-box-body-highlight); + vertical-align: middle; +} + +.resolved-placeholder { + font-weight: normal !important; + border: 1px solid var(--color-secondary) !important; + border-radius: var(--border-radius) !important; + margin: 4px !important; +} + +.resolved-placeholder + .comment-code-cloud { + padding-top: 0 !important; +} + +td.blob-excerpt { + background-color: var(--color-secondary-alpha-30); +} + +.issue-keyword { + border-bottom: 1px dotted var(--color-text-light-3) !important; +} + +.issue-keyword:hover { + border-bottom: none !important; +} + +.file-header { + align-items: center; + display: flex; + justify-content: space-between; + overflow-x: auto; + padding: 6px 12px !important; + font-size: 13px !important; +} + +.file-info { + display: flex; + align-items: center; +} + +.file-info-entry { + display: flex; + align-items: center; + width: max-content; +} + +.file-info-entry + .file-info-entry { + border-left: 1px solid currentcolor; + margin-left: 8px; + padding-left: 8px; +} + +#diff-container { + display: flex; +} + +#diff-file-boxes { + flex: 1; + max-width: 100%; +} + +#diff-file-tree { + width: 20%; + max-width: 380px; + line-height: inherit; + position: sticky; + padding-top: 0; + top: 47px; + max-height: calc(100vh - 50px); + height: 100%; + overflow-y: auto; +} + +@media (max-width: 991px) { + #diff-file-tree { + display: none !important; + } + .diff-toggle-file-tree-button { + display: none !important; + } +} + +.ui.message.unicode-escape-prompt { + margin-bottom: 0; + border-radius: 0; + display: flex; + flex-direction: column; +} + +.wiki-content-sidebar .ui.message.unicode-escape-prompt p, +.wiki-content-footer .ui.message.unicode-escape-prompt p { + display: none; +} + +.wiki-content-toc > ul > li { + margin-bottom: 4px; +} + +.wiki-content-toc ul { + margin: 0; + list-style: none; + padding-left: 1em; +} + +/* fomantic's last-child selector does not work with hidden last child */ +.ui.buttons .unescape-button { + border-top-right-radius: 0.28571429rem; + border-bottom-right-radius: 0.28571429rem; +} + +.webhook-info { + padding: 7px 12px; + margin: 10px 0; + background-color: var(--color-markup-code-block); + border: 1px solid var(--color-secondary); + border-radius: 3px; + font-size: 13px; + line-height: 1.5; + overflow: auto; +} + +.title_wip_desc { + margin-top: 1em; +} + +.sidebar-item-link { + align-items: center; + word-break: break-all; +} + +.diff-file-box[data-folded="true"] .diff-file-body { + display: none; +} + +.diff-file-box[data-folded="true"] .diff-file-header { + border-radius: var(--border-radius) !important; +} + +.diff-file-header-actions > * + * { + margin-left: 0.5rem !important; +} + +.ui.attached.header.diff-file-header.sticky-2nd-row { + position: sticky; + top: 77px; + z-index: 7; +} + +@media (max-width: 480px) { + .ui.attached.header.diff-file-header.sticky-2nd-row { + position: static; + } +} + +.ui.attached.header.diff-file-header .diff-file-header-actions { + flex-shrink: 0; +} + +.ui.attached.header.diff-file-header .diff-file-name { + flex: auto; + min-width: 100px; +} + +.diff-file-body { + overflow-x: scroll; +} + +.diff-stats-bar { + display: inline-block; + background-color: var(--color-red); + height: 12px; + width: 40px; +} + +.diff-stats-bar .diff-stats-add-bar { + background-color: var(--color-green); + height: 100%; +} + +/* prevent page shaking on language bar click */ +.repository-summary-language-stats { + height: 48px; + overflow: hidden; +} + +@media (max-width: 767px) { + .repository-summary-language-stats { + height: auto; + } +} + +.ui.form .right .ui.button { + margin-left: 0.25em; + margin-right: 0; +} + +.removed-code { + background: var(--color-diff-removed-word-bg); +} + +.added-code { + background: var(--color-diff-added-word-bg); +} + +.code-diff-unified .del-code, +.code-diff-unified .del-code td, +.code-diff-split .del-code .lines-num-old, +.code-diff-split .del-code .lines-escape-old, +.code-diff-split .del-code .lines-type-marker-old, +.code-diff-split .del-code .lines-code-old { + background: var(--color-diff-removed-row-bg); + border-color: var(--color-diff-removed-row-border); +} + +.code-diff-unified .add-code, +.code-diff-unified .add-code td, +.code-diff-split .add-code .lines-num-new, +.code-diff-split .add-code .lines-type-marker-new, +.code-diff-split .add-code .lines-escape-new, +.code-diff-split .add-code .lines-code-new, +.code-diff-split .del-code .add-code.lines-num-new, +.code-diff-split .del-code .add-code.lines-type-marker-new, +.code-diff-split .del-code .add-code.lines-escape-new, +.code-diff-split .del-code .add-code.lines-code-new { + background: var(--color-diff-added-row-bg); + border-color: var(--color-diff-added-row-border); +} + +.code-diff-split .del-code .lines-num-new, +.code-diff-split .del-code .lines-type-marker-new, +.code-diff-split .del-code .lines-code-new, +.code-diff-split .del-code .lines-escape-new, +.code-diff-split .add-code .lines-num-old, +.code-diff-split .add-code .lines-escape-old, +.code-diff-split .add-code .lines-type-marker-old, +.code-diff-split .add-code .lines-code-old { + background: var(--color-diff-inactive); +} + +.code-diff-split tbody tr td:nth-child(5), +.code-diff-split tbody tr td.add-comment-right { + border-left: 1px solid var(--color-secondary); +} + +.repository .ui.menu.new-menu { + background: none !important; +} + +@media (max-width: 1200px) { + .repository .ui.menu.new-menu::after { + background: none !important; + } +} + +.repository.migrate .card { + transition: all 0.1s ease-in-out; + box-shadow: none !important; + border: 1px solid var(--color-secondary); + color: var(--color-text); +} + +.repository.migrate .card:hover { + transform: scale(105%); + box-shadow: 0 0.5rem 1rem var(--color-shadow) !important; +} + +@media (max-width: 767px) { + .repository.file.list #repo-files-table .entry, + .repository.file.list #repo-files-table .commit-list { + align-items: center; + display: flex !important; + padding-top: 4px; + padding-bottom: 4px; + } + .repository.file.list #repo-files-table .entry td.age, + .repository.file.list #repo-files-table .commit-list td.age, + .repository.file.list #repo-files-table .entry th.age, + .repository.file.list #repo-files-table .commit-list th.age { + margin-left: auto; + } + .repository.file.list #repo-files-table .entry td.message, + .repository.file.list #repo-files-table .commit-list td.message, + .repository.file.list #repo-files-table .entry span.commit-summary, + .repository.file.list #repo-files-table .commit-list span.commit-summary { + display: none !important; + } + .issue-list-headers.ui[class].grid > div:nth-child(1) { + order: 1; + width: 50%; + } + .issue-list-headers.ui[class].grid > div:nth-child(2) { + order: 3; + width: 100%; + } + .issue-list-headers.ui[class].grid > div.column:not(.row):nth-child(3) { + order: 2; + width: 50%; + } + .repository.view.issue .comment-list .timeline, + .repository.view.issue .comment-list .timeline-item { + margin-left: 0; + } + .repository.view.issue .comment-list .timeline::before { + left: 14px; + } + .repository.view.issue .comment-list .timeline .inline-timeline-avatar { + display: flex; + margin-bottom: auto; + } + .repository.view.issue .comment-list .timeline .inline-timeline-avatar img.avatar { + height: 24px; + width: 24px; + } + .repository.view.issue .comment-list .timeline .comment-header { + padding-left: 4px; + } + .repository.view.issue .comment-list .timeline .comment-header::before, + .repository.view.issue .comment-list .timeline .comment-header::after { + content: unset; + } + /* Don't show the general avatar, we show the inline avatar on mobile. + * And don't show the role labels, there's no place for that. */ + .repository.view.issue .comment-list .timeline .timeline-avatar, + .repository.view.issue .comment-list .timeline .comment-header-right .role-label { + display: none; + } + .commit-header-row .ui.horizontal.list { + width: 100%; + overflow-x: auto; + margin-top: 2px; + } + .commit-header-row .ui.horizontal.list .item { + align-items: center; + display: flex; + } + .commit-header-row .author { + padding: 3px 0; + } + .commit-header h3 { + flex-basis: auto !important; + margin-bottom: 0.5rem !important; + } + .commits-table { + flex-direction: column; + } + .commits-table .commits-table-left { + align-items: initial !important; + margin-bottom: 6px; + } + .commits-table .commits-table-right form { + display: flex; + flex-wrap: wrap; + } + .commits-table .commits-table-right form > div:nth-child(1) { + order: 1; + } + .commits-table .commits-table-right form > div:nth-child(2) { + order: 3; + margin-left: 0.5rem; + margin-top: 0.5rem; + } + .commits-table .commits-table-right form > button:nth-child(3) { + order: 2; + margin-left: 0.25rem; + } + .commit-table { + overflow-x: auto; + } + .commit-table td.sha, + .commit-table th.sha { + display: none !important; + } + .commit-table .commit-list span.message-wrapper { + max-width: none; + } + .commit-table .commit-list tr td:last-child { + display: block; + width: max-content; + } + .commit-table .commit-list td.author { + display: block; + width: calc(100% + 0.5rem); + } + .commit-table .commit-list .copy-commit-sha { + display: none !important; + } + .comment-header { + flex-wrap: wrap; + } + .comment-header .comment-header-left { + flex-wrap: wrap; + } + .comment-header .comment-header-right { + margin-left: auto; + } +} + +.branch-dropdown-button { + max-width: 340px; + vertical-align: bottom !important; +} + +@media (min-width: 768px) and (max-width: 991px) { + .branch-dropdown-button { + max-width: 185px; + } +} + +@media (max-width: 767px) { + .branch-dropdown-button { + max-width: 165px; + } +} + +.pr-status { + padding: 0 !important; /* To clear fomantic's padding on .ui.segment elements */ + display: flex; + align-items: center; +} + +.pr-status .commit-status { + margin: 1em; + flex-shrink: 0; +} + +.pr-status .status-context { + display: flex; + justify-content: space-between; + width: 100%; +} + +.pr-status .status-context > span { + padding: 1em 0; +} + +.pr-status .status-details { + display: flex; + padding-right: 0.5em; + align-items: center; + justify-content: flex-end; +} + +@media (max-width: 767px) { + .pr-status .status-details { + flex-direction: column; + align-items: flex-end; + justify-content: center; + } +} + +.pr-status .status-details > span { + padding-right: 0.5em; /* To match the alignment with the "required" label */ +} diff --git a/web_src/css/review.css b/web_src/css/review.css new file mode 100644 index 0000000000..b58cc5a196 --- /dev/null +++ b/web_src/css/review.css @@ -0,0 +1,322 @@ +.show-outdated, +.hide-outdated { + -webkit-touch-callout: none; + -webkit-user-select: none; + user-select: none; +} + +.ui.button.add-code-comment { + padding: 2px; + position: absolute; + margin-left: -22px; + z-index: 5; + opacity: 0; + transition: transform 0.1s ease-in-out; + transform: scale(1); + box-shadow: none !important; + border: none !important; +} + +.ui.button.add-code-comment:hover { + transform: scale(1.1); +} + +.lines-escape a.toggle-escape-button::before { + visibility: visible; + content: "⚠️"; + font-family: var(--fonts-emoji); + color: var(--color-red); +} + +.repository .diff-file-box .code-diff td.lines-escape { + padding-left: 0 !important; +} + +.diff-file-box .lines-code:hover .ui.button.add-code-comment { + opacity: 1; +} + +.repository .diff-file-box .code-diff .add-comment-left, +.repository .diff-file-box .code-diff .add-comment-right, +.repository .diff-file-box .code-diff .add-code-comment .add-comment-left, +.repository .diff-file-box .code-diff .add-code-comment .add-comment-right, +.repository .diff-file-box .code-diff .add-code-comment .lines-type-marker { + padding-left: 0 !important; + padding-right: 0 !important; +} + +.add-comment-left.add-comment-right .ui.attached.header { + border: 1px solid var(--color-secondary); +} + +.add-comment-left.add-comment-right .ui.attached.header:not(.top) { + margin-bottom: 0.5em; +} + +.add-comment .lines-num, +.add-comment .lines-escape, +.add-comment .lines-type-marker { + display: none; +} + +.show-outdated:hover, +.hide-outdated:hover { + text-decoration: underline; +} + +.comment-code-cloud { + padding: 0.5rem 1rem !important; + position: relative; + margin: 0 auto; + max-width: 1000px; +} + +@media (max-width: 767px) { + .comment-code-cloud { + max-width: none; + padding: 0.75rem !important; + } + .comment-code-cloud .code-comment-buttons { + margin: 0.5rem 0 0.25rem !important; + } + .comment-code-cloud .code-comment-buttons .code-comment-buttons-buttons { + width: 100%; + } + .comment-code-cloud .ui.buttons { + width: 100%; + margin: 0 !important; + } + .comment-code-cloud .ui.buttons .button { + flex: 1; + } +} + +.comment-code-cloud .comments .comment { + padding: 0; +} + +@media (max-width: 767px) { + .comment-code-cloud .comments .comment { + display: flex; + } + .comment-code-cloud + .comments + .comment + .comment-header-right.actions + .ui.basic.label { + display: none; + } + .comment-code-cloud .comments .comment .avatar { + width: auto; + float: none; + margin: 0 0.5rem 0 0; + flex-shrink: 0; + } + .comment-code-cloud .comments .comment .avatar ~ .content { + margin-left: 1em; + } + .comment-code-cloud .comments .comment img.avatar { + margin: 0 !important; + } + .comment-code-cloud .comments .comment .comment-content { + margin-left: 0 !important; + } + .comment-code-cloud .comments .comment .comment-container { + width: 100%; + } + .comment-code-cloud .comments .comment.code-comment { + padding: 0 0 0.5rem !important; + } +} + +.comment-code-cloud .attached.tab { + border: 0; + padding: 0; + margin: 0; +} + +.comment-code-cloud .attached.header { + padding: 0.1rem 1rem; +} + +.comment-code-cloud .attached.header .text { + margin: 0; +} + +.comment-code-cloud .right.menu.options .item { + padding: 0.85714286em 0.442857em; + cursor: pointer; +} + +.comment-code-cloud .ui.active.tab { + padding: 0.5em; +} + +.comment-code-cloud .ui.active.tab.markup { + padding: 1em; + min-height: 168px; +} + +.comment-code-cloud .ui.tabular.menu { + margin: 0.5em; +} + +.comment-code-cloud .footer { + border-top: 1px solid var(--color-secondary); + padding: 10px 0; +} + +.comment-code-cloud .footer .markup-info { + display: inline-block; + margin: 5px 0; + font-size: 12px; + color: var(--color-text-light); +} + +.comment-code-cloud .footer .ui.right.floated { + padding-top: 6px; +} + +.comment-code-cloud .footer::after { + clear: both; + content: ""; + display: block; +} + +@media (max-width: 767px) { + .comment-code-cloud .button { + width: 100%; + margin: 0 !important; + margin-bottom: 0.75rem !important; + } +} + +.diff-file-body .comment-form { + margin: 0 0 0 3em; +} + +.file-comment { + color: var(--color-text); +} + +a.blob-excerpt { + color: var(--color-text-light); + height: 28px; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + background: var(--color-expand-button); +} + +a.blob-excerpt:hover { + background: var(--color-primary); + color: var(--color-primary-contrast); +} + +/* See the comment of createCommentEasyMDE() for the review editor */ +/* EasyMDE's options can not handle minHeight & maxHeight together correctly, we have to set minHeight in JS code */ +.review-box-panel .CodeMirror-scroll { + min-height: 80px; + max-height: calc(100vh - 360px); +} + +@media (max-width: 767px) { + .review-box-panel .CodeMirror-scroll { + max-width: calc(100vw - 70px); + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .review-box-panel .CodeMirror-scroll { + max-width: 700px; + } +} + +@media (min-width: 992px) and (max-width: 1200px) { + .review-box-panel .CodeMirror-scroll { + max-width: 800px; + } +} + +@media (min-width: 1201px) { + .review-box-panel .CodeMirror-scroll { + max-width: 900px; + } +} + +#review-box { + position: relative; +} + +.review-box-panel { + position: absolute; + min-width: max-content; + top: 45px; + right: -5px; + z-index: 2; +} + +#review-box .review-comments-counter { + background-color: var(--color-primary-light-4); + color: var(--color-primary-contrast); +} + +#review-box:hover .review-comments-counter { + background-color: var(--color-primary-light-5); +} + +#review-box .review-comments-counter[data-pending-comment-number="0"] { + display: none; +} + +.pull.files.diff [id] { + scroll-margin-top: 99px; +} + +@media (max-width: 991px) { + .pull.files.diff [id] { + scroll-margin-top: 130px; + } +} + +.changed-since-last-review { + border: 1px var(--color-accent) solid; + background-color: var(--color-small-accent); + border-radius: 15px; + padding: 4px 8px; + margin: -8px 0; /* just like other buttons in the diff box header */ + font-size: 0.857rem; /* just like .ui.tiny.button */ +} + +.viewed-file-form { + display: flex; + align-items: center; + border: 1px solid transparent; + padding: 4px 8px; + margin: -8px 0; /* just like other buttons in the diff box header */ + border-radius: 0.285rem; /* just like .ui.tiny.button */ + font-size: 0.857rem; /* just like .ui.tiny.button */ +} + +.viewed-file-form input { + margin-right: 4px; +} + +.viewed-file-checked-form { + background-color: var(--color-small-accent); + border-color: var(--color-accent); +} + +#viewed-files-summary { + width: 72px; + height: 10px; +} + +.diff-file-box { + border-radius: 0.285rem; /* Just like ui.top.attached.header */ +} + +.diff-file-box:target { + box-shadow: 0 0 0 3px var(--color-accent); +} diff --git a/web_src/css/runner.css b/web_src/css/runner.css new file mode 100644 index 0000000000..d0ea5252e5 --- /dev/null +++ b/web_src/css/runner.css @@ -0,0 +1,54 @@ +.runner-container { + padding-bottom: 30px; +} + +.runner-container .runner-ops > a { + margin-left: 0.5em; +} + +.runner-container .runner-ops-delete { + color: var(--color-red-light); +} + +.runner-container .runner-basic-info .gt-dib { + margin-right: 1em; +} + +.runner-container .runner-status-online { + padding: 0.3em 0.5em; + background-color: var(--color-green); + color: var(--color-white); +} + +.runner-container .runner-new-text { + color: var(--color-white); +} + +.runner-container #runner-new:hover .runner-new-text { + color: var(--color-white) !important; +} + +.runner-container .runner-new-menu { + width: 300px; +} + +.runner-container .task-status-success { + background-color: var(--color-green); + color: var(--color-white); +} + +.runner-container .task-status-failure { + background-color: var(--color-red-light); + color: var(--color-white); +} + +.runner-container .task-status-running { + background-color: var(--color-blue); + color: var(--color-white); +} + +.runner-container .task-status-cancelled, +.runner-container .task-status-blocked { + background-color: var(--color-yellow); + color: var(--color-white); +} diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css new file mode 100644 index 0000000000..6e2cc737e7 --- /dev/null +++ b/web_src/css/shared/issuelist.css @@ -0,0 +1,166 @@ +.issue.list { + list-style: none; + margin-top: 1rem; +} + +.issue.list a:not(.label):hover { + color: var(--color-primary) !important; +} + +.issue.list > .item .issue-checkbox { + margin-top: 1px; +} + +.issue.list > .item .issue-item-icon svg { + margin-right: 0.75rem; + margin-top: 1px; +} + +.issue.list > .item .issue-item-icons-right > * + * { + margin-left: 0.5rem; +} + +.issue.list > .item .issue-item-main { + width: 100%; +} + +.issue.list > .item .action-item-main { + width: 80%; +} + +.issue.list > .item .issue-item-right { + width: 15%; +} + +.issue.list > .item .issue-item-top-row { + max-width: 100%; + color: var(--color-text); + font-size: 16px; + min-width: 0; + font-weight: 600; +} + +.issue.list > .item .issue-item-top-row a.index { + max-width: fit-content; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + word-break: break-all; +} + +.issue.list > .item .labels-list { + position: relative; + top: -1.5px; +} + +.issue.list > .item .issue-item-bottom-row { + font-size: 13px; +} + +.issue.list > .item .title { + color: var(--color-text); + word-break: break-word; +} + +.issue.list > .item .issue-item-icon-right { + min-width: 2rem; +} + +.issue.list > .item .assignee { + position: relative; + top: -2px; +} + +.issue.list > .item .assignee img { + width: 20px; + height: 20px; + margin-right: 2px; +} + +.issue.list > .item .desc { + color: var(--color-text-light-2); +} + +.issue.list > .item .desc a { + color: inherit; +} + +.issue.list > .item .desc .time-since, +.issue.list > .item .desc a { + margin-left: 0.25rem; + margin-right: 0.25rem; +} + +.issue.list > .item .desc .waiting, +.issue.list > .item .desc .approvals, +.issue.list > .item .desc .rejects { + padding-left: 5px; +} + +.issue.list > .item .desc .checklist { + padding-left: 5px; +} + +.issue.list > .item .desc .checklist progress { + margin-left: 2px; + width: 80px; + height: 6px; + display: inline-block; + border-radius: 3px; + vertical-align: 2px !important; +} + +.issue.list > .item .desc .checklist progress::-webkit-progress-value { + background-color: var(--color-secondary-dark-4); +} + +.issue.list > .item .desc .checklist progress::-moz-progress-bar { + background-color: var(--color-secondary-dark-4); +} + +.issue.list > .item .desc .conflicting { + padding-left: 5px; +} + +.issue.list > .item .desc .due-date { + padding-left: 5px; +} + +.issue.list > .item .desc a.milestone, +.issue.list > .item .desc a.project { + margin-left: 5px; +} + +.issue.list > .item .desc a.ref { + margin-left: 8px; +} + +.issue.list > .item .desc a.ref span { + margin-right: -4px; +} + +.issue.list > .item .desc .overdue { + color: var(--color-red); +} + +.issue.list .branches { + display: inline-flex; + padding: 0 4px; +} + +.issue.list .branches .branch { + background-color: var(--color-secondary); + border-radius: 3px; +} + +.issue.list .branches .truncated-name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 10em; +} + +.issue.list > .item + .item { + border-top: 1px solid var(--color-secondary); +} diff --git a/web_src/css/standalone/swagger.css b/web_src/css/standalone/swagger.css new file mode 100644 index 0000000000..5c1902f11f --- /dev/null +++ b/web_src/css/standalone/swagger.css @@ -0,0 +1,31 @@ +html { + box-sizing: border-box; + overflow-y: scroll; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +body { + margin: 0; + background: #fff; +} + +.swagger-back-link { + color: #1f69c0; + text-decoration: none; + position: absolute; + top: 1rem; + right: 1.5rem; + display: flex; + align-items: center; +} + +.swagger-back-link svg { + color: inherit; + fill: currentcolor; + margin-right: 0.5rem; +} diff --git a/web_src/css/svg.css b/web_src/css/svg.css new file mode 100644 index 0000000000..b63445eb4e --- /dev/null +++ b/web_src/css/svg.css @@ -0,0 +1,9 @@ +.svg { + display: inline-block; + vertical-align: text-top; + fill: currentcolor; +} + +.middle .svg { + vertical-align: middle; +} diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css new file mode 100644 index 0000000000..e2216085a9 --- /dev/null +++ b/web_src/css/themes/theme-arc-green.css @@ -0,0 +1,200 @@ +@import "../chroma/base.css"; +@import "../chroma/dark.css"; +@import "../codemirror/dark.css"; + +:root { + --is-dark-theme: true; + --color-primary: #87ab63; + --color-primary-contrast: #ffffff; + --color-primary-dark-1: #93b373; + --color-primary-dark-2: #9fbc82; + --color-primary-dark-3: #abc492; + --color-primary-dark-4: #b7cda1; + --color-primary-dark-5: #cfddc1; + --color-primary-dark-6: #e7eee0; + --color-primary-dark-7: #f8faf6; + --color-primary-light-1: #7a9e55; + --color-primary-light-2: #6c8c4c; + --color-primary-light-3: #5f7b42; + --color-primary-light-4: #516939; + --color-primary-light-5: #364626; + --color-primary-light-6: #1b2313; + --color-primary-light-7: #080b06; + --color-primary-alpha-10: #87ab6319; + --color-primary-alpha-20: #87ab6333; + --color-primary-alpha-30: #87ab634b; + --color-primary-alpha-40: #87ab6366; + --color-primary-alpha-50: #87ab6380; + --color-primary-alpha-60: #87ab6399; + --color-primary-alpha-70: #87ab63b3; + --color-primary-alpha-80: #87ab63cc; + --color-primary-alpha-90: #87ab63e1; + --color-secondary: #454a57; + --color-secondary-dark-1: #505665; + --color-secondary-dark-2: #5b6273; + --color-secondary-dark-3: #71798e; + --color-secondary-dark-4: #7f8699; + --color-secondary-dark-5: #8c93a4; + --color-secondary-dark-6: #9aa0af; + --color-secondary-dark-7: #a8adba; + --color-secondary-dark-8: #b6bac5; + --color-secondary-dark-9: #c4c7d0; + --color-secondary-dark-10: #d2d4db; + --color-secondary-dark-11: #dfe1e6; + --color-secondary-dark-12: #edeef1; + --color-secondary-dark-13: #fbfbfc; + --color-secondary-light-1: #373b46; + --color-secondary-light-2: #292c34; + --color-secondary-light-3: #1c1e23; + --color-secondary-light-4: #0e0f11; + --color-secondary-alpha-10: #454a5719; + --color-secondary-alpha-20: #454a5733; + --color-secondary-alpha-30: #454a574b; + --color-secondary-alpha-40: #454a5766; + --color-secondary-alpha-50: #454a5780; + --color-secondary-alpha-60: #454a5799; + --color-secondary-alpha-70: #454a57b3; + --color-secondary-alpha-80: #454a57cc; + --color-secondary-alpha-90: #454a57e1; + /* colors */ + --color-red: #cc4848; + --color-orange: #cc580c; + --color-yellow: #cc9903; + --color-olive: #91a313; + --color-green: #87ab63; + --color-teal: #00918a; + --color-blue: #3a8ac6; + --color-violet: #906ae1; + --color-purple: #b259d0; + --color-pink: #d22e8b; + --color-brown: #a47252; + --color-grey: #9ea2aa; + --color-black: #1e222e; + /* light variants - produced via Sass scale-color(color, $lightness: -10%) */ + --color-red-light: #c23636; + --color-orange-light: #b84f0b; + --color-yellow-light: #b88a03; + --color-olive-light: #839311; + --color-green-light: #7a9e55; + --color-teal-light: #00837c; + --color-blue-light: #347cb3; + --color-violet-light: #7b4edb; + --color-purple-light: #a742c9; + --color-pink-light: #be297d; + --color-brown-light: #94674a; + --color-grey-light: #8d919b; + --color-black-light: #1b1f29; + /* other colors */ + --color-gold: #b1983b; + --color-white: #ffffff; + --color-diff-removed-word-bg: #6f3333; + --color-diff-added-word-bg: #3c653c; + --color-diff-removed-row-bg: #3c2626; + --color-diff-moved-row-bg: #818044; + --color-diff-added-row-bg: #283e2d; + --color-diff-removed-row-border: #634343; + --color-diff-moved-row-border: #bcca6f; + --color-diff-added-row-border: #314a37; + --color-diff-inactive: #353846; + --color-error-border: #a04141; + --color-error-bg: #522; + --color-error-bg-active: #744; + --color-error-bg-hover: #633; + --color-error-text: #f9cbcb; + --color-success-border: #458a57; + --color-success-bg: #284034; + --color-success-text: #6cc664; + --color-warning-border: #bb9d00; + --color-warning-bg: #3a3a30; + --color-warning-text: #fbbd08; + --color-info-border: #306090; + --color-info-bg: #26354c; + --color-info-text: #38a8e8; + --color-red-badge: #db2828; + --color-red-badge-bg: #db28281a; + --color-red-badge-hover-bg: #db28284d; + --color-green-badge: #21ba45; + --color-green-badge-bg: #21ba451a; + --color-green-badge-hover-bg: #21ba454d; + --color-yellow-badge: #fbbd08; + --color-yellow-badge-bg: #fbbd081a; + --color-yellow-badge-hover-bg: #fbbd084d; + --color-orange-badge: #f2711c; + --color-orange-badge-bg: #f2711c1a; + --color-orange-badge-hover-bg: #f2711c4d; + --color-git: #f05133; + /* target-based colors */ + --color-body: #383c4a; + --color-box-header: #404652; + --color-box-body: #2a2e3a; + --color-box-body-highlight: #353945; + --color-text-dark: #dbe0ea; + --color-text: #bbc0ca; + --color-text-light: #a6aab5; + --color-text-light-1: #979ba6; + --color-text-light-2: #8a8e99; + --color-text-light-3: #707687; + --color-footer: #2e323e; + --color-timeline: #4c525e; + --color-input-text: #d5dbe6; + --color-input-background: #232933; + --color-input-toggle-background: #454a57; + --color-input-border: #454a57; + --color-input-border-hover: #505667; + --color-navbar: #2a2e3a; + --color-navbar-transparent: #2a2e3a00; + --color-light: #00000028; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #ffffff28; + --color-hover: #ffffff10; + --color-active: #ffffff16; + --color-menu: #2e323e; + --color-card: #2e323e; + --color-markup-table-row: #ffffff06; + --color-markup-code-block: #ffffff0d; + --color-button: #353846; + --color-code-bg: #2a2e3a; + --color-code-sidebar-bg: #2e323e; + --color-shadow: #00000060; + --color-secondary-bg: #2a2e3a; + --color-text-focus: #fff; + --color-expand-button: #3c404d; + --color-placeholder-text: #6a737d; + --color-editor-line-highlight: var(--color-primary-light-5); + --color-project-board-bg: var(--color-secondary-light-2); + --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #ffffff12; + --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-header-bar: #2e323e; + --color-label-active-bg: #4c525e; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: #534d1b; + + accent-color: var(--color-accent); + color-scheme: dark; +} + +/* invert emojis that are hard to read otherwise */ +.emoji[aria-label="check mark"], +.emoji[aria-label="currency exchange"], +.emoji[aria-label="TOP arrow"], +.emoji[aria-label="END arrow"], +.emoji[aria-label="ON! arrow"], +.emoji[aria-label="SOON arrow"], +.emoji[aria-label="heavy dollar sign"], +.emoji[aria-label="copyright"], +.emoji[aria-label="registered"], +.emoji[aria-label="trade mark"], +.emoji[aria-label="multiply"], +.emoji[aria-label="plus"], +.emoji[aria-label="minus"], +.emoji[aria-label="divide"], +.emoji[aria-label="curly loop"], +.emoji[aria-label="double curly loop"], +.emoji[aria-label="wavy dash"], +.emoji[aria-label="paw prints"], +.emoji[aria-label="musical note"], +.emoji[aria-label="musical notes"] { + filter: invert(100%) hue-rotate(180deg); +} diff --git a/web_src/css/themes/theme-auto.css b/web_src/css/themes/theme-auto.css new file mode 100644 index 0000000000..e0d31e2cfb --- /dev/null +++ b/web_src/css/themes/theme-auto.css @@ -0,0 +1 @@ +@import "./theme-arc-green.css" (prefers-color-scheme: dark); diff --git a/web_src/css/tribute.css b/web_src/css/tribute.css new file mode 100644 index 0000000000..b7b0a25509 --- /dev/null +++ b/web_src/css/tribute.css @@ -0,0 +1,42 @@ +@import "tributejs/dist/tribute.css"; + +.tribute-container { + box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25); + border-radius: 0.25rem; +} + +.tribute-container ul { + margin-top: 0 !important; + background: var(--color-body) !important; +} + +.tribute-container li { + padding: 3px 0.5rem !important; +} + +.tribute-container li span.fullname { + font-weight: normal; + font-size: 0.8rem; + margin-left: 3px; +} + +.tribute-container li.highlight, +.tribute-container li:hover { + background: var(--color-primary) !important; + color: var(--color-primary-contrast) !important; +} + +.tribute-item { + display: flex; + align-items: center; +} + +.tribute-item .emoji, +.tribute-item img[src*="/avatar/"] { + margin-right: 0.5rem; +} + +.tribute-container img { + width: 1.5rem !important; + height: 1.5rem !important; +} diff --git a/web_src/css/user.css b/web_src/css/user.css new file mode 100644 index 0000000000..adf865496b --- /dev/null +++ b/web_src/css/user.css @@ -0,0 +1,173 @@ +.user.profile .ui.card .header { + display: block; + font-weight: 600; + font-size: 1.3rem; + margin-top: -0.2rem; + line-height: 1.3rem; +} + +.user.profile .ui.card .profile-avatar-name { + border-top: none; + text-align: center; +} + +.user.profile .ui.card .extra.content { + padding: 0; +} + +.user.profile .ui.card .extra.content ul { + margin: 0; + padding: 0; +} + +.user.profile .ui.card .extra.content ul li { + padding: 10px; + list-style: none; +} + +.user.profile .ui.card .extra.content ul li:not(:last-child) { + border-bottom: 1px solid var(--color-secondary); +} + +.user.profile .ui.card .extra.content ul li .svg { + margin-left: 1px; + margin-right: 5px; +} + +.user.profile .ui.card .extra.content ul li.follow .ui.button { + width: 100%; +} + +.user.profile .ui.card #profile-avatar { + background: none; + padding: 1rem 1rem 0.25rem; + justify-content: center; +} + +.user.profile .ui.card #profile-avatar img { + width: 100%; + height: auto; + object-fit: contain; + margin: 0; +} + +@media (max-width: 767px) { + .user.profile .ui.card #profile-avatar img { + width: 30vw; + } +} + +@media (max-width: 767px) { + .user.profile .ui.card { + width: 100%; + } +} + +.user.profile .ui.repository.list { + margin-top: 25px; +} + +.user.profile #loading-heatmap { + margin-bottom: 1em; +} + +.user.profile .ui.secondary.stackable.pointing.menu { + flex-wrap: wrap; +} + +.user.followers .header.name { + font-size: 20px; + line-height: 24px; + vertical-align: middle; +} + +.user.followers .follow .ui.button { + padding: 8px 15px; +} + +.user.notification .svg { + float: left; + font-size: 2em; +} + +.user.notification .svg.green { + color: var(--color-green); +} + +.user.notification .svg.red { + color: var(--color-red); +} + +.user.notification .svg.purple { + color: var(--color-purple); +} + +.user.notification .svg.blue { + color: var(--color-blue); +} + +.user.notification .content { + float: left; + margin-left: 7px; +} + +.user.notification table form { + display: inline-block; +} + +.user.notification table button { + padding: 3px 3px 3px 5px; +} + +.user.notification table tr { + cursor: pointer; +} + +.user .button.adopt, +.user .button.delete { + margin-top: -15px; + margin-bottom: -15px; +} + +.user .button.adopt .label, +.user .button.delete .label { + vertical-align: middle; +} + +.user.link-account:not(.icon) { + padding-top: 15px; + padding-bottom: 5px; +} + +.user.settings .iconFloat { + float: left; +} + +.user-orgs { + display: flex; + flex-flow: row wrap; + padding: 0; + margin: -3px !important; +} + +.user-orgs li { + display: flex; + border-bottom: 0 !important; + padding: 3px !important; + width: 20%; + max-width: 60px; +} + +.user-badges { + display: grid; + grid-template-columns: repeat(auto-fill, 64px); + gap: 2px; +} + +.user-badges img { + object-fit: contain; +} + +#notification_div .tab.segment { + overflow-x: auto; +} |