forked from forgejo/forgejo
[Port] gitea#30033: Remove fomantic header module
Likely still a few useless classes left, but I think I at least don't have missed any. Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: Giteabot <teabot@gitea.io> --- Conflict resolution: Trivial Ref: https://codeberg.org/forgejo/forgejo/issues/2776 (cherry picked from commit f22fe4e1944d8084dec7c04f064a8e782fca94d4)
This commit is contained in:
silverwind
Gusted
parent
a579a0f318
commit
4834583f02
7 changed files with 176 additions and 830 deletions
|
|
@ -308,10 +308,6 @@ a.label,
|
|||
background-color: var(--color-markup-code-block);
|
||||
}
|
||||
|
||||
.ui.dividing.header {
|
||||
border-bottom-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
/* fix Fomantic's line-height cutting off "g" on Windows Chrome with Segoe UI */
|
||||
.ui.input > input {
|
||||
line-height: var(--line-height-default);
|
||||
|
|
@ -587,22 +583,10 @@ ol.ui.list li,
|
|||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
@ -1096,10 +1080,6 @@ input:-webkit-autofill:active,
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui .normal.header {
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
.ui .form .autofill-dummy {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
|
|
@ -1257,17 +1237,6 @@ input:-webkit-autofill:active,
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ui.icon.header svg {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
float: none;
|
||||
display: block;
|
||||
line-height: var(--line-height-default);
|
||||
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;
|
||||
|
|
@ -1295,15 +1264,6 @@ input:-webkit-autofill:active,
|
|||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.attention-header {
|
||||
padding: 0.5em 0.75em !important;
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
|
||||
.attention-header :first-child {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.attention-icon {
|
||||
margin: auto 0.5em auto 0;
|
||||
}
|
||||
|
|
@ -1773,35 +1733,6 @@ a.ui.basic.label:hover {
|
|||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.ui.attached.header {
|
||||
position: relative;
|
||||
background: var(--color-box-header);
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
/* fix misaligned right buttons on box headers */
|
||||
.ui.attached.header > .ui.right {
|
||||
position: absolute;
|
||||
right: 0.78571429rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
/* the default ".ui.attached.header > .ui.right" is only able to contain "tiny" buttons, other buttons are too large */
|
||||
.ui.attached.header > .ui.right .ui.tiny.button {
|
||||
padding: 6px 10px;
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
/* if a .top.attached.header is followed by a .segment, add some margin */
|
||||
.ui.segments + .ui.top.attached.header,
|
||||
.ui.attached.segment + .ui.top.attached.header {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.rss-icon {
|
||||
display: inline-flex;
|
||||
color: var(--color-text-light-1);
|
||||
|
|
@ -1857,11 +1788,6 @@ table th[data-sortt-desc] .svg {
|
|||
background: var(--color-secondary-dark-1) !important;
|
||||
}
|
||||
|
||||
/* https://github.com/go-gitea/gitea/pull/11486 */
|
||||
.ui.sub.header {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ui.tabular.menu {
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
|
|
@ -1912,22 +1838,6 @@ table th[data-sortt-desc] .svg {
|
|||
height: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
@import "./modules/svg.css";
|
||||
@import "./modules/flexcontainer.css";
|
||||
@import "./modules/message.css";
|
||||
@import "./modules/header.css";
|
||||
|
||||
@import "./shared/flex-list.css";
|
||||
@import "./shared/milestone.css";
|
||||
|
|
|
|||
171
web_src/css/modules/header.css
Normal file
171
web_src/css/modules/header.css
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
/* based on Fomantic UI header module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.header {
|
||||
color: var(--color-text);
|
||||
border: none;
|
||||
margin: calc(2rem - 0.1428571428571429em) 0 1rem;
|
||||
padding: 0;
|
||||
font-family: var(--fonts-regular);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 1.28571429;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ui.header:first-child {
|
||||
margin-top: -0.14285714em;
|
||||
}
|
||||
|
||||
.ui.header:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.header .ui.label {
|
||||
margin-left: 0.25rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.header > .ui.label.compact {
|
||||
margin-top: inherit;
|
||||
}
|
||||
|
||||
.ui.header .sub.header {
|
||||
display: block;
|
||||
font-weight: var(--font-weight-normal);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
.ui.header > i.icon {
|
||||
display: table-cell;
|
||||
opacity: 1;
|
||||
font-size: 1.5em;
|
||||
padding-top: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.header > i.icon:only-child {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.ui.header + p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2.ui.header {
|
||||
font-size: 1.71428571rem;
|
||||
}
|
||||
h2.ui.header .sub.header {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
|
||||
h4.ui.header {
|
||||
font-size: 1.07142857rem;
|
||||
}
|
||||
h4.ui.header .sub.header {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.ui.sub.header {
|
||||
padding: 0;
|
||||
margin-bottom: 0.14285714rem;
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
|
||||
.ui.icon.header svg {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
float: none;
|
||||
display: block;
|
||||
line-height: var(--line-height-default);
|
||||
padding: 0;
|
||||
margin: 0 auto 0.5rem;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.header:not(h1,h2,h3,h4,h5,h6) {
|
||||
font-size: 1.28571429em;
|
||||
}
|
||||
|
||||
.ui.attached.header {
|
||||
position: relative;
|
||||
background: var(--color-box-header);
|
||||
padding: 0.78571429rem 1rem;
|
||||
margin: 0 -1px;
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.attached:not(.top).header {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui.top.attached.header {
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
|
||||
.ui.bottom.attached.header {
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.attached.header:not(h1,h2,h3,h4,h5,h6) {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* fix misaligned right buttons on box headers */
|
||||
.ui.attached.header > .ui.right {
|
||||
position: absolute;
|
||||
right: 0.78571429rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
/* the default ".ui.attached.header > .ui.right" is only able to contain "tiny" buttons, other buttons are too large */
|
||||
.ui.attached.header > .ui.right .ui.tiny.button {
|
||||
padding: 6px 10px;
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
/* if a .top.attached.header is followed by a .segment, add some margin */
|
||||
.ui.segments + .ui.top.attached.header,
|
||||
.ui.attached.segment + .ui.top.attached.header {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.ui.dividing.header {
|
||||
border-bottom-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.dividing.header .sub.header {
|
||||
padding-bottom: 0.21428571rem;
|
||||
}
|
||||
|
||||
.ui.dividing.header i.icon {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.error.header {
|
||||
background: var(--color-error-bg) !important;
|
||||
color: var(--color-error-text) !important;
|
||||
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;
|
||||
}
|
||||
|
||||
.attention-header {
|
||||
padding: 0.5em 0.75em !important;
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue