mirror of
https://github.com/go-gitea/gitea
synced 2025-07-22 18:28:37 +00:00
Replace fomantic divider module with our own (#25539)
Should look exactly like before for normal dividers. "Horizontal" ones look better because they no longer use image backgrounds. <img width="917" alt="Screenshot 2023-06-27 at 19 07 56" src="https://github.com/go-gitea/gitea/assets/115237/d97d8dec-6859-44a8-85ba-e4549b4dd9df"> <img width="914" alt="Screenshot 2023-06-27 at 19 05 58" src="https://github.com/go-gitea/gitea/assets/115237/8bf98544-2d82-4ebf-ac68-d6dc237bd6b2"> <img width="1246" alt="Screenshot 2023-06-27 at 19 00 42" src="https://github.com/go-gitea/gitea/assets/115237/36a6bb21-6029-4f53-8bee-535f55c66fed"> <img width="344" alt="Screenshot 2023-06-27 at 18 58 15" src="https://github.com/go-gitea/gitea/assets/115237/a9e70aee-8e6b-4ea1-9e93-19c9f96aec6e"> <img width="823" alt="Screenshot 2023-06-27 at 18 56 22" src="https://github.com/go-gitea/gitea/assets/115237/e7a497cd-f262-4683-8872-23c3c8cce32f"> <img width="330" alt="Screenshot 2023-06-27 at 19 21 11" src="https://github.com/go-gitea/gitea/assets/115237/42f24149-a655-4c7e-bd26-8ab52db6446b">
This commit is contained in:
@@ -15,11 +15,6 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* divider needs explicit width because the parent container is "display: flex" */
|
||||
.admin dl.admin-dl-horizontal .ui.divider {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.admin dl.admin-dl-horizontal dt,
|
||||
.admin dl.admin-dl-horizontal dd {
|
||||
line-height: 1;
|
||||
|
@@ -465,15 +465,6 @@ a.label,
|
||||
background-color: var(--color-markup-code-block);
|
||||
}
|
||||
|
||||
.ui.divider {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.divider:not(.vertical,.horizontal) {
|
||||
border-top-color: var(--color-secondary) !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.ui.dividing.header {
|
||||
border-bottom-color: var(--color-secondary);
|
||||
}
|
||||
@@ -2083,11 +2074,6 @@ table th[data-sortt-desc] .svg {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .divider {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.ui.multiple.dropdown > .label {
|
||||
box-shadow: 0 0 0 1px var(--color-secondary) inset;
|
||||
}
|
||||
|
@@ -76,6 +76,7 @@ Gitea's private styles use `g-` prefix.
|
||||
.gt-self-end { align-self: flex-end !important; }
|
||||
.gt-no-underline { text-decoration-line: none !important; }
|
||||
.gt-w-auto { width: auto !important; }
|
||||
.gt-normal-case { text-transform: none !important; }
|
||||
|
||||
.gt-overflow-x-auto { overflow-x: auto !important; }
|
||||
.gt-overflow-x-scroll { overflow-x: scroll !important; }
|
||||
|
@@ -9,6 +9,7 @@
|
||||
@import "./modules/comment.css";
|
||||
@import "./modules/navbar.css";
|
||||
@import "./modules/toast.css";
|
||||
@import "./modules/divider.css";
|
||||
|
||||
@import "./shared/issuelist.css";
|
||||
@import "./shared/milestone.css";
|
||||
|
39
web_src/css/modules/divider.css
Normal file
39
web_src/css/modules/divider.css
Normal file
@@ -0,0 +1,39 @@
|
||||
.divider {
|
||||
margin: 1rem 0;
|
||||
height: 0;
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text);
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.divider:not(.divider-text) {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.divider.divider-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 7px 0;
|
||||
}
|
||||
|
||||
.divider.divider-text::before,
|
||||
.divider.divider-text::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.divider.divider-text::before {
|
||||
margin-right: .75em;
|
||||
}
|
||||
|
||||
.divider.divider-text::after {
|
||||
margin-left: .75em;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .divider {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
margin: 4px 0;
|
||||
}
|
@@ -138,10 +138,6 @@
|
||||
background-color: var(--color-header-wrapper);
|
||||
}
|
||||
|
||||
.repository .header-wrapper .ui.tabs.divider {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.repository .header-wrapper .ui.tabular .svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
@@ -591,6 +587,7 @@
|
||||
|
||||
.repository.options .danger .ui.divider {
|
||||
margin: 0;
|
||||
border-color: var(--color-error-border);
|
||||
}
|
||||
|
||||
.repository.new.issue .comment.form .comment .avatar {
|
||||
@@ -1012,7 +1009,7 @@
|
||||
|
||||
.repository.view.issue .comment-list .comment .merge-section .divider {
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
width: calc(100% + 2rem);
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .comment .merge-section.no-header::before,
|
||||
|
296
web_src/fomantic/build/semantic.css
generated
296
web_src/fomantic/build/semantic.css
generated
@@ -3631,302 +3631,6 @@ body.dimmable > .dimmer {
|
||||
/*******************************
|
||||
User Overrides
|
||||
*******************************/
|
||||
/*!
|
||||
* # Fomantic-UI - Divider
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Divider
|
||||
*******************************/
|
||||
|
||||
.ui.divider {
|
||||
margin: 1rem 0;
|
||||
line-height: 1;
|
||||
height: 0;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Basic
|
||||
---------------*/
|
||||
|
||||
.ui.divider:not(.vertical):not(.horizontal) {
|
||||
border-top: 1px solid rgba(34, 36, 38, 0.15);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Coupling
|
||||
---------------*/
|
||||
|
||||
/* Allow divider between each column row */
|
||||
|
||||
.ui.grid > .column + .divider,
|
||||
.ui.grid > .row > .column + .divider {
|
||||
left: auto;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Horizontal
|
||||
---------------*/
|
||||
|
||||
.ui.horizontal.divider {
|
||||
display: table;
|
||||
white-space: nowrap;
|
||||
height: auto;
|
||||
margin: '';
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui.horizontal.divider:before,
|
||||
.ui.horizontal.divider:after {
|
||||
content: '';
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.ui.horizontal.divider:before {
|
||||
background-position: right 1em top 50%;
|
||||
}
|
||||
|
||||
.ui.horizontal.divider:after {
|
||||
background-position: left 1em top 50%;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Vertical
|
||||
---------------*/
|
||||
|
||||
.ui.vertical.divider {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
height: 50%;
|
||||
line-height: 0;
|
||||
text-align: center;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.ui.vertical.divider:before,
|
||||
.ui.vertical.divider:after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
content: '';
|
||||
z-index: 3;
|
||||
border-left: 1px solid rgba(34, 36, 38, 0.15);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||||
width: 0;
|
||||
height: calc(100% - 1rem);
|
||||
}
|
||||
|
||||
.ui.vertical.divider:before {
|
||||
top: -100%;
|
||||
}
|
||||
|
||||
.ui.vertical.divider:after {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* Inside grid */
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.stackable.grid .ui.vertical.divider,
|
||||
.ui.grid .stackable.row .ui.vertical.divider {
|
||||
display: table;
|
||||
white-space: nowrap;
|
||||
height: auto;
|
||||
margin: '';
|
||||
overflow: hidden;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
position: static;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.ui.stackable.grid .ui.vertical.divider:before,
|
||||
.ui.grid .stackable.row .ui.vertical.divider:before,
|
||||
.ui.stackable.grid .ui.vertical.divider:after,
|
||||
.ui.grid .stackable.row .ui.vertical.divider:after {
|
||||
left: 0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
content: '';
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.ui.stackable.grid .ui.vertical.divider:before,
|
||||
.ui.grid .stackable.row .ui.vertical.divider:before {
|
||||
background-position: right 1em top 50%;
|
||||
}
|
||||
|
||||
.ui.stackable.grid .ui.vertical.divider:after,
|
||||
.ui.grid .stackable.row .ui.vertical.divider:after {
|
||||
background-position: left 1em top 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Icon
|
||||
---------------*/
|
||||
|
||||
.ui.divider > .icon {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Header
|
||||
---------------*/
|
||||
|
||||
.ui.horizontal.divider[class*="left aligned"]:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.horizontal.divider[class*="left aligned"]:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.horizontal.divider[class*="right aligned"]:before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.horizontal.divider[class*="right aligned"]:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Hidden
|
||||
---------------*/
|
||||
|
||||
.ui.hidden.divider {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.ui.hidden.divider:before,
|
||||
.ui.hidden.divider:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Inverted
|
||||
---------------*/
|
||||
|
||||
/*--------------
|
||||
Fitted
|
||||
---------------*/
|
||||
|
||||
.ui.fitted.divider {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Clearing
|
||||
---------------*/
|
||||
|
||||
.ui.clearing.divider {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Section
|
||||
---------------*/
|
||||
|
||||
.ui.section.divider {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Sizes
|
||||
---------------*/
|
||||
|
||||
.ui.divider {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.ui.mini.divider {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
|
||||
.ui.tiny.divider {
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
|
||||
.ui.small.divider {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
|
||||
.ui.large.divider {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
|
||||
.ui.big.divider {
|
||||
font-size: 1.28571429rem;
|
||||
}
|
||||
|
||||
.ui.huge.divider {
|
||||
font-size: 1.42857143rem;
|
||||
}
|
||||
|
||||
.ui.massive.divider {
|
||||
font-size: 1.71428571rem;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
.ui.horizontal.divider:before,
|
||||
.ui.horizontal.divider:after {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.ui.stackable.grid .ui.vertical.divider:before,
|
||||
.ui.grid .stackable.row .ui.vertical.divider:before,
|
||||
.ui.stackable.grid .ui.vertical.divider:after,
|
||||
.ui.grid .stackable.row .ui.vertical.divider:after {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
/*!
|
||||
* # Fomantic-UI - Dropdown
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
|
@@ -26,7 +26,6 @@
|
||||
"checkbox",
|
||||
"container",
|
||||
"dimmer",
|
||||
"divider",
|
||||
"dropdown",
|
||||
"form",
|
||||
"grid",
|
||||
|
@@ -128,7 +128,7 @@ function initRepoIssueListAuthorDropdown() {
|
||||
if (newMenuHtml) {
|
||||
const $newMenuItems = $(newMenuHtml);
|
||||
$newMenuItems.addClass('dynamic-item');
|
||||
$menu.append('<div class="ui divider dynamic-item"></div>', ...$newMenuItems);
|
||||
$menu.append('<div class="divider dynamic-item"></div>', ...$newMenuItems);
|
||||
}
|
||||
$searchDropdown.dropdown('refresh');
|
||||
// defer our selection to the next tick, because dropdown will set the selection item after this `menu` function
|
||||
|
Reference in New Issue
Block a user