mirror of
https://github.com/go-gitea/gitea.git
synced 2026-03-17 14:24:07 +00:00
89cd3737bc
Replace the fomantic search.css (520 lines) and modal.css (698 lines) with minimal first-party modules containing only the rules actually used. Hardcoded colors are replaced with theme variables, and the base.css overrides are merged directly into the new modules. With this change, all original Fomantic CSS is now gone. **search.css**: 520 → 85 lines **modal.css**: 698 → 329 lines Co-authored-by: Claude (Opus 4.6) <noreply@anthropic.com>
853 lines
19 KiB
CSS
853 lines
19 KiB
CSS
:root {
|
|
/* fonts */
|
|
--fonts-proportional: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial;
|
|
--fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
|
|
/* GitHub explicitly sets font names like: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
|
|
Actually "Twemoji Mozilla" emoji font is widely used by browsers like Firefox, Pale Moon, and it is more likely up-to-dated than the system emoji font.
|
|
So not setting emoji font seems to be the best choice, here we just use a non-existing dummy font name and let browsers choose. */
|
|
--fonts-emoji: -emoji-fallback;
|
|
/* font weights - use between 400 and 600 for general purposes. Avoid 700 as it is perceived too bold */
|
|
--font-weight-light: 300;
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
/* line-height: use the default value as "modules/normalize.css" */
|
|
--line-height-default: normal;
|
|
/* images */
|
|
--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>');
|
|
--octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
|
|
--select-arrows: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="m4.074 9.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.043 9H4.251a.25.25 0 0 0-.177.427m0-1.957L7.47 4.073a.25.25 0 0 1 .354 0L11.22 7.47a.25.25 0 0 1-.177.426H4.251a.25.25 0 0 1-.177-.426"/></svg>');
|
|
/* other variables */
|
|
--border-radius: 4px;
|
|
--border-radius-medium: 6px;
|
|
--border-radius-full: 99999px; /* TODO: use calc(infinity * 1px) */
|
|
--opacity-disabled: 0.55;
|
|
--height-loading: 16rem;
|
|
--min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */
|
|
--tab-size: 4;
|
|
--checkbox-size: 15px; /* height and width of checkbox and radio inputs */
|
|
--page-spacing: 16px; /* space between page elements */
|
|
--page-margin-x: 32px; /* minimum space on left and right side of page */
|
|
--page-space-bottom: 64px; /* space between last page element and footer */
|
|
--transition-hover-fade: opacity 0.2s ease; /* fade transition for elements that show on hover */
|
|
|
|
/* z-index */
|
|
--z-index-modal: 1001; /* modal dialog */
|
|
--z-index-toast: 1002; /* should be larger than modal */
|
|
|
|
--font-size-label: 12px; /* font size of individual labels */
|
|
|
|
--gap-inline: 0.25rem; /* gap for inline texts and elements, for example: the spaces for sentence with labels, button text, etc */
|
|
--gap-block: 0.5rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */
|
|
|
|
--background-view-image: repeating-conic-gradient(var(--color-transparency-grid-dark) 0 25%, var(--color-transparency-grid-light) 0 50%) 0 0 / 18px 18px;
|
|
}
|
|
|
|
@media (min-width: 768px) and (max-width: 1200px) {
|
|
:root {
|
|
--page-margin-x: 16px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
:root {
|
|
--page-margin-x: 8px;
|
|
}
|
|
}
|
|
|
|
:root * {
|
|
--fonts-regular: var(--fonts-override, var(--fonts-proportional)), "Noto Sans", "Liberation Sans", sans-serif, var(--fonts-emoji);
|
|
}
|
|
|
|
*, ::before, ::after {
|
|
/* these are needed for tailwind borders to work because we do not load tailwind's base
|
|
https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css */
|
|
border-width: 0;
|
|
border-style: solid;
|
|
border-color: currentcolor;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
font-size: 14px;
|
|
}
|
|
|
|
body {
|
|
line-height: 20px;
|
|
font-family: var(--fonts-regular);
|
|
color: var(--color-text);
|
|
background-color: var(--color-body);
|
|
tab-size: var(--tab-size);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: visible;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
textarea {
|
|
font-family: var(--fonts-regular);
|
|
}
|
|
|
|
pre,
|
|
code,
|
|
kbd,
|
|
samp {
|
|
font-family: var(--fonts-monospace);
|
|
}
|
|
|
|
pre,
|
|
code,
|
|
kbd,
|
|
samp,
|
|
.tw-font-mono {
|
|
font-size: 0.95em; /* compensate for monospace fonts being usually slightly larger */
|
|
}
|
|
|
|
/* there are many <code> blocks in non-markup(.markup code) / non-code-diff(code.code-inner) containers, for example: translation strings, etc,
|
|
so we need to make <code> have default global styles, ".markup code" has its own styles and these styles sometimes conflict.
|
|
TODO: in the future, we should use `div` instead of `code` for `.code-inner` because it is a container for highlighted code line, then drop this ":not" patch */
|
|
code:where(:not(.code-inner)) {
|
|
padding: 1px 4px;
|
|
border-radius: var(--border-radius);
|
|
background-color: var(--color-markup-code-inline);
|
|
}
|
|
|
|
b,
|
|
strong,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5 {
|
|
line-height: 1.28571429;
|
|
margin: calc(2rem - 0.1428571428571429em) 0 1rem;
|
|
font-weight: var(--font-weight-medium);
|
|
padding: 0;
|
|
}
|
|
|
|
h1 {
|
|
min-height: 1rem;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.71428571rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.28571429rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.07142857rem;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
h1:first-child,
|
|
h2:first-child,
|
|
h3:first-child,
|
|
h4:first-child,
|
|
h5:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
h1:last-child,
|
|
h2:last-child,
|
|
h3:last-child,
|
|
h4:last-child,
|
|
h5:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 1em;
|
|
line-height: 1.4285;
|
|
}
|
|
|
|
p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
ul {
|
|
margin: 0.5em 0;
|
|
padding: 0 0 0 1.5em;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
details summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
progress {
|
|
background: var(--color-secondary-dark-1);
|
|
border-radius: var(--border-radius);
|
|
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);
|
|
}
|
|
|
|
* {
|
|
caret-color: var(--color-caret);
|
|
}
|
|
|
|
::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,
|
|
relative-time::part(root)::selection {
|
|
background: var(--color-primary-light-1);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
::placeholder {
|
|
color: var(--color-placeholder-text) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.unselectable,
|
|
.btn,
|
|
.button,
|
|
.lines-num,
|
|
.lines-commit,
|
|
.lines-commit .blame-info,
|
|
.ellipsis-button {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
a {
|
|
color: var(--color-primary);
|
|
cursor: pointer;
|
|
text-decoration-line: none;
|
|
text-decoration-skip-ink: all;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration-line: underline;
|
|
}
|
|
|
|
/* a = always colored, underlined on hover */
|
|
/* a.muted = colored on hover, underlined on hover */
|
|
/* a.suppressed = never colored, underlined on hover */
|
|
/* a.silenced = never colored, never underlined */
|
|
|
|
a.muted,
|
|
a.suppressed,
|
|
a.silenced,
|
|
.muted-links a {
|
|
color: inherit;
|
|
}
|
|
|
|
a:hover,
|
|
a.suppressed:hover,
|
|
a.muted:hover,
|
|
a.muted:hover [class*="color-text"],
|
|
.muted-links a:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
a.silenced:hover,
|
|
a.suppressed:hover {
|
|
color: inherit;
|
|
}
|
|
|
|
a.silenced:hover {
|
|
text-decoration-line: none;
|
|
}
|
|
|
|
a.label,
|
|
.ui.search .results a,
|
|
.ui .menu a,
|
|
.ui.cards a.card,
|
|
.issue-keyword a {
|
|
text-decoration-line: none !important;
|
|
}
|
|
|
|
.native-select {
|
|
position: relative;
|
|
}
|
|
|
|
.native-select > select {
|
|
appearance: none; /* hide default triangle */
|
|
padding: 6px 26px 6px 10px;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
/* ::before and ::after pseudo elements don't work on select elements,
|
|
so we need to put it on the parent wrapper element. */
|
|
.native-select::after {
|
|
position: absolute;
|
|
pointer-events: none; /* make the click event can pass through the svg to the select element */
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: 5px;
|
|
content: "";
|
|
width: 16px;
|
|
height: 16px;
|
|
mask-size: cover;
|
|
-webkit-mask-size: cover;
|
|
mask-image: var(--select-arrows);
|
|
-webkit-mask-image: var(--select-arrows);
|
|
background: currentcolor;
|
|
}
|
|
|
|
.empty-placeholder {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 40px;
|
|
padding-bottom: 40px;
|
|
text-align: center;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.inline-code-block {
|
|
padding: 2px 4px;
|
|
border-radius: .24em;
|
|
background-color: var(--color-label-bg);
|
|
}
|
|
|
|
.ui.menu .dropdown.item:hover,
|
|
.ui.menu a.item:hover,
|
|
.ui.menu details.item summary:hover {
|
|
color: var(--color-text);
|
|
background: var(--color-hover);
|
|
}
|
|
|
|
/* slightly more contrast for filters on issue list */
|
|
.ui.ui.menu .dropdown.item.disabled {
|
|
color: var(--color-text-light-2);
|
|
}
|
|
|
|
/* styles from removed fomantic transition module */
|
|
.hidden.transition {
|
|
visibility: hidden;
|
|
display: none;
|
|
}
|
|
.visible.transition {
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
.ui.comments .comment .metadata {
|
|
color: var(--color-text-light-2);
|
|
}
|
|
|
|
img.ui.avatar,
|
|
.ui.avatar img,
|
|
.ui.avatar svg {
|
|
border-radius: var(--border-radius);
|
|
object-fit: contain;
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
.ui.error.message .header,
|
|
.ui.warning.message .header {
|
|
color: inherit;
|
|
filter: saturate(2);
|
|
}
|
|
|
|
.full.height {
|
|
flex-grow: 1;
|
|
padding-bottom: var(--page-space-bottom);
|
|
}
|
|
|
|
.status-page-error {
|
|
margin-top: max(45vh - 90px, 80px);
|
|
margin-bottom: 80px;
|
|
}
|
|
|
|
.status-page-error-title {
|
|
font-size: 48px;
|
|
margin-bottom: 14px; /* some elements below may use tw-my-4 or tw-my-8, so use 14px as a minimal margin */
|
|
line-height: initial;
|
|
text-align: center;
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-text-light-2);
|
|
}
|
|
|
|
/* add margin below .secondary nav when it is the first child */
|
|
.page-content > :first-child.secondary-nav {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
/* add margin to all pages when there is no .secondary.nav */
|
|
.page-content > :first-child:not(.secondary-nav) {
|
|
margin-top: var(--page-spacing);
|
|
}
|
|
/* if .ui.grid is the first child the first grid-column has 'padding-top: 1rem' which we need
|
|
to compensate here */
|
|
.page-content > :first-child.ui.grid {
|
|
margin-top: calc(var(--page-spacing) - 1rem);
|
|
}
|
|
|
|
.ui .message.flash-message {
|
|
text-align: center;
|
|
}
|
|
|
|
.ui .header > i + .content {
|
|
padding-left: 0.75rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ui .sha.label {
|
|
font-family: var(--fonts-monospace);
|
|
font-size: 13px;
|
|
font-weight: var(--font-weight-normal);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.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: var(--font-weight-normal);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.user-menu > .item {
|
|
width: 100%;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.color-preview {
|
|
display: inline-block;
|
|
margin-left: 0.4em;
|
|
height: 0.67em;
|
|
width: 0.67em;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.attention-icon {
|
|
margin: 2px 6px 0 0;
|
|
}
|
|
|
|
blockquote.attention-note {
|
|
border-left-color: var(--color-blue-dark-1);
|
|
}
|
|
strong.attention-note, svg.attention-note {
|
|
color: var(--color-blue-dark-1);
|
|
}
|
|
|
|
blockquote.attention-tip {
|
|
border-left-color: var(--color-success-text);
|
|
}
|
|
strong.attention-tip, svg.attention-tip {
|
|
color: var(--color-success-text);
|
|
}
|
|
|
|
blockquote.attention-important {
|
|
border-left-color: var(--color-violet-dark-1);
|
|
}
|
|
strong.attention-important, svg.attention-important {
|
|
color: var(--color-violet-dark-1);
|
|
}
|
|
|
|
blockquote.attention-warning {
|
|
border-left-color: var(--color-warning-text);
|
|
}
|
|
strong.attention-warning, svg.attention-warning {
|
|
color: var(--color-warning-text);
|
|
}
|
|
|
|
blockquote.attention-caution {
|
|
border-left-color: var(--color-red-dark-1);
|
|
}
|
|
strong.attention-caution, svg.attention-caution {
|
|
color: var(--color-red-dark-1);
|
|
}
|
|
|
|
/* FIXME: this is a longstanding dirty patch since 2015, it only makes the pages more messy and shouldn't be used */
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
overflow-menu {
|
|
border-bottom: 1px solid var(--color-secondary) !important;
|
|
display: flex;
|
|
}
|
|
|
|
overflow-menu .overflow-menu-items {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
overflow-menu .overflow-menu-items .item {
|
|
margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
|
|
}
|
|
|
|
overflow-menu .overflow-menu-items .item-flex-space {
|
|
flex: 1;
|
|
}
|
|
|
|
overflow-menu .overflow-menu-button {
|
|
background: transparent;
|
|
border: none;
|
|
color: inherit;
|
|
text-align: center;
|
|
width: 32px;
|
|
padding: 0;
|
|
}
|
|
|
|
/* match the styles of ".ui.secondary.pointing.menu .active.item" */
|
|
overflow-menu.ui.secondary.pointing.menu .overflow-menu-button.active {
|
|
padding: 2px 0 0;
|
|
border-bottom: 2px solid currentcolor;
|
|
background-color: transparent;
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
overflow-menu .overflow-menu-button:hover {
|
|
color: var(--color-text-dark);
|
|
}
|
|
|
|
overflow-menu .ui.label {
|
|
margin-left: 7px !important; /* save some space */
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.lines-blame-btn {
|
|
padding: 0 0 0 5px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.lines-num {
|
|
padding: 0 8px;
|
|
text-align: right !important;
|
|
color: var(--color-text-light-2);
|
|
width: 1%; /* this apparently needs to be a percentage so that code column stretches in diffs */
|
|
min-width: 72px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.code-diff .lines-num {
|
|
min-width: 50px;
|
|
}
|
|
|
|
.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;
|
|
display: block;
|
|
}
|
|
|
|
.lines-type-marker {
|
|
vertical-align: top;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.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;
|
|
white-space: nowrap;
|
|
padding: 0;
|
|
}
|
|
|
|
.lines-code {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.code-inner {
|
|
font: 12px var(--fonts-monospace);
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
line-height: inherit; /* needed for inline code preview in markup */
|
|
}
|
|
|
|
.blame .code-inner {
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.lines-commit {
|
|
vertical-align: top;
|
|
color: var(--color-text-light-1);
|
|
padding: 0 !important;
|
|
width: 1%;
|
|
}
|
|
|
|
.lines-commit .blame-info {
|
|
width: min(26vw, 300px);
|
|
display: block;
|
|
padding: 0 0 0 6px;
|
|
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;
|
|
}
|
|
|
|
.blame-avatar {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
tr.top-line-blame {
|
|
border-top: 1px solid var(--color-secondary);
|
|
}
|
|
|
|
tr.top-line-blame:first-of-type {
|
|
border-top: none; /* merge code lines belonging to the same commit into one block */
|
|
}
|
|
|
|
.lines-code .bottom-line,
|
|
.lines-commit .bottom-line {
|
|
border-bottom: 1px solid var(--color-secondary);
|
|
}
|
|
|
|
.migrate .svg.gitea-git {
|
|
color: var(--color-git);
|
|
}
|
|
|
|
.color-icon {
|
|
display: inline-block;
|
|
border-radius: var(--border-radius-full);
|
|
height: 14px;
|
|
width: 14px;
|
|
}
|
|
|
|
.rss-icon {
|
|
display: inline-flex;
|
|
color: var(--color-text-light-1);
|
|
}
|
|
|
|
table th[data-sortt-asc]:hover,
|
|
table th[data-sortt-desc]:hover {
|
|
background: var(--color-hover) !important;
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
table th[data-sortt-asc] .svg,
|
|
table th[data-sortt-desc] .svg {
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
/* for "image" emojis like ":git:" ":gitea:" and ":github:" (see CUSTOM_EMOJIS config option) */
|
|
.emoji img {
|
|
border-width: 0 !important;
|
|
margin: 0 !important;
|
|
width: 1em !important;
|
|
height: 1em !important;
|
|
vertical-align: -0.15em;
|
|
}
|
|
|
|
.ui.tabular.menu .item,
|
|
.ui.secondary.pointing.menu .item {
|
|
padding: 11.55px 12px !important; /* match .dashboard-navbar in height */
|
|
color: var(--color-text-light-2);
|
|
}
|
|
|
|
.ui.tabular.menu .item:hover,
|
|
.ui.secondary.pointing.menu a.item:hover {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.ui.tabular.menu .active.item,
|
|
.ui.secondary.pointing.menu .active.item,
|
|
.resize-for-semibold::before {
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.resize-for-semibold::before {
|
|
content: attr(data-text);
|
|
visibility: hidden;
|
|
display: block;
|
|
height: 0;
|
|
}
|
|
|
|
.flash-error details code,
|
|
.flash-warning details code {
|
|
display: block;
|
|
text-align: left;
|
|
}
|
|
|
|
.ui.button.ellipsis-button {
|
|
padding: 0 5px 8px;
|
|
display: inline-block;
|
|
font-weight: var(--font-weight-semibold);
|
|
line-height: 8px;
|
|
vertical-align: middle;
|
|
min-height: 0;
|
|
}
|
|
|
|
.btn,
|
|
.ui.ui.dropdown,
|
|
.flex-text-inline,
|
|
.flex-text-inline > a,
|
|
.flex-text-inline > span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--gap-inline);
|
|
vertical-align: middle;
|
|
min-width: 0; /* make ellipsis work */
|
|
}
|
|
|
|
.ui.ui.labeled.button {
|
|
gap: 0;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.ui.list.flex-items-block > .item,
|
|
.ui.vertical.menu.flex-items-block > .item,
|
|
.ui.form .field > label.flex-text-block, /* override fomantic "block" style */
|
|
.flex-items-block > .item,
|
|
.flex-text-block {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--gap-block);
|
|
min-width: 0;
|
|
}
|
|
|
|
.flex-text-block > .ui.button,
|
|
.flex-text-inline > .ui.button {
|
|
margin: 0; /* fomantic buttons have default margin, when we use them in a flex container with gap, we do not need these margins */
|
|
}
|
|
|
|
.svg.octicon-file-directory-fill,
|
|
.svg.octicon-file-directory-open-fill,
|
|
.svg.octicon-file-submodule {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.svg.octicon-file,
|
|
.svg.octicon-file-symlink-file,
|
|
.svg.octicon-file-directory-symlink {
|
|
color: var(--color-secondary-dark-7);
|
|
}
|