opendev/gerrit
Code Issues Proposed changes

Standardize tooltip colors

Browse Source 
Also removes the mixin for customizing tooltip background, as the only
use of this mixin was for a color that is almost indistinguishable from
the default one.

Change-Id: Ic1be80a78d586e5ebed04893bc8b715f7d4a47a3
This commit is contained in:
Kasper Nilsson 2018-04-17 16:32:46 +02:00
parent 7c394e06e4
commit e2021b0c46
4 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
polygerrit-ui/app/elements/diff/gr-selection-action-box/gr-selection-action-box.html
View File

@ -29,9 +29,6 @@ limitations under the License.
position: absolute; position: absolute;
white-space: nowrap; white-space: nowrap;
} }
#tooltip {
--tooltip-background-color: rgba(22, 22, 22, .9);
}
</style> </style>
<gr-tooltip <gr-tooltip
id="tooltip" id="tooltip"

5
polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
View File

@ -29,7 +29,7 @@ limitations under the License.
* HOW THEY ARE USED IN THE CODE. * HOW THEY ARE USED IN THE CODE.
*/ */
:host([toast]) { :host([toast]) {
background-color: #333; background-color: var(--tooltip-background-color);
bottom: 1.25rem; bottom: 1.25rem;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
@ -45,6 +45,7 @@ limitations under the License.
transform: translateY(0); transform: translateY(0);
} }
.text { .text {
color: var(--tooltip-text-color);
display: inline-block; display: inline-block;
max-height: 10rem; max-height: 10rem;
max-width: 80vw; max-width: 80vw;
@ -52,7 +53,7 @@ limitations under the License.
word-break: break-all; word-break: break-all;
} }
.action { .action {
color: #a1c2fa; color: var(--link-color);
font-family: var(--font-family-bold); font-family: var(--font-family-bold);
margin-left: 1em; margin-left: 1em;
text-decoration: none; text-decoration: none;

8
polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
View File

@ -25,9 +25,9 @@ limitations under the License.
--gr-tooltip-arrow-size: .5em; --gr-tooltip-arrow-size: .5em;
--gr-tooltip-arrow-center-offset: 0; --gr-tooltip-arrow-center-offset: 0;
background-color: var(--tooltip-background-color, #333); background-color: var(--tooltip-background-color);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
color: #fff; color: var(--tooltip-text-color);
font-size: var(--font-size-small); font-size: var(--font-size-small);
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
@ -53,11 +53,11 @@ limitations under the License.
width: 0; width: 0;
} }
.arrowPositionAbove { .arrowPositionAbove {
border-top: var(--gr-tooltip-arrow-size) solid var(--tooltip-background-color, #333); border-top: var(--gr-tooltip-arrow-size) solid var(--tooltip-background-color);
bottom: -var(--gr-tooltip-arrow-size); bottom: -var(--gr-tooltip-arrow-size);
} }
.arrowPositionBelow { .arrowPositionBelow {
border-bottom: var(--gr-tooltip-arrow-size) solid var(--tooltip-background-color, #333); border-bottom: var(--gr-tooltip-arrow-size) solid var(--tooltip-background-color);
top: -var(--gr-tooltip-arrow-size); top: -var(--gr-tooltip-arrow-size);
} }
</style> </style>

3
polygerrit-ui/app/styles/app-theme.html
View File

@ -87,6 +87,9 @@ limitations under the License.
--edit-mode-background-color: #ebf5fb; --edit-mode-background-color: #ebf5fb;
--tooltip-background-color: #333;
--tooltip-text-color: #fff;
--syntax-default-color: var(--primary-text-color); --syntax-default-color: var(--primary-text-color);
--syntax-meta-color: #FF1717; --syntax-meta-color: #FF1717;
--syntax-keyword-color: #9E0069; --syntax-keyword-color: #9E0069;