mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2025-05-31 20:02:09 +00:00
Fix tooltips and issue dependency styles (#13458)
- Convert all tooltips to JS-based ones, fixing overflow issues - Restyle issue dependencies/dependants - Move popup styles to base style - CSS Helper tweaks - Unify pseudo element selectors and lint for it Fixes: https://github.com/go-gitea/gitea/issues/13400
This commit is contained in:
silverwind
GitHub
parent
9155f13bf8
commit
21d496364a
15 changed files with 164 additions and 146 deletions
|
|
@ -362,10 +362,6 @@ a:hover,
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.nopadding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.menu,
|
||||
&.vertical.menu,
|
||||
&.segment {
|
||||
|
|
@ -506,14 +502,6 @@ a:hover,
|
|||
&.middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.nopadding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.nomargin {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
|
|
@ -952,7 +940,7 @@ footer {
|
|||
background: rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.ui.menu.new-menu:after {
|
||||
.ui.menu.new-menu::after {
|
||||
position: absolute;
|
||||
margin-top: -15px;
|
||||
display: block;
|
||||
|
|
@ -1049,12 +1037,12 @@ i.icon.centerlock {
|
|||
|
||||
span {
|
||||
&.bottom-line {
|
||||
&:after {
|
||||
&::after {
|
||||
border-bottom: 1px solid #eaecef;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: attr(data-line-number);
|
||||
line-height: 20px !important;
|
||||
padding: 0 10px;
|
||||
|
|
@ -1271,6 +1259,37 @@ i.icon.centerlock {
|
|||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -403,10 +403,10 @@
|
|||
border: 0;
|
||||
}
|
||||
|
||||
pre code:before,
|
||||
pre code:after,
|
||||
pre tt:before,
|
||||
pre tt:after {
|
||||
pre code::before,
|
||||
pre code::after,
|
||||
pre tt::before,
|
||||
pre tt::after {
|
||||
content: normal;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -113,24 +113,31 @@
|
|||
|
||||
.item {
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.title {
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.title {
|
||||
max-width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.title {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.label.color {
|
||||
padding: 0 8px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: 2px 0;
|
||||
|
||||
.text {
|
||||
color: #444444;
|
||||
|
||||
&:hover {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#deadlineForm input {
|
||||
|
|
@ -520,7 +527,7 @@
|
|||
border-radius: 3px;
|
||||
#avatar-arrow;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
border-right-color: #ffffff;
|
||||
}
|
||||
|
||||
|
|
@ -590,7 +597,7 @@
|
|||
margin-left: 4em;
|
||||
#avatar-arrow;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
border-right-color: #ffffff;
|
||||
}
|
||||
|
||||
|
|
@ -771,7 +778,7 @@
|
|||
}
|
||||
|
||||
.comment-list {
|
||||
&:not(.prevent-before-timeline):before {
|
||||
&:not(.prevent-before-timeline)::before {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -791,7 +798,7 @@
|
|||
margin-left: 40px;
|
||||
padding-left: 16px;
|
||||
|
||||
&:before { //ciara
|
||||
&::before { //ciara
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -1068,7 +1075,7 @@
|
|||
max-width: 150px;
|
||||
background-color: #ffffff;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
content: ' ';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
|
|
@ -1222,7 +1229,7 @@
|
|||
.form {
|
||||
#avatar-arrow;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
border-right-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
@ -1362,7 +1369,7 @@
|
|||
.content {
|
||||
#avatar-arrow;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
border-right-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
@ -1596,7 +1603,7 @@
|
|||
padding-right: 2px;
|
||||
}
|
||||
|
||||
> div:after {
|
||||
> div::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: block;
|
||||
|
|
@ -2799,7 +2806,7 @@
|
|||
box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
|
||||
}
|
||||
|
||||
.comment:target .header:before {
|
||||
.comment:target .header::before {
|
||||
border-right-color: var(--color-primary) !important;
|
||||
filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important;
|
||||
}
|
||||
|
|
@ -2917,8 +2924,8 @@
|
|||
|
||||
#avatar-arrow {
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
&::before,
|
||||
&::after {
|
||||
right: 100%;
|
||||
top: 20px;
|
||||
border: solid transparent;
|
||||
|
|
@ -2929,13 +2936,13 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
border-right-color: var(--color-secondary);
|
||||
border-width: 9px;
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
border-right-color: var(--color-box-header);
|
||||
border-width: 8px;
|
||||
margin-top: -8px;
|
||||
|
|
@ -3323,7 +3330,7 @@ td.blob-excerpt {
|
|||
background: none !important;
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
&:after {
|
||||
&::after {
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@
|
|||
padding-top: 6px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.is-loading:after {
|
||||
.is-loading::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -4,9 +4,19 @@
|
|||
.js { justify-content: flex-start !important; }
|
||||
.je { justify-content: flex-end !important; }
|
||||
.sb { justify-content: space-between !important; }
|
||||
.mono { font-family: var(--fonts-monospace); font-size: .9em; /* compensate for monospace fonts being usually slighty larger */ }
|
||||
.fc { flex-direction: column !important; }
|
||||
.f1 { flex: 1 !important; }
|
||||
.rounded { border-radius: var(--border-radius) !important; }
|
||||
.word-break { word-wrap: break-word; word-break: break-all; }
|
||||
|
||||
.mono {
|
||||
font-family: var(--fonts-monospace) !important;
|
||||
font-size: .9em !important; /* compensate for monospace fonts being usually slighty larger */
|
||||
}
|
||||
|
||||
.word-break {
|
||||
word-wrap: break-word !important;
|
||||
word-break: break-all !important;
|
||||
}
|
||||
|
||||
.m-0 { margin: 0 !important; }
|
||||
.m-1 { margin: .125rem !important; }
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ html {
|
|||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1105,28 +1105,28 @@ a.ui.basic.green.label:hover {
|
|||
border-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.header:after {
|
||||
.header::after {
|
||||
border-right-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.merge-section.no-header:after {
|
||||
.merge-section.no-header::after {
|
||||
border-right-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.header:before {
|
||||
.header::before {
|
||||
border-right-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.merge-section.no-header:before {
|
||||
.merge-section.no-header::before {
|
||||
border-right-color: #505667;
|
||||
}
|
||||
}
|
||||
|
||||
.repository.new.issue .comment.form .content:after {
|
||||
.repository.new.issue .comment.form .content::after {
|
||||
border-right-color: #353945;
|
||||
}
|
||||
|
||||
.repository.new.issue .comment.form .content:before {
|
||||
.repository.new.issue .comment.form .content::before {
|
||||
border-right-color: #353945;
|
||||
}
|
||||
|
||||
|
|
@ -1151,11 +1151,11 @@ a.ui.basic.green.label:hover {
|
|||
border-right-color: #505667;
|
||||
}
|
||||
|
||||
.repository .comment.form .content .form:after {
|
||||
.repository .comment.form .content .form::after {
|
||||
border-right-color: #353945;
|
||||
}
|
||||
|
||||
.repository .comment.form .content .form:before {
|
||||
.repository .comment.form .content .form::before {
|
||||
border-right-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
|
|
@ -1354,7 +1354,7 @@ td.blob-hunk {
|
|||
border-color: transparent !important;
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
&:after {
|
||||
&::after {
|
||||
background: linear-gradient(to right, transparent 0%, #2a2e3a 100%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1430,60 +1430,60 @@ td.blob-hunk {
|
|||
color: #dbdbdb !important;
|
||||
}
|
||||
|
||||
.ui.checkbox .box:before,
|
||||
.ui.checkbox label:before {
|
||||
.ui.checkbox .box::before,
|
||||
.ui.checkbox label::before {
|
||||
background: #2e323e;
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.checkbox .box:hover:before,
|
||||
.ui.checkbox label:hover:before,
|
||||
.ui.checkbox .box:active:before,
|
||||
.ui.checkbox label:active:before {
|
||||
.ui.checkbox .box:hover::before,
|
||||
.ui.checkbox label:hover::before,
|
||||
.ui.checkbox .box:active::before,
|
||||
.ui.checkbox label:active::before {
|
||||
background: #2e323e;
|
||||
border-color: #6a737d;
|
||||
}
|
||||
|
||||
.ui.checkbox input:focus ~ .box:before,
|
||||
.ui.checkbox input:focus ~ label:before,
|
||||
.ui.checkbox input:checked:focus ~ .box:before,
|
||||
.ui.checkbox input:checked:focus ~ label:before {
|
||||
.ui.checkbox input:focus ~ .box::before,
|
||||
.ui.checkbox input:focus ~ label::before,
|
||||
.ui.checkbox input:checked:focus ~ .box::before,
|
||||
.ui.checkbox input:checked:focus ~ label::before {
|
||||
background: #2e323e;
|
||||
border-color: #6a737d;
|
||||
}
|
||||
|
||||
.ui.checkbox input:checked ~ .box:after,
|
||||
.ui.checkbox input:checked ~ label:after {
|
||||
.ui.checkbox input:checked ~ .box::after,
|
||||
.ui.checkbox input:checked ~ label::after {
|
||||
color: #dbdbdb;
|
||||
}
|
||||
|
||||
.ui.checkbox input:checked ~ .box:before,
|
||||
.ui.checkbox input:checked ~ label:before {
|
||||
.ui.checkbox input:checked ~ .box::before,
|
||||
.ui.checkbox input:checked ~ label::before {
|
||||
background: #2e323e;
|
||||
opacity: 1;
|
||||
color: #dbdbdb;
|
||||
border-color: #505667;
|
||||
}
|
||||
|
||||
.ui.checkbox input:checked:focus ~ .box:before,
|
||||
.ui.checkbox input:checked:focus ~ label:before,
|
||||
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box:before,
|
||||
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:before {
|
||||
.ui.checkbox input:checked:focus ~ .box::before,
|
||||
.ui.checkbox input:checked:focus ~ label::before,
|
||||
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box::before,
|
||||
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before {
|
||||
background: #2e323e;
|
||||
border-color: #6a737d;
|
||||
}
|
||||
|
||||
.ui.checkbox input:checked:focus ~ .box:after,
|
||||
.ui.checkbox input:checked:focus ~ label:after,
|
||||
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box:after,
|
||||
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:after {
|
||||
.ui.checkbox input:checked:focus ~ .box::after,
|
||||
.ui.checkbox input:checked:focus ~ label::after,
|
||||
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box::after,
|
||||
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::after {
|
||||
background: #2e323e;
|
||||
color: #dbdbdb;
|
||||
}
|
||||
|
||||
.ui.checkbox input:focus ~ .box:after,
|
||||
.ui.checkbox input:focus ~ .box::after,
|
||||
.ui.checkbox input:focus ~ label,
|
||||
.ui.checkbox input:focus ~ label:after {
|
||||
.ui.checkbox input:focus ~ label::after {
|
||||
color: #9a9a9a;
|
||||
}
|
||||
|
||||
|
|
@ -1572,7 +1572,7 @@ td.blob-hunk {
|
|||
}
|
||||
|
||||
.bottom-line,
|
||||
.bottom-line:after {
|
||||
.bottom-line::after {
|
||||
border-color: #4e525e !important;
|
||||
}
|
||||
|
||||
|
|
@ -1966,30 +1966,6 @@ a.ui.labels .label:hover {
|
|||
}
|
||||
}
|
||||
|
||||
.ui.loading.segment:before {
|
||||
background: #353945;
|
||||
}
|
||||
|
||||
.ui.popup {
|
||||
background-color: #383c4a;
|
||||
color: var(--color-secondary-dark-6);
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.popup:before {
|
||||
box-shadow: 1px 1px 0 0 var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.popup.top:before,
|
||||
.ui.popup.bottom:before {
|
||||
background-color: #383c4a;
|
||||
}
|
||||
|
||||
.ui.bottom.left.popup:before,
|
||||
.ui.bottom.right.popup:before {
|
||||
box-shadow: -1px -1px 0 0 var(--color-secondary);
|
||||
}
|
||||
|
||||
.markdown:not(code) h1 {
|
||||
border-bottom-color: #888;
|
||||
}
|
||||
|
|
@ -2095,7 +2071,7 @@ img[src$="/img/matrix.svg"] {
|
|||
filter: invert(84%) hue-rotate(180deg);
|
||||
}
|
||||
|
||||
.is-loading:after {
|
||||
.is-loading::after {
|
||||
border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue