diff options
Diffstat (limited to 'web_src/css/base.css')
-rw-r--r-- | web_src/css/base.css | 102 |
1 files changed, 29 insertions, 73 deletions
diff --git a/web_src/css/base.css b/web_src/css/base.css index a28fb7b92a..3b819e91bc 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -30,6 +30,15 @@ --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 */ + + /* z-index */ + --z-index-modal: 1001; /* modal dialog, hard-coded from Fomantic modal.css */ + --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 */ } @media (min-width: 768px) and (max-width: 1200px) { @@ -176,10 +185,6 @@ details summary { cursor: pointer; } -details summary > * { - display: inline; -} - progress { background: var(--color-secondary-dark-1); border-radius: var(--border-radius); @@ -318,6 +323,16 @@ a.label, background: var(--color-hover); } +.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; @@ -455,15 +470,6 @@ a.label, 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); -} - img.ui.avatar, .ui.avatar img, .ui.avatar svg { @@ -815,10 +821,6 @@ overflow-menu .ui.label { display: block; } -.code-view .lines-num span::after { - cursor: pointer; -} - .lines-type-marker { vertical-align: top; white-space: nowrap; @@ -855,39 +857,13 @@ overflow-menu .ui.label { .lines-escape { width: 0; white-space: nowrap; + padding: 0; } .lines-code { padding-left: 5px; } -.file-view tr.active { - color: inherit !important; - background: inherit !important; -} - -.file-view tr.active .lines-num, -.file-view tr.active .lines-code { - background: var(--color-highlight-bg) !important; -} - -.file-view tr.active:last-of-type .lines-code { - border-bottom-right-radius: var(--border-radius); -} - -.file-view tr.active .lines-num { - position: relative; -} - -.file-view tr.active .lines-num::before { - content: ""; - position: absolute; - left: 0; - width: 2px; - height: 100%; - background: var(--color-highlight-fg); -} - .code-inner { font: 12px var(--fonts-monospace); white-space: pre-wrap; @@ -938,12 +914,12 @@ overflow-menu .ui.label { margin-right: 4px; } -.top-line-blame { +tr.top-line-blame { border-top: 1px solid var(--color-secondary); } -.code-view tr.top-line-blame:first-of-type { - border-top: none; +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, @@ -951,15 +927,6 @@ overflow-menu .ui.label { border-bottom: 1px solid var(--color-secondary); } -.code-view { - background: var(--color-code-bg); - border-radius: var(--border-radius); -} - -.code-view table { - width: 100%; -} - .migrate .svg.gitea-git { color: var(--color-git); } @@ -1051,19 +1018,6 @@ table th[data-sortt-desc] .svg { min-height: 0; } -.precolors { - display: flex; - flex-direction: column; - justify-content: center; - margin-left: 1em; -} - -.precolors .color { - display: inline-block; - width: 15px; - height: 15px; -} - .ui.dropdown:not(.button) { line-height: var(--line-height-default); /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */ } @@ -1115,10 +1069,12 @@ table th[data-sortt-desc] .svg { .btn, .ui.ui.button, .ui.ui.dropdown, -.flex-text-inline { +.flex-text-inline, +.flex-text-inline > a, +.flex-text-inline > span { display: inline-flex; align-items: center; - gap: .25rem; + gap: var(--gap-inline); vertical-align: middle; min-width: 0; /* make ellipsis work */ } @@ -1146,7 +1102,7 @@ table th[data-sortt-desc] .svg { .flex-text-block { display: flex; align-items: center; - gap: .5rem; + gap: var(--gap-block); min-width: 0; } @@ -1161,7 +1117,7 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil .ui.dropdown .menu.flex-items-menu > .item:not(.hidden, .filtered, .tw-hidden) { display: flex !important; align-items: center; - gap: .5rem; + gap: var(--gap-block); min-width: 0; } .ui.dropdown .menu.flex-items-menu > .item img, |