Платформа ЦРНП "Мирокод" для разработки проектов
https://git.mirocod.ru
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2189 lines
43 KiB
2189 lines
43 KiB
:root { |
|
/* documented customizable variables */ |
|
--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"; |
|
/* other variables */ |
|
--border-radius: .28571429rem; |
|
--opacity-disabled: .55; |
|
--height-loading: 12rem; |
|
--color-primary: #4183c4; |
|
--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; |
|
/* 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; |
|
--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-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; |
|
/* target-based colors */ |
|
--color-body: #ffffff; |
|
--color-text-dark: #080808; |
|
--color-text: #212121; |
|
--color-text-light: #555555; |
|
--color-text-light-2: #808080; |
|
--color-text-light-3: #a0a0a0; |
|
--color-box-header: #f7f7f7; |
|
--color-box-body: #ffffff; |
|
--color-footer: #ffffff; |
|
--color-timeline: #ececec; |
|
--color-input-text: #212121; |
|
--color-input-background: #ffffff; |
|
--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: #0000000f; |
|
--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); |
|
/* 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>'); |
|
} |
|
|
|
: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: .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; |
|
} |
|
|
|
img { |
|
border-radius: 3px; |
|
} |
|
|
|
table { |
|
border-collapse: collapse; |
|
} |
|
|
|
details summary { |
|
cursor: pointer; |
|
} |
|
|
|
details summary > * { |
|
display: inline; |
|
} |
|
|
|
* { |
|
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; |
|
} |
|
|
|
::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; |
|
} |
|
|
|
a, |
|
.ui.breadcrumb a { |
|
color: var(--color-primary); |
|
cursor: pointer; |
|
text-decoration-skip-ink: all; |
|
} |
|
|
|
a.muted { |
|
color: inherit; |
|
} |
|
|
|
a:hover, |
|
a.muted:hover, |
|
.ui.breadcrumb a:hover { |
|
color: var(--color-primary); |
|
} |
|
|
|
a.label, |
|
.repository-menu a, |
|
.ui.search .results a, |
|
.ui .menu a, |
|
.ui.cards a.card, |
|
.issue-keyword a { |
|
text-decoration: none !important; |
|
} |
|
|
|
.ui.breadcrumb a:hover { |
|
text-decoration: underline !important; |
|
} |
|
|
|
.ui.breadcrumb .divider { |
|
color: var(--color-text-light-2); |
|
} |
|
|
|
.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; |
|
|
|
&:not(:focus):not(: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); |
|
|
|
> .svg { |
|
margin-right: .35em; |
|
} |
|
} |
|
|
|
.ui.menu .item > .label { |
|
background: var(--color-grey); |
|
} |
|
|
|
.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: -.25rem; |
|
margin-bottom: -.25rem; |
|
} |
|
|
|
.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.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: .85714286em; |
|
padding-right: .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.progress[data-percent="0"] .bar .progress { |
|
color: var(--color-text); |
|
} |
|
|
|
.ui.attached.table { |
|
border-color: var(--color-secondary); |
|
} |
|
|
|
.ui.table { |
|
color: var(--color-text); |
|
background: var(--color-body); |
|
border-color: var(--color-secondary); |
|
} |
|
|
|
.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.modal { |
|
background: var(--color-body); |
|
} |
|
|
|
.ui.modal > .header { |
|
border-color: var(--color-secondary); |
|
border-top-left-radius: var(--border-radius); |
|
border-top-right-radius: var(--border-radius); |
|
} |
|
|
|
.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.images .image, |
|
.ui.avatar.images img, |
|
.ui.avatar.images svg, |
|
.ui.avatar.image img, |
|
.ui.avatar.image svg, |
|
.ui.avatar.image, |
|
.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; |
|
} |
|
|
|
.following.bar { |
|
z-index: 900; |
|
left: 0; |
|
margin: 0 !important; |
|
|
|
&.light { |
|
background: var(--color-body); |
|
border-bottom: 1px solid var(--color-secondary); |
|
} |
|
|
|
.column .menu { |
|
margin-top: 0; |
|
} |
|
|
|
.top.menu a.item.brand { |
|
padding-left: 0; |
|
} |
|
|
|
.brand .ui.mini.image { |
|
width: 30px; |
|
} |
|
|
|
.top.menu a.item:hover, |
|
.top.menu .dropdown.item:hover, |
|
.top.menu .dropdown.item.active { |
|
background-color: transparent; |
|
} |
|
|
|
.top.menu a.item:hover { |
|
color: rgba(0, 0, 0, .45); |
|
} |
|
|
|
.top.menu .menu { |
|
z-index: 900; |
|
} |
|
|
|
.fitted .svg { |
|
margin-right: 0; |
|
vertical-align: middle; |
|
} |
|
|
|
.searchbox { |
|
background-color: #f4f4f4 !important; |
|
|
|
&:focus { |
|
background-color: #e9e9e9 !important; |
|
} |
|
} |
|
|
|
.text .svg { |
|
width: 16px; |
|
text-align: center; |
|
} |
|
|
|
#navbar { |
|
width: 100vw; |
|
min-height: 52px; |
|
padding: 0 .5rem; |
|
} |
|
|
|
#navbar .brand { |
|
margin: 0; |
|
} |
|
|
|
#navbar .dropdown .avatar { |
|
margin-right: 0 !important; |
|
} |
|
|
|
@media @mediaSm { |
|
#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.dropdown .menu { |
|
border-color: var(--color-secondary); |
|
} |
|
|
|
.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: .35; |
|
} |
|
|
|
.ui.loading.loading.input > i.icon svg { |
|
visibility: hidden; |
|
} |
|
|
|
.ui { |
|
&.left:not(.action) { |
|
float: left; |
|
} |
|
|
|
&.right:not(.action) { |
|
float: right; |
|
} |
|
|
|
&.button, |
|
&.menu .item { |
|
user-select: auto; |
|
} |
|
|
|
&.container { |
|
&.fluid { |
|
&.padded { |
|
padding: 0 10px; |
|
} |
|
} |
|
} |
|
|
|
&.form { |
|
.ui.button { |
|
font-weight: normal; |
|
} |
|
} |
|
|
|
&.floating.label { |
|
z-index: 10; |
|
} |
|
|
|
&.transparent.label { |
|
background-color: transparent; |
|
} |
|
|
|
&.menu, |
|
&.vertical.menu, |
|
&.segment { |
|
box-shadow: none; |
|
} |
|
|
|
/* Override semantic selector '.ui.menu:not(.vertical) .item > .button' */ |
|
/* This fixes the commit graph button on the commits page */ |
|
|
|
.menu:not(.vertical) .item > .button.compact { |
|
padding: .58928571em 1.125em; |
|
} |
|
|
|
.menu:not(.vertical) .item > .button.small { |
|
font-size: .92857143rem; |
|
} |
|
|
|
&.menu .ui.dropdown.item .menu .item { |
|
width: 100%; |
|
} |
|
|
|
&.dropdown .menu > .item > .floating.label { |
|
z-index: 11; |
|
} |
|
|
|
&.dropdown .menu .menu > .item > .floating.label { |
|
z-index: 21; |
|
} |
|
|
|
&.dropdown .menu > .header { |
|
font-size: .8em; |
|
} |
|
|
|
.text { |
|
&.red { |
|
color: var(--color-red) !important; |
|
|
|
a { |
|
color: inherit !important; |
|
|
|
&:hover { |
|
color: #e67777 !important; |
|
} |
|
} |
|
} |
|
|
|
&.blue { |
|
color: var(--color-primary) !important; |
|
|
|
a { |
|
color: inherit !important; |
|
|
|
&:hover { |
|
color: var(--color-primary-dark-1) !important; |
|
} |
|
} |
|
} |
|
|
|
&.black { |
|
color: var(--color-text); |
|
|
|
&:hover { |
|
color: var(--color-text-dark); |
|
} |
|
} |
|
|
|
&.grey { |
|
color: var(--color-text-light) !important; |
|
|
|
a { |
|
color: var(--color-text) !important; |
|
|
|
&:hover { |
|
color: var(--color-primary) !important; |
|
} |
|
} |
|
} |
|
|
|
&.light.grey { |
|
color: var(--color-text-light-2) !important; |
|
} |
|
|
|
&.green { |
|
color: var(--color-green) !important; |
|
} |
|
|
|
&.purple { |
|
color: var(--color-purple) !important; |
|
} |
|
|
|
&.yellow { |
|
color: var(--color-yellow) !important; |
|
} |
|
|
|
&.orange { |
|
color: var(--color-orange) !important; |
|
} |
|
|
|
&.gold { |
|
color: var(--color-gold) !important; |
|
} |
|
|
|
&.left { |
|
text-align: left !important; |
|
} |
|
|
|
&.right { |
|
text-align: right !important; |
|
} |
|
|
|
&.small { |
|
font-size: .75em; |
|
} |
|
|
|
&.normal { |
|
font-weight: normal; |
|
} |
|
|
|
&.italic { |
|
font-style: italic; |
|
} |
|
|
|
&.truncate { |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
display: inline-block; |
|
} |
|
|
|
&.thin { |
|
font-weight: normal; |
|
} |
|
|
|
&.middle { |
|
vertical-align: middle; |
|
} |
|
} |
|
|
|
.message { |
|
text-align: center; |
|
} |
|
|
|
.message > ul { |
|
margin-left: auto; |
|
margin-right: auto; |
|
display: table; |
|
text-align: left; |
|
} |
|
|
|
.header > i + .content { |
|
padding-left: .75rem; |
|
vertical-align: middle; |
|
} |
|
|
|
.info { |
|
&.segment { |
|
&.top { |
|
h3, |
|
h4 { |
|
margin-top: 0; |
|
} |
|
|
|
h3:last-child { |
|
margin-top: 4px; |
|
} |
|
|
|
> :last-child { |
|
margin-bottom: 0; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.normal.header { |
|
font-weight: normal; |
|
} |
|
|
|
.form { |
|
.autofill-dummy { |
|
position: absolute; |
|
width: 1px; |
|
height: 1px; |
|
overflow: hidden; |
|
z-index: -10000; |
|
} |
|
.sub.field { |
|
margin-left: 25px; |
|
} |
|
} |
|
|
|
.sha.label { |
|
font-family: var(--fonts-monospace); |
|
font-size: 13px; |
|
padding: 6px 10px 4px; |
|
font-weight: normal; |
|
margin: 0 6px; |
|
} |
|
|
|
.button.copy-commit-sha { |
|
border: 1px solid var(--color-light-border); |
|
margin-right: 3px; |
|
padding: 6px 6px 4px; |
|
background: var(--color-light); |
|
} |
|
|
|
.button.truncate { |
|
display: inline-block; |
|
max-width: 100%; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
vertical-align: top; |
|
white-space: nowrap; |
|
margin-right: 6px; |
|
} |
|
|
|
&.status.buttons { |
|
.svg { |
|
margin-right: 4px; |
|
} |
|
} |
|
|
|
&.inline.delete-button { |
|
padding: 8px 15px; |
|
font-weight: normal; |
|
} |
|
|
|
.background { |
|
&.red { |
|
background-color: var(--color-red) !important; |
|
} |
|
|
|
&.blue { |
|
background-color: var(--color-primary) !important; |
|
} |
|
|
|
&.black { |
|
background-color: #444444; |
|
} |
|
|
|
&.grey { |
|
background-color: var(--color-grey) !important; |
|
} |
|
|
|
&.light.grey { |
|
background-color: var(--color-grey) !important; |
|
} |
|
|
|
&.green { |
|
background-color: var(--color-green) !important; |
|
} |
|
|
|
&.purple { |
|
background-color: var(--color-purple) !important; |
|
} |
|
|
|
&.yellow { |
|
background-color: var(--color-yellow) !important; |
|
} |
|
|
|
&.orange { |
|
background-color: var(--color-orange) !important; |
|
} |
|
|
|
&.gold { |
|
background-color: var(--color-gold) !important; |
|
} |
|
} |
|
|
|
.migrate { |
|
color: var(--color-text-light-2) !important; |
|
|
|
a { |
|
color: var(--color-text-light) !important; |
|
|
|
&:hover { |
|
color: var(--color-text) !important; |
|
} |
|
} |
|
} |
|
|
|
.border { |
|
border: 1px solid; |
|
&.red { |
|
border-color: var(--color-red) !important; |
|
} |
|
|
|
&.blue { |
|
border-color: var(--color-primary) !important; |
|
} |
|
|
|
&.black { |
|
border-color: #444444; |
|
} |
|
|
|
&.grey { |
|
border-color: var(--color-grey) !important; |
|
} |
|
|
|
&.light.grey { |
|
border-color: var(--color-grey) !important; |
|
} |
|
|
|
&.green { |
|
border-color: var(--color-green) !important; |
|
} |
|
|
|
&.purple { |
|
border-color: var(--color-purple) !important; |
|
} |
|
|
|
&.yellow { |
|
border-color: var(--color-yellow) !important; |
|
} |
|
|
|
&.orange { |
|
border-color: var(--color-orange) !important; |
|
} |
|
|
|
&.gold { |
|
border-color: var(--color-gold) !important; |
|
} |
|
} |
|
|
|
.branch-tag-choice { |
|
line-height: 20px; |
|
} |
|
|
|
&.pagination.menu { |
|
@media @mediaSm { |
|
.item:not(.active):not(.navigation), |
|
.item.navigation span.navigation_label { |
|
display: none; |
|
} |
|
} |
|
&.narrow .item { |
|
padding-left: 8px; |
|
padding-right: 8px; |
|
min-width: 1em; |
|
text-align: center; |
|
.icon { |
|
margin-right: 0; |
|
} |
|
} |
|
} |
|
|
|
/* modal svg icons, copied from fomantic except width and height */ |
|
&.icon.header svg { |
|
width: 3em; |
|
height: 3em; |
|
float: none; |
|
display: block; |
|
line-height: 1; |
|
padding: 0; |
|
margin: 0 auto .5rem; |
|
opacity: 1; |
|
} |
|
|
|
/* center text in fomantic modal dialogs */ |
|
&.modal > .content { |
|
text-align: center; |
|
} |
|
} |
|
|
|
.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); |
|
} |
|
|
|
footer { |
|
background-color: var(--color-footer); |
|
border-top: 1px solid var(--color-secondary); |
|
width: 100%; |
|
flex-basis: 40px; |
|
color: var(--color-text-light); |
|
|
|
.container { |
|
width: 100vw !important; |
|
padding: 0 .5rem; |
|
max-width: calc(100vw - 1rem) !important; |
|
|
|
.links > * { |
|
border-left: 1px solid var(--color-secondary); |
|
padding-left: 8px; |
|
margin-left: 5px; |
|
|
|
&:first-child { |
|
border-left: 0; |
|
} |
|
} |
|
} |
|
|
|
.ui.language { |
|
.menu { |
|
max-height: 500px; |
|
overflow-y: auto; |
|
margin-bottom: 7px; |
|
} |
|
|
|
.svg { |
|
margin-right: .15em; |
|
vertical-align: top; |
|
margin-top: calc(2em - 16px); |
|
} |
|
} |
|
|
|
.ui { |
|
&.left, |
|
&.right { |
|
line-height: 40px; |
|
} |
|
} |
|
} |
|
|
|
.hide { |
|
display: none; |
|
|
|
&.show-outdated { |
|
display: none !important; |
|
} |
|
|
|
&.hide-outdated { |
|
display: none !important; |
|
} |
|
} |
|
|
|
.center:not(.popup) { |
|
text-align: center; |
|
} |
|
|
|
// Conditional display |
|
@media @mediaMdAndUp { |
|
.mobile-only, |
|
.ui.button.mobile-only { |
|
display: none; |
|
} |
|
|
|
// has the same behaviour of sr-only, hiding the content for |
|
// non-screenreaders, but is shown on mobile devices. |
|
.sr-mobile-only { |
|
.sr-only(); |
|
} |
|
} |
|
|
|
@media @mediaSm { |
|
.not-mobile { |
|
display: none; |
|
} |
|
} |
|
|
|
// Accessibility |
|
.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 @mediaMd { |
|
.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; |
|
} |
|
|
|
@media @mediaSm { |
|
.ui.menu.new-menu { |
|
overflow: visible !important; |
|
} |
|
} |
|
|
|
.ui.menu.new-menu .new-menu-inner { |
|
display: flex; |
|
margin-left: auto; |
|
margin-right: auto; |
|
overflow-x: auto; |
|
} |
|
|
|
@media @mediaSm { |
|
.ui.menu.new-menu .new-menu-inner { |
|
flex-wrap: wrap; |
|
margin-left: 0; |
|
margin-right: 0; |
|
} |
|
} |
|
|
|
.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 @mediaSm { |
|
.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; |
|
} |
|
|
|
[v-cloak] { |
|
display: none !important; |
|
} |
|
|
|
.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); |
|
|
|
.avatar { |
|
width: 32px !important; |
|
height: 32px !important; |
|
} |
|
|
|
.labels { |
|
margin-left: .5rem; |
|
|
|
> * + * { |
|
margin-left: .5rem; |
|
} |
|
} |
|
} |
|
|
|
.repo-icon { |
|
display: inline-block; |
|
} |
|
|
|
.activity-bar-graph { |
|
background-color: var(--color-primary); |
|
color: #fff; |
|
} |
|
|
|
.activity-bar-graph-alt { |
|
color: #fff; |
|
} |
|
|
|
.archived-icon { |
|
color: lighten(#000000, 70%) !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; |
|
|
|
> .ui { |
|
display: block; |
|
margin-top: 5px; |
|
margin-bottom: 10px; |
|
|
|
&:first-child { |
|
margin-top: 1px; |
|
} |
|
} |
|
} |
|
|
|
i.icons .icon:first-child { |
|
margin-right: 0; |
|
} |
|
|
|
i.icon.centerlock { |
|
top: 1em; |
|
} |
|
|
|
.ui.label { |
|
padding: .3em .5em; |
|
background: var(--color-light); |
|
color: var(--color-text-light); |
|
} |
|
|
|
.ui.labels a.label:hover, |
|
a.ui.label:hover { |
|
background: var(--color-hover); |
|
color: var(--color-text); |
|
} |
|
|
|
.ui.label > .detail .icons { |
|
margin-right: .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: rgba(27, 31, 35, .3); |
|
width: 1%; |
|
user-select: none; |
|
font-family: var(--fonts-monospace); |
|
|
|
span { |
|
&.bottom-line { |
|
&::after { |
|
border-bottom: 1px solid var(--color-secondary); |
|
} |
|
} |
|
|
|
&::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; |
|
|
|
pre, |
|
ol { |
|
background-color: inherit; |
|
margin: 0; |
|
padding: 0 !important; |
|
|
|
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: #fffbdd !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: break-word; |
|
word-wrap: break-word; |
|
} |
|
|
|
.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: #999999; |
|
padding: 0 !important; |
|
background: var(--color-code-sidebar-bg); |
|
width: 1%; |
|
-moz-user-select: none; |
|
-ms-user-select: none; |
|
-webkit-user-select: none; |
|
user-select: none; |
|
|
|
.blame-info { |
|
width: 350px; |
|
max-width: 350px; |
|
display: block; |
|
user-select: none; |
|
padding: 0 0 0 10px; |
|
line-height: 20px; |
|
box-sizing: content-box; |
|
|
|
.blame-data { |
|
display: flex; |
|
font-family: var(--fonts-regular); |
|
|
|
.blame-message { |
|
flex-grow: 2; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
} |
|
|
|
.blame-time, |
|
.blame-avatar { |
|
flex-shrink: 0; |
|
} |
|
} |
|
} |
|
|
|
.ui.avatar.image { |
|
height: 18px; |
|
width: 18px; |
|
display: block; |
|
margin-top: 1px; |
|
} |
|
} |
|
|
|
.top-line-blame { |
|
border-top: 1px solid var(--color-secondary); |
|
} |
|
|
|
.lines-code, |
|
.lines-commit { |
|
.bottom-line { |
|
border-bottom: 1px solid var(--color-secondary); |
|
} |
|
} |
|
.code-view table { |
|
width: 100%; |
|
} |
|
|
|
.octicon-tiny { |
|
font-size: .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.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.blue.button, |
|
.ui.blue.buttons .button, |
|
.ui.primary.button, |
|
.ui.primary.buttons .button { |
|
background-color: var(--color-primary) !important; |
|
} |
|
|
|
.ui.blue.button:hover, |
|
.ui.blue.buttons .button:hover, |
|
.ui.primary.button:hover, |
|
.ui.primary.buttons .button:hover { |
|
background-color: var(--color-primary-dark-2) !important; |
|
} |
|
|
|
.ui.blue.button:focus, |
|
.ui.blue.buttons .button:focus, |
|
.ui.primary.button:focus, |
|
.ui.primary.buttons .button:focus { |
|
background-color: var(--color-primary-dark-3) !important; |
|
} |
|
|
|
.ui.basic.blue.button, |
|
.ui.basic.blue.buttons .button, |
|
.ui.basic.primary.button, |
|
.ui.basic.primary.buttons .button { |
|
box-shadow: inset 0 0 0 1px var(--color-primary) !important; |
|
color: #fff !important; |
|
} |
|
|
|
.ui.basic.blue.button:hover, |
|
.ui.basic.blue.buttons .button:hover, |
|
.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.blue.button:focus, |
|
.ui.basic.blue.buttons .button:focus, |
|
.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.blue.label, |
|
.ui.blue.labels .label, |
|
.ui.primary.label, |
|
.ui.primary.labels .label { |
|
background-color: var(--color-primary) !important; |
|
border-color: var(--color-primary-dark-2) !important; |
|
} |
|
|
|
.ui.basic.labels .blue.label, |
|
.ui.ui.ui.basic.blue.label, |
|
.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; |
|
} |
|
|
|
.svg { |
|
span.green & { |
|
color: var(--color-green); |
|
} |
|
span.red & { |
|
color: var(--color-red); |
|
} |
|
span.purple & { |
|
color: var(--color-purple); |
|
} |
|
} |
|
|
|
.migrate .svg.gitea-git { |
|
color: #f05133; /* from https://upload.wikimedia.org/wikipedia/commons/e/e0/Git-logo.svg */ |
|
} |
|
|
|
.ui.popup { |
|
background-color: var(--color-body); |
|
color: var(--color-secondary-dark-6); |
|
border-color: var(--color-secondary); |
|
} |
|
|
|
.ui.popup::before { |
|
box-shadow: 1px 1px 0 0 var(--color-secondary); |
|
} |
|
|
|
.ui.bottom.popup::before, |
|
.ui.top.popup::before, |
|
.ui.right.center.popup::before, |
|
.ui.left.center.popup::before { |
|
background-color: var(--color-body); |
|
} |
|
|
|
.ui.bottom.left.popup::before, |
|
.ui.bottom.right.popup::before, |
|
.ui.bottom.center.popup::before { |
|
box-shadow: -1px -1px 0 0 var(--color-secondary); |
|
} |
|
|
|
.ui.left.center.popup::before { |
|
box-shadow: 1px -1px 0 0 var(--color-secondary); |
|
} |
|
|
|
.ui.right.center.popup::before { |
|
box-shadow: -1px 1px 0 0 var(--color-secondary); |
|
} |
|
|
|
.ui.popup .ui.label { |
|
margin-bottom: .4em; |
|
} |
|
|
|
.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); |
|
|
|
.right .button { |
|
padding: 8px 10px; |
|
font-weight: normal; |
|
} |
|
} |
|
|
|
/* fix misaligned right buttons on box headers */ |
|
.ui.attached.header .right:not(.dropdown) { |
|
position: absolute; |
|
right: .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; |
|
} |
|
|
|
table th[data-sortt-asc], |
|
table th[data-sortt-desc] { |
|
&:hover { |
|
background: rgba(0, 0, 0, .1) !important; |
|
cursor: pointer !important; |
|
} |
|
.svg { |
|
margin-left: .25rem; |
|
} |
|
} |
|
|
|
/* fix up SVG dropdown triangles because fomantic thinks they are icon fonts */ |
|
/* see https://github.com/go-gitea/gitea/issues/14014 */ |
|
.ui.dropdown > .dropdown.icon, |
|
.btn-review > .dropdown.icon { |
|
height: auto !important; |
|
margin-left: .5rem !important; |
|
margin-top: -1px !important; |
|
margin-bottom: -1px !important; |
|
margin-right: -.5rem !important; |
|
} |
|
.ui.button.dropdown > .dropdown.icon, |
|
.btn-review > .dropdown.icon { |
|
float: right !important; |
|
|
|
@media (max-width: 480px) { |
|
display: none; |
|
} |
|
} |
|
.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; |
|
} |
|
|
|
/* limit width of all direct dropdown menu children */ |
|
/* https://github.com/go-gitea/gitea/pull/10835 */ |
|
.dropdown:not(.selection) > .menu:not(.review-box) > *:not(.header) { |
|
max-width: 300px; |
|
overflow-x: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
|
|
.dropdown:not(.selection) > .menu.review-box > * { |
|
@media (max-height: 700px) { |
|
.CodeMirror, |
|
.CodeMirror-scroll { |
|
min-height: 100px; |
|
} |
|
} |
|
} |
|
|
|
.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: -.075em; |
|
|
|
@supports (-webkit-hyphens:none) { |
|
body:not(.safari-above125) & { |
|
font-size: inherit; |
|
vertical-align: inherit; |
|
img { |
|
font-size: 1.25em; |
|
vertical-align: -.225em !important; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.emoji img, |
|
.reaction img { |
|
border-width: 0 !important; |
|
margin: 0 !important; |
|
width: 1em !important; |
|
height: 1em !important; |
|
vertical-align: -.15em; |
|
} |
|
|
|
.labelspage { |
|
list-style: none; |
|
padding-top: 0; |
|
|
|
.item { |
|
margin-top: 0; |
|
margin-right: -14px; |
|
margin-left: -14px; |
|
padding: 10px; |
|
border-bottom: 1px solid var(--color-secondary); |
|
border-top: none; |
|
|
|
a { |
|
font-size: 15px; |
|
padding-top: 5px; |
|
padding-right: 10px; |
|
color: var(--color-text-light); |
|
|
|
&:hover { |
|
color: var(--color-primary-light-2); |
|
} |
|
|
|
&.open-issues { |
|
margin-right: 30px; |
|
} |
|
} |
|
|
|
.ui.label { |
|
font-size: 1em; |
|
} |
|
} |
|
|
|
.item:last-child { |
|
border-bottom: none; |
|
padding-bottom: 0; |
|
} |
|
|
|
.orglabel { |
|
opacity: .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: .25rem; |
|
} |
|
|
|
.ui.header > .ui.label.compact { |
|
margin-top: inherit; |
|
} |
|
|
|
.flash-error details code { |
|
display: block; |
|
text-align: left; |
|
} |
|
|
|
.truncated-item-container { |
|
display: flex !important; |
|
} |
|
|
|
.ellipsis-button { |
|
padding: 0 5px 8px !important; |
|
display: inline-block !important; |
|
user-select: none !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: -.5em; |
|
margin-bottom: -.5em; |
|
} |
|
|
|
.precolors { |
|
padding-left: 0 !important; |
|
padding-right: 0 !important; |
|
margin: 3px 10px auto !important; |
|
width: 120px !important; |
|
|
|
.color { |
|
float: left; |
|
width: 15px; |
|
height: 15px; |
|
} |
|
}
|
|
|