Button and color enhancements (#24989)
- Various corrections to button styles, especially secondary - Remove focus highlight, it's annoying when it stays on button after press - Clearly define ghost and link buttons with demos in devtest - Remove black, grey and tertiary buttons, they should not be used - Make `arc-green` slightly darker <img width="1226" alt="image" src="8d89786a-01ab-40f8-ae5a-e17f40e35084"> <img width="1249" alt="image" src="83651e6d-3c27-46ff-b8bd-ff344d70e949"> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind
GitHub
parent
3c6aa8d3e1
commit
623b3b590e
31 changed files with 359 additions and 372 deletions
|
|
@ -73,8 +73,9 @@
|
|||
--color-secondary-alpha-70: #dededeb3;
|
||||
--color-secondary-alpha-80: #dededecc;
|
||||
--color-secondary-alpha-90: #dededee1;
|
||||
--color-secondary-hover: var(--color-secondary-dark-1);
|
||||
--color-secondary-active: var(--color-secondary-dark-2);
|
||||
--color-secondary-button: var(--color-secondary-dark-4);
|
||||
--color-secondary-hover: var(--color-secondary-dark-5);
|
||||
--color-secondary-active: var(--color-secondary-dark-6);
|
||||
/* console colors - used for actions console and console files */
|
||||
--color-console-fg: #eeeff2;
|
||||
--color-console-fg-subtle: #959cab;
|
||||
|
|
@ -191,22 +192,20 @@
|
|||
--color-footer: #ffffff;
|
||||
--color-timeline: #ececec;
|
||||
--color-input-text: #212121;
|
||||
--color-input-background: #ffffff;
|
||||
--color-input-background: #fafafa;
|
||||
--color-input-toggle-background: #dedede;
|
||||
--color-input-border: #dedede;
|
||||
--color-input-border-hover: #cecece;
|
||||
--color-header-wrapper: #f8f8f8;
|
||||
--color-header-wrapper-transparent: #f8f8f800;
|
||||
--color-input-border: var(--color-secondary);
|
||||
--color-input-border-hover: var(--color-secondary-dark-1);
|
||||
--color-light: #00000006;
|
||||
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
|
||||
--color-light-border: #0000001d;
|
||||
--color-hover: #00000014;
|
||||
--color-active: #0000001e;
|
||||
--color-menu: #ffffff;
|
||||
--color-card: #ffffff;
|
||||
--color-active: #0000001b;
|
||||
--color-menu: #fafafa;
|
||||
--color-card: #fafafa;
|
||||
--color-markup-table-row: #00000008;
|
||||
--color-markup-code-block: #00000010;
|
||||
--color-button: #ffffff;
|
||||
--color-button: #fafafa;
|
||||
--color-code-bg: #ffffff;
|
||||
--color-code-sidebar-bg: #f5f5f5;
|
||||
--color-shadow: #00000030;
|
||||
|
|
@ -415,11 +414,6 @@ a.silenced:hover {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.delete-button,
|
||||
.delete-button:hover {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
a.label,
|
||||
.repository-menu a,
|
||||
.ui.search .results a,
|
||||
|
|
@ -462,12 +456,6 @@ a.label,
|
|||
background-color: var(--color-markup-code-block);
|
||||
}
|
||||
|
||||
/* try to match button with no icons in height */
|
||||
.icon-button {
|
||||
padding-top: 7.42px !important;
|
||||
padding-bottom: 7.42px !important;
|
||||
}
|
||||
|
||||
.ui.divider {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
|
@ -509,8 +497,9 @@ a.label,
|
|||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.ui.action.input:not([class*="left action"]) > input,
|
||||
.ui.action.input:not([class*="left action"]) > input:hover {
|
||||
border-right-color: transparent;
|
||||
border-right: 1px solid transparent;
|
||||
}
|
||||
|
||||
.ui.action.input:not([class*="left action"]) > input:focus {
|
||||
|
|
@ -682,7 +671,7 @@ a.label,
|
|||
}
|
||||
|
||||
.ui.menu .dropdown.item .menu {
|
||||
background: var(--color-menu);
|
||||
background: var(--color-body);
|
||||
}
|
||||
|
||||
.ui.menu .ui.dropdown .menu > .item {
|
||||
|
|
@ -1733,6 +1722,10 @@ i.icon.centerlock {
|
|||
color: var(--color-label-text);
|
||||
}
|
||||
|
||||
.ui.label > a {
|
||||
opacity: .75; /* increase contrast over default fomantic .5 */
|
||||
}
|
||||
|
||||
.ui.active.label {
|
||||
background: var(--color-label-active-bg);
|
||||
border-color: var(--color-label-active-bg);
|
||||
|
|
@ -2037,7 +2030,7 @@ a.ui.ui.ui.basic.primary.label:hover {
|
|||
|
||||
.ui.basic.labels .label,
|
||||
.ui.basic.label {
|
||||
background: var(--color-light);
|
||||
background: var(--color-button);
|
||||
border-color: var(--color-light-border);
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ Gitea's private styles use `g-` prefix.
|
|||
.gt-ab { align-items: baseline !important; }
|
||||
.gt-tc { text-align: center !important; }
|
||||
.gt-tl { text-align: left !important; }
|
||||
.gt-tdn { text-decoration: none !important; }
|
||||
.gt-jc { justify-content: center !important; }
|
||||
.gt-js { justify-content: flex-start !important; }
|
||||
.gt-je { justify-content: flex-end !important; }
|
||||
|
|
@ -76,6 +75,7 @@ Gitea's private styles use `g-` prefix.
|
|||
.gt-self-center { align-self: center !important; }
|
||||
.gt-self-start { align-self: flex-start !important; }
|
||||
.gt-self-end { align-self: flex-end !important; }
|
||||
.gt-no-underline { text-decoration-line: none !important; }
|
||||
|
||||
.gt-overflow-x-auto { overflow-x: auto !important; }
|
||||
.gt-overflow-x-scroll { overflow-x: scroll !important; }
|
||||
|
|
@ -124,6 +124,14 @@ Gitea's private styles use `g-` prefix.
|
|||
|
||||
.gt-text-white { color: var(--color-white) !important; }
|
||||
|
||||
.interact-fg { color: inherit !important; }
|
||||
.interact-fg:hover { color: var(--color-primary) !important; }
|
||||
.interact-fg:active { color: var(--color-primary-active) !important; }
|
||||
|
||||
.interact-bg { background: transparent !important; }
|
||||
.interact-bg:hover { background: var(--color-hover) !important; }
|
||||
.interact-bg:active { background: var(--color-active) !important; }
|
||||
|
||||
.gt-m-0 { margin: 0 !important; }
|
||||
.gt-m-1 { margin: .125rem !important; }
|
||||
.gt-m-2 { margin: .25rem !important; }
|
||||
|
|
@ -253,6 +261,7 @@ Gitea's private styles use `g-` prefix.
|
|||
|
||||
.gt-shrink-0 { flex-shrink: 0 !important; }
|
||||
|
||||
.gt-font-12 { font-size: 12px !important }
|
||||
.gt-font-13 { font-size: 13px !important }
|
||||
.gt-font-14 { font-size: 14px !important }
|
||||
.gt-font-15 { font-size: 15px !important }
|
||||
|
|
|
|||
|
|
@ -1,44 +1,21 @@
|
|||
/* this contains override styles for buttons and related elements */
|
||||
|
||||
.ui.button {
|
||||
.ui.button,
|
||||
.ui.button:focus {
|
||||
background: var(--color-button);
|
||||
border: 1px solid var(--color-light-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* a ghost button is a button without border */
|
||||
.button.button-ghost {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.button.button-ghost:hover {
|
||||
.ui.button:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.button.button-ghost:active {
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.ui.button.button-link {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.page-content .ui.button {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ui.button:focus,
|
||||
.ui.button:hover {
|
||||
background: var(--color-hover);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.active.button,
|
||||
.ui.button:active,
|
||||
.ui.active.button:active,
|
||||
|
|
@ -51,6 +28,42 @@
|
|||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.delete-button,
|
||||
.delete-button:hover {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
/* try to match button with no icons in height */
|
||||
.icon-button {
|
||||
padding-top: 7.42px !important;
|
||||
padding-bottom: 7.42px !important;
|
||||
}
|
||||
|
||||
/* btn is a plain button without any opinionated styling */
|
||||
|
||||
.btn {
|
||||
background: transparent;
|
||||
border-radius: var(--border-radius);
|
||||
border: none;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
.btn:active,
|
||||
.btn:focus {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
a.btn,
|
||||
a.btn:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* other button styles */
|
||||
|
||||
.ui.buttons .button:first-child {
|
||||
border-left: 1px solid var(--color-light-border);
|
||||
}
|
||||
|
|
@ -63,10 +76,6 @@
|
|||
border-left: none;
|
||||
}
|
||||
|
||||
.ui.button.button-link:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.two-toggle-buttons .button:not(.active):first-of-type {
|
||||
border-right: none;
|
||||
}
|
||||
|
|
@ -77,9 +86,11 @@
|
|||
|
||||
.ui.labeled.button.disabled > .button,
|
||||
.ui.basic.buttons .button,
|
||||
.ui.basic.button {
|
||||
.ui.basic.button,
|
||||
.ui.basic.buttons .button:focus,
|
||||
.ui.basic.button:focus {
|
||||
color: var(--color-text-light);
|
||||
background: var(--color-light);
|
||||
background: var(--color-button);
|
||||
}
|
||||
|
||||
.ui.basic.buttons .button:hover,
|
||||
|
|
@ -88,8 +99,7 @@
|
|||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui.basic.buttons .button:focus,
|
||||
.ui.basic.button:focus,
|
||||
|
||||
.ui.basic.buttons .button:active,
|
||||
.ui.basic.button:active,
|
||||
.ui.basic.buttons .active.button,
|
||||
|
|
@ -114,14 +124,14 @@
|
|||
.ui.primary.labels .label,
|
||||
.ui.ui.ui.primary.label,
|
||||
.ui.primary.button,
|
||||
.ui.primary.buttons .button {
|
||||
.ui.primary.buttons .button,
|
||||
.ui.primary.button:focus,
|
||||
.ui.primary.buttons .button:focus {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.ui.primary.button:hover,
|
||||
.ui.primary.buttons .button:hover,
|
||||
.ui.primary.button:focus,
|
||||
.ui.primary.buttons .button:focus {
|
||||
.ui.primary.buttons .button:hover {
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
|
|
@ -131,15 +141,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.primary.buttons .button,
|
||||
.ui.basic.primary.button {
|
||||
.ui.basic.primary.button,
|
||||
.ui.basic.primary.buttons .button:focus,
|
||||
.ui.basic.primary.button:focus {
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.ui.basic.primary.buttons .button:hover,
|
||||
.ui.basic.primary.button:hover,
|
||||
.ui.basic.primary.buttons .button:focus,
|
||||
.ui.basic.primary.button:focus {
|
||||
.ui.basic.primary.button:hover {
|
||||
color: var(--color-primary-hover);
|
||||
border-color: var(--color-primary-hover);
|
||||
}
|
||||
|
|
@ -155,47 +165,46 @@
|
|||
.ui.secondary.labels .label,
|
||||
.ui.ui.ui.secondary.label,
|
||||
.ui.secondary.button,
|
||||
.ui.secondary.buttons .button {
|
||||
background: var(--color-secondary);
|
||||
color: var(--color-text);
|
||||
.ui.secondary.buttons .button,
|
||||
.ui.secondary.button:focus,
|
||||
.ui.secondary.buttons .button:focus {
|
||||
background: var(--color-secondary-button);
|
||||
}
|
||||
|
||||
.ui.secondary.button:hover,
|
||||
.ui.secondary.buttons .button:hover,
|
||||
.ui.secondary.button:focus,
|
||||
.ui.secondary.buttons .button:focus {
|
||||
background: var(--color-secondary-dark-1);
|
||||
color: var(--color-text);
|
||||
.ui.secondary.buttons .button:hover {
|
||||
background: var(--color-secondary-hover);
|
||||
}
|
||||
|
||||
.ui.secondary.button:active,
|
||||
.ui.secondary.buttons .button:active {
|
||||
background: var(--color-secondary-dark-2);
|
||||
color: var(--color-text);
|
||||
background: var(--color-secondary-active);
|
||||
}
|
||||
|
||||
.ui.basic.secondary.buttons .button,
|
||||
.ui.basic.secondary.button {
|
||||
color: var(--color-secondary-dark-6) !important;
|
||||
.ui.basic.secondary.button,
|
||||
.ui.basic.secondary.button:focus,
|
||||
.ui.basic.secondary.buttons .button:focus {
|
||||
color: var(--color-secondary-button);
|
||||
border-color: var(--color-secondary-button);
|
||||
}
|
||||
|
||||
.ui.basic.secondary.buttons .button:hover,
|
||||
.ui.basic.secondary.button:hover,
|
||||
.ui.basic.secondary.buttons .button:active,
|
||||
.ui.basic.secondary.button:active {
|
||||
color: var(--color-secondary-dark-8) !important;
|
||||
border-color: var(--color-secondary-dark-1) !important;
|
||||
.ui.basic.secondary.button:hover {
|
||||
color: var(--color-secondary-hover);
|
||||
border-color: var(--color-secondary-hover);
|
||||
}
|
||||
|
||||
.ui.basic.secondary.button:focus,
|
||||
.ui.basic.secondary.buttons .button:focus {
|
||||
color: var(--color-secondary-dark-8) !important;
|
||||
border-color: var(--color-secondary-dark-3) !important;
|
||||
.ui.basic.secondary.buttons .button:active,
|
||||
.ui.basic.secondary.button:active {
|
||||
color: var(--color-secondary-active);
|
||||
border-color: var(--color-secondary-active);
|
||||
}
|
||||
|
||||
/* tertiary */
|
||||
|
||||
.ui.tertiary.button {
|
||||
.ui.tertiary.button,
|
||||
.ui.tertiary.button:focus {
|
||||
color: var(--color-text-light);
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -204,7 +213,7 @@
|
|||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.tertiary.button:focus {
|
||||
.ui.tertiary.button:active {
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
|
|
@ -213,14 +222,14 @@
|
|||
.ui.red.labels .label,
|
||||
.ui.ui.ui.red.label,
|
||||
.ui.red.button,
|
||||
.ui.red.buttons .button {
|
||||
.ui.red.buttons .button,
|
||||
.ui.red.button:focus,
|
||||
.ui.red.buttons .button:focus {
|
||||
background: var(--color-red);
|
||||
}
|
||||
|
||||
.ui.red.button:hover,
|
||||
.ui.red.buttons .button:hover,
|
||||
.ui.red.button:focus,
|
||||
.ui.red.buttons .button:focus {
|
||||
.ui.red.buttons .button:hover {
|
||||
background: var(--color-red-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -230,15 +239,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.red.buttons .button,
|
||||
.ui.basic.red.button {
|
||||
.ui.basic.red.button,
|
||||
.ui.basic.red.buttons .button:focus,
|
||||
.ui.basic.red.button:focus {
|
||||
color: var(--color-red);
|
||||
border-color: var(--color-red);
|
||||
}
|
||||
|
||||
.ui.basic.red.buttons .button:hover,
|
||||
.ui.basic.red.button:hover,
|
||||
.ui.basic.red.buttons .button:focus,
|
||||
.ui.basic.red.button:focus {
|
||||
.ui.basic.red.button:hover {
|
||||
color: var(--color-red-dark-1);
|
||||
border-color: var(--color-red-dark-1);
|
||||
}
|
||||
|
|
@ -254,14 +263,14 @@
|
|||
.ui.orange.labels .label,
|
||||
.ui.ui.ui.orange.label,
|
||||
.ui.orange.button,
|
||||
.ui.orange.buttons .button {
|
||||
.ui.orange.buttons .button,
|
||||
.ui.orange.button:focus,
|
||||
.ui.orange.buttons .button:focus {
|
||||
background: var(--color-orange);
|
||||
}
|
||||
|
||||
.ui.orange.button:hover,
|
||||
.ui.orange.buttons .button:hover,
|
||||
.ui.orange.button:focus,
|
||||
.ui.orange.buttons .button:focus {
|
||||
.ui.orange.buttons .button:hover {
|
||||
background: var(--color-orange-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -271,15 +280,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.orange.buttons .button,
|
||||
.ui.basic.orange.button {
|
||||
.ui.basic.orange.button,
|
||||
.ui.basic.orange.buttons .button:focus,
|
||||
.ui.basic.orange.button:focus {
|
||||
color: var(--color-orange);
|
||||
border-color: var(--color-orange);
|
||||
}
|
||||
|
||||
.ui.basic.orange.buttons .button:hover,
|
||||
.ui.basic.orange.button:hover,
|
||||
.ui.basic.orange.buttons .button:focus,
|
||||
.ui.basic.orange.button:focus {
|
||||
.ui.basic.orange.button:hover {
|
||||
color: var(--color-orange-dark-1);
|
||||
border-color: var(--color-orange-dark-1);
|
||||
}
|
||||
|
|
@ -295,14 +304,14 @@
|
|||
.ui.yellow.labels .label,
|
||||
.ui.ui.ui.yellow.label,
|
||||
.ui.yellow.button,
|
||||
.ui.yellow.buttons .button {
|
||||
.ui.yellow.buttons .button,
|
||||
.ui.yellow.button:focus,
|
||||
.ui.yellow.buttons .button:focus {
|
||||
background: var(--color-yellow);
|
||||
}
|
||||
|
||||
.ui.yellow.button:hover,
|
||||
.ui.yellow.buttons .button:hover,
|
||||
.ui.yellow.button:focus,
|
||||
.ui.yellow.buttons .button:focus {
|
||||
.ui.yellow.buttons .button:hover {
|
||||
background: var(--color-yellow-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -312,15 +321,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.yellow.buttons .button,
|
||||
.ui.basic.yellow.button {
|
||||
.ui.basic.yellow.button,
|
||||
.ui.basic.yellow.buttons .button:focus,
|
||||
.ui.basic.yellow.button:focus {
|
||||
color: var(--color-yellow);
|
||||
border-color: var(--color-yellow);
|
||||
}
|
||||
|
||||
.ui.basic.yellow.buttons .button:hover,
|
||||
.ui.basic.yellow.button:hover,
|
||||
.ui.basic.yellow.buttons .button:focus,
|
||||
.ui.basic.yellow.button:focus {
|
||||
.ui.basic.yellow.button:hover {
|
||||
color: var(--color-yellow-dark-1);
|
||||
border-color: var(--color-yellow-dark-1);
|
||||
}
|
||||
|
|
@ -336,14 +345,14 @@
|
|||
.ui.olive.labels .label,
|
||||
.ui.ui.ui.olive.label,
|
||||
.ui.olive.button,
|
||||
.ui.olive.buttons .button {
|
||||
.ui.olive.buttons .button,
|
||||
.ui.olive.button:focus,
|
||||
.ui.olive.buttons .button:focus {
|
||||
background: var(--color-olive);
|
||||
}
|
||||
|
||||
.ui.olive.button:hover,
|
||||
.ui.olive.buttons .button:hover,
|
||||
.ui.olive.button:focus,
|
||||
.ui.olive.buttons .button:focus {
|
||||
.ui.olive.buttons .button:hover {
|
||||
background: var(--color-olive-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -353,15 +362,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.olive.buttons .button,
|
||||
.ui.basic.olive.button {
|
||||
.ui.basic.olive.button,
|
||||
.ui.basic.olive.buttons .button:focus,
|
||||
.ui.basic.olive.button:focus {
|
||||
color: var(--color-olive);
|
||||
border-color: var(--color-olive);
|
||||
}
|
||||
|
||||
.ui.basic.olive.buttons .button:hover,
|
||||
.ui.basic.olive.button:hover,
|
||||
.ui.basic.olive.buttons .button:focus,
|
||||
.ui.basic.olive.button:focus {
|
||||
.ui.basic.olive.button:hover {
|
||||
color: var(--color-olive-dark-1);
|
||||
border-color: var(--color-olive-dark-1);
|
||||
}
|
||||
|
|
@ -377,14 +386,14 @@
|
|||
.ui.green.labels .label,
|
||||
.ui.ui.ui.green.label,
|
||||
.ui.green.button,
|
||||
.ui.green.buttons .button {
|
||||
.ui.green.buttons .button,
|
||||
.ui.green.button:focus,
|
||||
.ui.green.buttons .button:focus {
|
||||
background: var(--color-green);
|
||||
}
|
||||
|
||||
.ui.green.button:hover,
|
||||
.ui.green.buttons .button:hover,
|
||||
.ui.green.button:focus,
|
||||
.ui.green.buttons .button:focus {
|
||||
.ui.green.buttons .button:hover {
|
||||
background: var(--color-green-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -394,15 +403,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.green.buttons .button,
|
||||
.ui.basic.green.button {
|
||||
.ui.basic.green.button,
|
||||
.ui.basic.green.buttons .button:focus,
|
||||
.ui.basic.green.button:focus {
|
||||
color: var(--color-green);
|
||||
border-color: var(--color-green);
|
||||
}
|
||||
|
||||
.ui.basic.green.buttons .button:hover,
|
||||
.ui.basic.green.button:hover,
|
||||
.ui.basic.green.buttons .button:focus,
|
||||
.ui.basic.green.button:focus {
|
||||
.ui.basic.green.button:hover {
|
||||
color: var(--color-green-dark-1);
|
||||
border-color: var(--color-green-dark-1);
|
||||
}
|
||||
|
|
@ -418,14 +427,14 @@
|
|||
.ui.teal.labels .label,
|
||||
.ui.ui.ui.teal.label,
|
||||
.ui.teal.button,
|
||||
.ui.teal.buttons .button {
|
||||
.ui.teal.buttons .button,
|
||||
.ui.teal.button:focus,
|
||||
.ui.teal.buttons .button:focus {
|
||||
background: var(--color-teal);
|
||||
}
|
||||
|
||||
.ui.teal.button:hover,
|
||||
.ui.teal.buttons .button:hover,
|
||||
.ui.teal.button:focus,
|
||||
.ui.teal.buttons .button:focus {
|
||||
.ui.teal.buttons .button:hover {
|
||||
background: var(--color-teal-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -435,15 +444,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.teal.buttons .button,
|
||||
.ui.basic.teal.button {
|
||||
.ui.basic.teal.button,
|
||||
.ui.basic.teal.buttons .button:focus,
|
||||
.ui.basic.teal.button:focus {
|
||||
color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
.ui.basic.teal.buttons .button:hover,
|
||||
.ui.basic.teal.button:hover,
|
||||
.ui.basic.teal.buttons .button:focus,
|
||||
.ui.basic.teal.button:focus {
|
||||
.ui.basic.teal.button:hover {
|
||||
color: var(--color-teal-dark-1);
|
||||
border-color: var(--color-teal-dark-1);
|
||||
}
|
||||
|
|
@ -459,14 +468,14 @@
|
|||
.ui.blue.labels .label,
|
||||
.ui.ui.ui.blue.label,
|
||||
.ui.blue.button,
|
||||
.ui.blue.buttons .button {
|
||||
.ui.blue.buttons .button,
|
||||
.ui.blue.button:focus,
|
||||
.ui.blue.buttons .button:focus {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
.ui.blue.button:hover,
|
||||
.ui.blue.buttons .button:hover,
|
||||
.ui.blue.button:focus,
|
||||
.ui.blue.buttons .button:focus {
|
||||
.ui.blue.buttons .button:hover {
|
||||
background: var(--color-blue-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -476,15 +485,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.blue.buttons .button,
|
||||
.ui.basic.blue.button {
|
||||
.ui.basic.blue.button,
|
||||
.ui.basic.blue.buttons .button:focus,
|
||||
.ui.basic.blue.button:focus {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
.ui.basic.blue.buttons .button:hover,
|
||||
.ui.basic.blue.button:hover,
|
||||
.ui.basic.blue.buttons .button:focus,
|
||||
.ui.basic.blue.button:focus {
|
||||
.ui.basic.blue.button:hover {
|
||||
color: var(--color-blue-dark-1);
|
||||
border-color: var(--color-blue-dark-1);
|
||||
}
|
||||
|
|
@ -500,14 +509,14 @@
|
|||
.ui.violet.labels .label,
|
||||
.ui.ui.ui.violet.label,
|
||||
.ui.violet.button,
|
||||
.ui.violet.buttons .button {
|
||||
.ui.violet.buttons .button,
|
||||
.ui.violet.button:focus,
|
||||
.ui.violet.buttons .button:focus {
|
||||
background: var(--color-violet);
|
||||
}
|
||||
|
||||
.ui.violet.button:hover,
|
||||
.ui.violet.buttons .button:hover,
|
||||
.ui.violet.button:focus,
|
||||
.ui.violet.buttons .button:focus {
|
||||
.ui.violet.buttons .button:hover {
|
||||
background: var(--color-violet-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -517,15 +526,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.violet.buttons .button,
|
||||
.ui.basic.violet.button {
|
||||
.ui.basic.violet.button,
|
||||
.ui.basic.violet.buttons .button:focus,
|
||||
.ui.basic.violet.button:focus {
|
||||
color: var(--color-violet);
|
||||
border-color: var(--color-violet);
|
||||
}
|
||||
|
||||
.ui.basic.violet.buttons .button:hover,
|
||||
.ui.basic.violet.button:hover,
|
||||
.ui.basic.violet.buttons .button:focus,
|
||||
.ui.basic.violet.button:focus {
|
||||
.ui.basic.violet.button:hover {
|
||||
color: var(--color-violet-dark-1);
|
||||
border-color: var(--color-violet-dark-1);
|
||||
}
|
||||
|
|
@ -541,14 +550,14 @@
|
|||
.ui.purple.labels .label,
|
||||
.ui.ui.ui.purple.label,
|
||||
.ui.purple.button,
|
||||
.ui.purple.buttons .button {
|
||||
.ui.purple.buttons .button,
|
||||
.ui.purple.button:focus,
|
||||
.ui.purple.buttons .button:focus {
|
||||
background: var(--color-purple);
|
||||
}
|
||||
|
||||
.ui.purple.button:hover,
|
||||
.ui.purple.buttons .button:hover,
|
||||
.ui.purple.button:focus,
|
||||
.ui.purple.buttons .button:focus {
|
||||
.ui.purple.buttons .button:hover {
|
||||
background: var(--color-purple-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -558,15 +567,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.purple.buttons .button,
|
||||
.ui.basic.purple.button {
|
||||
.ui.basic.purple.button,
|
||||
.ui.basic.purple.buttons .button:focus,
|
||||
.ui.basic.purple.button:focus {
|
||||
color: var(--color-purple);
|
||||
border-color: var(--color-purple);
|
||||
}
|
||||
|
||||
.ui.basic.purple.buttons .button:hover,
|
||||
.ui.basic.purple.button:hover,
|
||||
.ui.basic.purple.buttons .button:focus,
|
||||
.ui.basic.purple.button:focus {
|
||||
.ui.basic.purple.button:hover {
|
||||
color: var(--color-purple-dark-1);
|
||||
border-color: var(--color-purple-dark-1);
|
||||
}
|
||||
|
|
@ -582,14 +591,14 @@
|
|||
.ui.pink.labels .label,
|
||||
.ui.ui.ui.pink.label,
|
||||
.ui.pink.button,
|
||||
.ui.pink.buttons .button {
|
||||
.ui.pink.buttons .button,
|
||||
.ui.pink.button:focus,
|
||||
.ui.pink.buttons .button:focus {
|
||||
background: var(--color-pink);
|
||||
}
|
||||
|
||||
.ui.pink.button:hover,
|
||||
.ui.pink.buttons .button:hover,
|
||||
.ui.pink.button:focus,
|
||||
.ui.pink.buttons .button:focus {
|
||||
.ui.pink.buttons .button:hover {
|
||||
background: var(--color-pink-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -599,15 +608,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.pink.buttons .button,
|
||||
.ui.basic.pink.button {
|
||||
.ui.basic.pink.button,
|
||||
.ui.basic.pink.buttons .button:focus,
|
||||
.ui.basic.pink.button:focus {
|
||||
color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
.ui.basic.pink.buttons .button:hover,
|
||||
.ui.basic.pink.button:hover,
|
||||
.ui.basic.pink.buttons .button:focus,
|
||||
.ui.basic.pink.button:focus {
|
||||
.ui.basic.pink.button:hover {
|
||||
color: var(--color-pink-dark-1);
|
||||
border-color: var(--color-pink-dark-1);
|
||||
}
|
||||
|
|
@ -623,14 +632,14 @@
|
|||
.ui.brown.labels .label,
|
||||
.ui.ui.ui.brown.label,
|
||||
.ui.brown.button,
|
||||
.ui.brown.buttons .button {
|
||||
.ui.brown.buttons .button,
|
||||
.ui.brown.button:focus,
|
||||
.ui.brown.buttons .button:focus {
|
||||
background: var(--color-brown);
|
||||
}
|
||||
|
||||
.ui.brown.button:hover,
|
||||
.ui.brown.buttons .button:hover,
|
||||
.ui.brown.button:focus,
|
||||
.ui.brown.buttons .button:focus {
|
||||
.ui.brown.buttons .button:hover {
|
||||
background: var(--color-brown-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -640,15 +649,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.brown.buttons .button,
|
||||
.ui.basic.brown.button {
|
||||
.ui.basic.brown.button,
|
||||
.ui.basic.brown.buttons .button:focus,
|
||||
.ui.basic.brown.button:focus {
|
||||
color: var(--color-brown);
|
||||
border-color: var(--color-brown);
|
||||
}
|
||||
|
||||
.ui.basic.brown.buttons .button:hover,
|
||||
.ui.basic.brown.button:hover,
|
||||
.ui.basic.brown.buttons .button:focus,
|
||||
.ui.basic.brown.button:focus {
|
||||
.ui.basic.brown.button:hover {
|
||||
color: var(--color-brown-dark-1);
|
||||
border-color: var(--color-brown-dark-1);
|
||||
}
|
||||
|
|
@ -659,97 +668,17 @@
|
|||
border-color: var(--color-brown-dark-2);
|
||||
}
|
||||
|
||||
/* grey */
|
||||
|
||||
.ui.grey.labels .label,
|
||||
.ui.ui.ui.grey.label,
|
||||
.ui.grey.button,
|
||||
.ui.grey.buttons .button {
|
||||
background: var(--color-grey);
|
||||
}
|
||||
|
||||
.ui.grey.button:hover,
|
||||
.ui.grey.buttons .button:hover,
|
||||
.ui.grey.button:focus,
|
||||
.ui.grey.buttons .button:focus {
|
||||
background: var(--color-grey-dark-1);
|
||||
}
|
||||
|
||||
.ui.grey.button:active,
|
||||
.ui.grey.buttons .button:active {
|
||||
background: var(--color-grey-dark-2);
|
||||
}
|
||||
|
||||
.ui.basic.grey.buttons .button,
|
||||
.ui.basic.grey.button {
|
||||
color: var(--color-grey);
|
||||
border-color: var(--color-grey);
|
||||
}
|
||||
|
||||
.ui.basic.grey.buttons .button:hover,
|
||||
.ui.basic.grey.button:hover,
|
||||
.ui.basic.grey.buttons .button:focus,
|
||||
.ui.basic.grey.button:focus {
|
||||
color: var(--color-grey-dark-1);
|
||||
border-color: var(--color-grey-dark-1);
|
||||
}
|
||||
|
||||
.ui.basic.grey.buttons .button:active,
|
||||
.ui.basic.grey.button:active {
|
||||
color: var(--color-grey-dark-2);
|
||||
border-color: var(--color-grey-dark-2);
|
||||
}
|
||||
|
||||
/* black */
|
||||
|
||||
.ui.black.labels .label,
|
||||
.ui.ui.ui.black.label,
|
||||
.ui.black.button,
|
||||
.ui.black.buttons .button {
|
||||
background: var(--color-black);
|
||||
}
|
||||
|
||||
.ui.black.button:hover,
|
||||
.ui.black.buttons .button:hover,
|
||||
.ui.black.button:focus,
|
||||
.ui.black.buttons .button:focus {
|
||||
background: var(--color-black-dark-1);
|
||||
}
|
||||
|
||||
.ui.black.button:active,
|
||||
.ui.black.buttons .button:active {
|
||||
background: var(--color-black-dark-2);
|
||||
}
|
||||
|
||||
.ui.basic.black.buttons .button,
|
||||
.ui.basic.black.button {
|
||||
color: var(--color-black);
|
||||
border-color: var(--color-black);
|
||||
}
|
||||
|
||||
.ui.basic.black.buttons .button:hover,
|
||||
.ui.basic.black.button:hover,
|
||||
.ui.basic.black.buttons .button:focus,
|
||||
.ui.basic.black.button:focus {
|
||||
color: var(--color-black-dark-1);
|
||||
border-color: var(--color-black-dark-1);
|
||||
}
|
||||
|
||||
.ui.basic.black.buttons .button:active,
|
||||
.ui.basic.black.button:active {
|
||||
color: var(--color-black-dark-2);
|
||||
border-color: var(--color-black-dark-2);
|
||||
}
|
||||
/* negative */
|
||||
|
||||
.ui.negative.buttons .button,
|
||||
.ui.negative.button {
|
||||
.ui.negative.button,
|
||||
.ui.negative.buttons .button:focus,
|
||||
.ui.negative.button:focus {
|
||||
background: var(--color-red);
|
||||
}
|
||||
|
||||
.ui.negative.buttons .button:hover,
|
||||
.ui.negative.button:hover,
|
||||
.ui.negative.buttons .button:focus,
|
||||
.ui.negative.button:focus {
|
||||
.ui.negative.button:hover {
|
||||
background: var(--color-red-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -758,18 +687,16 @@
|
|||
background: var(--color-red-dark-2);
|
||||
}
|
||||
|
||||
/* negative */
|
||||
|
||||
.ui.basic.negative.buttons .button,
|
||||
.ui.basic.negative.button {
|
||||
.ui.basic.negative.button,
|
||||
.ui.basic.negative.buttons .button:focus,
|
||||
.ui.basic.negative.button:focus {
|
||||
color: var(--color-red);
|
||||
border-color: var(--color-red);
|
||||
}
|
||||
|
||||
.ui.basic.negative.buttons .button:hover,
|
||||
.ui.basic.negative.button:hover,
|
||||
.ui.basic.negative.buttons .button:focus,
|
||||
.ui.basic.negative.button:focus {
|
||||
.ui.basic.negative.button:hover {
|
||||
color: var(--color-red-dark-1);
|
||||
border-color: var(--color-red-dark-1);
|
||||
}
|
||||
|
|
@ -783,14 +710,14 @@
|
|||
/* positive */
|
||||
|
||||
.ui.positive.buttons .button,
|
||||
.ui.positive.button {
|
||||
.ui.positive.button,
|
||||
.ui.positive.buttons .button:focus,
|
||||
.ui.positive.button:focus {
|
||||
background: var(--color-green);
|
||||
}
|
||||
|
||||
.ui.positive.buttons .button:hover,
|
||||
.ui.positive.button:hover,
|
||||
.ui.positive.buttons .button:focus,
|
||||
.ui.positive.button:focus {
|
||||
.ui.positive.button:hover {
|
||||
background: var(--color-green-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -800,15 +727,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.positive.buttons .button,
|
||||
.ui.basic.positive.button {
|
||||
.ui.basic.positive.button,
|
||||
.ui.basic.positive.buttons .button:focus,
|
||||
.ui.basic.positive.button:focus {
|
||||
color: var(--color-green);
|
||||
border-color: var(--color-green);
|
||||
}
|
||||
|
||||
.ui.basic.positive.buttons .button:hover,
|
||||
.ui.basic.positive.button:hover,
|
||||
.ui.basic.positive.buttons .button:focus,
|
||||
.ui.basic.positive.button:focus {
|
||||
.ui.basic.positive.button:hover {
|
||||
color: var(--color-green-dark-1);
|
||||
border-color: var(--color-green-dark-1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1823,16 +1823,12 @@
|
|||
clear: right;
|
||||
}
|
||||
|
||||
.repository .diff-file-box.file-content img {
|
||||
.repository .diff-file-box.file-content .image-diff img {
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.repository .diff-file-box.file-content img.emoji {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.repository .diff-file-box .ui.bottom.attached.table.segment {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
|
|
@ -3085,8 +3081,7 @@ tbody.commit-list {
|
|||
}
|
||||
|
||||
.diff-file-header {
|
||||
padding-top: 5px !important;
|
||||
padding-bottom: 5px !important;
|
||||
padding: 5px 8px !important;
|
||||
}
|
||||
|
||||
.diff-file-box[data-folded="true"] .diff-file-body {
|
||||
|
|
|
|||
|
|
@ -28,9 +28,19 @@
|
|||
|
||||
.small-menu-items {
|
||||
min-height: 35.4px !important; /* match .small.button in height */
|
||||
background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
|
||||
}
|
||||
|
||||
.small-menu-items .item {
|
||||
background: var(--color-menu) !important;
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
|
||||
.small-menu-items .item:hover {
|
||||
background: var(--color-hover) !important;
|
||||
}
|
||||
|
||||
.small-menu-items .item.active {
|
||||
background: var(--color-active) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@
|
|||
}
|
||||
|
||||
.issue.list .branches .branch {
|
||||
background-color: var(--color-secondary);
|
||||
background-color: var(--color-secondary-alpha-40);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -58,8 +58,9 @@
|
|||
--color-secondary-alpha-70: #525767b3;
|
||||
--color-secondary-alpha-80: #525767cc;
|
||||
--color-secondary-alpha-90: #525767e1;
|
||||
--color-secondary-hover: var(--color-secondary-light-1);
|
||||
--color-secondary-active: var(--color-secondary-light-2);
|
||||
--color-secondary-button: var(--color-secondary-dark-4);
|
||||
--color-secondary-hover: var(--color-secondary-dark-3);
|
||||
--color-secondary-active: var(--color-secondary-dark-2);
|
||||
/* console colors - used for actions console and console files */
|
||||
--color-console-fg: #eeeff2;
|
||||
--color-console-fg-subtle: #959cab;
|
||||
|
|
@ -163,37 +164,37 @@
|
|||
--color-orange-badge-hover-bg: #f2711c4d;
|
||||
--color-git: #f05133;
|
||||
/* target-based colors */
|
||||
--color-body: #373b47;
|
||||
--color-box-header: #404652;
|
||||
--color-box-body: #2a2e3a;
|
||||
--color-box-body-highlight: #353945;
|
||||
--color-body: #2e323e;
|
||||
--color-box-header: #333743;
|
||||
--color-box-body: #252a36;
|
||||
--color-box-body-highlight: #303440;
|
||||
--color-text-dark: #dbe0ea;
|
||||
--color-text: #cbd0da;
|
||||
--color-text-light: #bbbfca;
|
||||
--color-text-light-1: #aaafb9;
|
||||
--color-text-light-2: #9a9ea9;
|
||||
--color-text-light-3: #8a8e99;
|
||||
--color-footer: #2e323e;
|
||||
--color-footer: #262b36;
|
||||
--color-timeline: #4c525e;
|
||||
--color-input-text: #dfe3ec;
|
||||
--color-input-background: #232933;
|
||||
--color-input-background: #262b36;
|
||||
--color-input-toggle-background: #454a57;
|
||||
--color-input-border: #454a57;
|
||||
--color-input-border-hover: #505667;
|
||||
--color-header-wrapper: #2a2e3a;
|
||||
--color-header-wrapper-transparent: #2a2e3a00;
|
||||
--color-input-border: var(--color-secondary);
|
||||
--color-input-border-hover: var(--color-secondary-dark-1);
|
||||
--color-header-wrapper: #212531;
|
||||
--color-header-wrapper-transparent: #21253100;
|
||||
--color-light: #00000028;
|
||||
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
|
||||
--color-light-border: #ffffff28;
|
||||
--color-hover: #ffffff19;
|
||||
--color-active: #ffffff24;
|
||||
--color-menu: #2e323e;
|
||||
--color-card: #2e323e;
|
||||
--color-menu: #262b36;
|
||||
--color-card: #262b36;
|
||||
--color-markup-table-row: #ffffff06;
|
||||
--color-markup-code-block: #ffffff16;
|
||||
--color-button: #353846;
|
||||
--color-code-bg: #2a2e3a;
|
||||
--color-code-sidebar-bg: #2e323e;
|
||||
--color-button: #262b36;
|
||||
--color-code-bg: #222733;
|
||||
--color-code-sidebar-bg: #252a36;
|
||||
--color-shadow: #00000060;
|
||||
--color-secondary-bg: #2a2e3a;
|
||||
--color-text-focus: #fff;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<button class="ui basic small compact button red" @click="cancelRun()" v-else-if="run.canCancel">
|
||||
{{ locale.cancel }}
|
||||
</button>
|
||||
<button class="ui basic small compact button secondary gt-mr-0" @click="rerun()" v-else-if="run.canRerun">
|
||||
<button class="ui basic small compact button gt-mr-0" @click="rerun()" v-else-if="run.canRerun">
|
||||
{{ locale.rerun_all }}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
</div>
|
||||
<div class="job-info-header-right">
|
||||
<div class="ui top right pointing dropdown custom jump item" @click.stop="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
|
||||
<button class="ui button button-ghost gt-p-3">
|
||||
<button class="btn gt-interact-bg gt-p-3">
|
||||
<SvgIcon name="octicon-gear" :size="18"/>
|
||||
</button>
|
||||
<div class="menu transition action-job-menu" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue