mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-09-30 17:27:22 +08:00
Brian Cui
b3a40936b9
The What's New tool (internally known as the Help module) features a list of release notes where each release note is a link to an external document. Before: https://imgur.com/a/nJNVMb9 After: https://imgur.com/a/81FLMr3 A light border and margin have been added to each entry in the list to better distinguish the individual entries. In high contrast mode, the border color changes to blue on hover to mimic button behavior. The text color has also been changed to hyperlink text color to indicate each note is an external link. Change-Id: Iaa7514a2a2b86ec3e08b50c36b5ae26972310f96 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2032381 Reviewed-by: Kalon Hinds <kahinds@microsoft.com> Reviewed-by: Jack Lynch <jalyn@microsoft.com> Commit-Queue: Brian Cui <brcui@microsoft.com>
125 lines
2.4 KiB
CSS
125 lines
2.4 KiB
CSS
/*
|
|
* Copyright 2017 The Chromium Authors. All rights reserved.
|
|
* Use of this source code is governed by a BSD-style license that can be
|
|
* found in the LICENSE file.
|
|
*/
|
|
|
|
:host {
|
|
}
|
|
|
|
.hbox {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.release-note-top-section {
|
|
height: 27px;
|
|
line-height: 27px;
|
|
padding: 0 15px;
|
|
flex: none;
|
|
background-color: var(--toolbar-bg-color);
|
|
border-bottom: var(--divider-border);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
:host-context(.-theme-with-dark-background) .release-note-top-section {
|
|
color: white;
|
|
}
|
|
|
|
.release-note-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.release-note-container ul {
|
|
display: flex;
|
|
padding: 10px 16px;
|
|
flex-direction: column;
|
|
flex: none;
|
|
margin: 4px 12px 0 2px;
|
|
max-width: 600px;
|
|
}
|
|
|
|
.release-note-container li {
|
|
display: flex;
|
|
flex-direction:column;
|
|
flex: none;
|
|
line-height: 24px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
|
|
.release-note-container li:hover {
|
|
color: #039be5;
|
|
}
|
|
|
|
.release-note-container .release-note-link {
|
|
border: 1px solid rgba(0, 0, 0, .2);
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
margin-bottom: 4px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.release-note-container .release-note-link:hover {
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, .5) inset;
|
|
}
|
|
|
|
.release-note-title,
|
|
.release-note-subtitle {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.release-note-subtitle {
|
|
font-size: 13px;
|
|
line-height: 13px;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.release-note-container li:not(:hover) .release-note-subtitle {
|
|
color: #999;
|
|
}
|
|
|
|
.release-note-action-container > button {
|
|
margin: 10px 0 20px 20px;
|
|
color: #757575;
|
|
}
|
|
|
|
.release-note-action-container {
|
|
flex: none;
|
|
}
|
|
|
|
.release-note-image {
|
|
flex-shrink: 2;
|
|
}
|
|
|
|
img {
|
|
margin: 20px;
|
|
width: 260px;
|
|
height: 200px;
|
|
flex: none;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
|
|
}
|
|
|
|
img:hover {
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.release-note-container .release-note-link {
|
|
border-color: ButtonText;
|
|
}
|
|
.release-note-container .release-note-link:hover {
|
|
forced-color-adjust: none;
|
|
border-color: Highlight;
|
|
}
|
|
.release-note-container li .release-note-title,
|
|
.release-note-container li:not(:hover) .release-note-subtitle {
|
|
forced-color-adjust: none;
|
|
color: LinkText;
|
|
}
|
|
}
|