jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 09:16:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

More Info History: Scrollbar Style (#6790)

Browse Source
This commit is contained in:
Zack Arnett 2020-09-04 13:56:48 -05:00 committed by GitHub
parent aa5e20df05
commit 349a5f52b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 363 additions and 349 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

527
src/components/ha-sidebar.ts
View File

@ -43,6 +43,7 @@ import {
getExternalConfig,
} from "../external_app/external_config";
import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant, PanelInfo } from "../types";
import "./ha-icon";
import "./ha-menu-button";
@ -249,6 +250,7 @@ class HaSidebar extends LitElement {
</div>
<paper-listbox
attr-for-selected="data-panel"
class="ha-scrollbar"
.selected=${hass.panelUrl}
@focusin=${this._listboxFocusIn}
@focusout=${this._listboxFocusOut}
@ -677,294 +679,283 @@ class HaSidebar extends LitElement {
`;
}
static get styles(): CSSResult {
return css`
:host {
height: 100%;
display: block;
overflow: hidden;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
border-right: 1px solid var(--divider-color);
background-color: var(--sidebar-background-color);
width: 64px;
}
:host([expanded]) {
width: calc(256px + env(safe-area-inset-left));
}
:host([rtl]) {
border-right: 0;
border-left: 1px solid var(--divider-color);
}
.menu {
box-sizing: border-box;
height: 65px;
display: flex;
padding: 0 8.5px;
border-bottom: 1px solid transparent;
white-space: nowrap;
font-weight: 400;
color: var(--primary-text-color);
border-bottom: 1px solid var(--divider-color);
background-color: var(--primary-background-color);
font-size: 20px;
align-items: center;
padding-left: calc(8.5px + env(safe-area-inset-left));
}
:host([rtl]) .menu {
padding-left: 8.5px;
padding-right: calc(8.5px + env(safe-area-inset-right));
}
:host([expanded]) .menu {
width: calc(256px + env(safe-area-inset-left));
}
:host([rtl][expanded]) .menu {
width: calc(256px + env(safe-area-inset-right));
}
.menu mwc-icon-button {
color: var(--sidebar-icon-color);
}
:host([expanded]) .menu mwc-icon-button {
margin-right: 23px;
}
:host([expanded][rtl]) .menu mwc-icon-button {
margin-right: 0px;
margin-left: 23px;
}
static get styles(): CSSResult[] {
return [
haStyleScrollbar,
css`
:host {
height: 100%;
display: block;
overflow: hidden;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
border-right: 1px solid var(--divider-color);
background-color: var(--sidebar-background-color);
width: 64px;
}
:host([expanded]) {
width: calc(256px + env(safe-area-inset-left));
}
:host([rtl]) {
border-right: 0;
border-left: 1px solid var(--divider-color);
}
.menu {
box-sizing: border-box;
height: 65px;
display: flex;
padding: 0 8.5px;
border-bottom: 1px solid transparent;
white-space: nowrap;
font-weight: 400;
color: var(--primary-text-color);
border-bottom: 1px solid var(--divider-color);
background-color: var(--primary-background-color);
font-size: 20px;
align-items: center;
padding-left: calc(8.5px + env(safe-area-inset-left));
}
:host([rtl]) .menu {
padding-left: 8.5px;
padding-right: calc(8.5px + env(safe-area-inset-right));
}
:host([expanded]) .menu {
width: calc(256px + env(safe-area-inset-left));
}
:host([rtl][expanded]) .menu {
width: calc(256px + env(safe-area-inset-right));
}
.menu mwc-icon-button {
color: var(--sidebar-icon-color);
}
:host([expanded]) .menu mwc-icon-button {
margin-right: 23px;
}
:host([expanded][rtl]) .menu mwc-icon-button {
margin-right: 0px;
margin-left: 23px;
}
.title {
width: 100%;
display: none;
}
:host([expanded]) .title {
display: initial;
}
.title mwc-button {
width: 100%;
}
.title {
width: 100%;
display: none;
}
:host([expanded]) .title {
display: initial;
}
.title mwc-button {
width: 100%;
}
paper-listbox::-webkit-scrollbar {
width: 0.4rem;
height: 0.4rem;
}
paper-listbox {
padding: 4px 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
height: calc(100% - 196px - env(safe-area-inset-bottom));
overflow-x: hidden;
background: none;
margin-left: env(safe-area-inset-left);
}
paper-listbox::-webkit-scrollbar-thumb {
-webkit-border-radius: 4px;
border-radius: 4px;
background: var(--scrollbar-thumb-color);
}
:host([rtl]) paper-listbox {
margin-left: initial;
margin-right: env(safe-area-inset-right);
}
paper-listbox {
padding: 4px 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
height: calc(100% - 196px - env(safe-area-inset-bottom));
overflow-y: auto;
overflow-x: hidden;
scrollbar-color: var(--scrollbar-thumb-color) transparent;
scrollbar-width: thin;
background: none;
margin-left: env(safe-area-inset-left);
}
a {
text-decoration: none;
color: var(--sidebar-text-color);
font-weight: 500;
font-size: 14px;
position: relative;
display: block;
outline: 0;
}
:host([rtl]) paper-listbox {
margin-left: initial;
margin-right: env(safe-area-inset-right);
}
paper-icon-item {
box-sizing: border-box;
margin: 4px 8px;
padding-left: 12px;
border-radius: 4px;
--paper-item-min-height: 40px;
width: 48px;
}
:host([expanded]) paper-icon-item {
width: 240px;
}
:host([rtl]) paper-icon-item {
padding-left: auto;
padding-right: 12px;
}
a {
text-decoration: none;
color: var(--sidebar-text-color);
font-weight: 500;
font-size: 14px;
position: relative;
display: block;
outline: 0;
}
ha-icon[slot="item-icon"],
ha-svg-icon[slot="item-icon"] {
color: var(--sidebar-icon-color);
}
paper-icon-item {
box-sizing: border-box;
margin: 4px 8px;
padding-left: 12px;
border-radius: 4px;
--paper-item-min-height: 40px;
width: 48px;
}
:host([expanded]) paper-icon-item {
width: 240px;
}
:host([rtl]) paper-icon-item {
padding-left: auto;
padding-right: 12px;
}
.iron-selected paper-icon-item::before,
a:not(.iron-selected):focus::before {
border-radius: 4px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
content: "";
transition: opacity 15ms linear;
will-change: opacity;
}
.iron-selected paper-icon-item::before {
background-color: var(--sidebar-selected-icon-color);
opacity: 0.12;
}
a:not(.iron-selected):focus::before {
background-color: currentColor;
opacity: var(--dark-divider-opacity);
margin: 4px 8px;
}
.iron-selected paper-icon-item:focus::before,
.iron-selected:focus paper-icon-item::before {
opacity: 0.2;
}
ha-icon[slot="item-icon"],
ha-svg-icon[slot="item-icon"] {
color: var(--sidebar-icon-color);
}
.iron-selected paper-icon-item[pressed]:before {
opacity: 0.37;
}
.iron-selected paper-icon-item::before,
a:not(.iron-selected):focus::before {
border-radius: 4px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
content: "";
transition: opacity 15ms linear;
will-change: opacity;
}
.iron-selected paper-icon-item::before {
background-color: var(--sidebar-selected-icon-color);
opacity: 0.12;
}
a:not(.iron-selected):focus::before {
background-color: currentColor;
opacity: var(--dark-divider-opacity);
margin: 4px 8px;
}
.iron-selected paper-icon-item:focus::before,
.iron-selected:focus paper-icon-item::before {
opacity: 0.2;
}
paper-icon-item span {
color: var(--sidebar-text-color);
font-weight: 500;
font-size: 14px;
}
.iron-selected paper-icon-item[pressed]:before {
opacity: 0.37;
}
a.iron-selected paper-icon-item ha-icon,
a.iron-selected paper-icon-item ha-svg-icon {
color: var(--sidebar-selected-icon-color);
}
paper-icon-item span {
color: var(--sidebar-text-color);
font-weight: 500;
font-size: 14px;
}
a.iron-selected .item-text {
color: var(--sidebar-selected-text-color);
}
a.iron-selected paper-icon-item ha-icon,
a.iron-selected paper-icon-item ha-svg-icon {
color: var(--sidebar-selected-icon-color);
}
paper-icon-item .item-text {
display: none;
max-width: calc(100% - 56px);
}
:host([expanded]) paper-icon-item .item-text {
display: block;
}
a.iron-selected .item-text {
color: var(--sidebar-selected-text-color);
}
.divider {
bottom: 112px;
padding: 10px 0;
}
.divider::before {
content: " ";
display: block;
height: 1px;
background-color: var(--divider-color);
}
.notifications-container {
display: flex;
margin-left: env(safe-area-inset-left);
}
:host([rtl]) .notifications-container {
margin-left: initial;
margin-right: env(safe-area-inset-right);
}
.notifications {
cursor: pointer;
}
.notifications .item-text {
flex: 1;
}
.profile {
margin-left: env(safe-area-inset-left);
}
:host([rtl]) .profile {
margin-left: initial;
margin-right: env(safe-area-inset-right);
}
.profile paper-icon-item {
padding-left: 4px;
}
:host([rtl]) .profile paper-icon-item {
padding-left: auto;
padding-right: 4px;
}
.profile .item-text {
margin-left: 8px;
}
:host([rtl]) .profile .item-text {
margin-right: 8px;
}
paper-icon-item .item-text {
display: none;
max-width: calc(100% - 56px);
}
:host([expanded]) paper-icon-item .item-text {
display: block;
}
.notification-badge {
min-width: 20px;
box-sizing: border-box;
border-radius: 50%;
font-weight: 400;
background-color: var(--accent-color);
line-height: 20px;
text-align: center;
padding: 0px 6px;
color: var(--text-accent-color, var(--text-primary-color));
}
ha-svg-icon + .notification-badge {
position: absolute;
bottom: 14px;
left: 26px;
font-size: 0.65em;
}
.divider {
bottom: 112px;
padding: 10px 0;
}
.divider::before {
content: " ";
display: block;
height: 1px;
background-color: var(--divider-color);
}
.notifications-container {
display: flex;
margin-left: env(safe-area-inset-left);
}
:host([rtl]) .notifications-container {
margin-left: initial;
margin-right: env(safe-area-inset-right);
}
.notifications {
cursor: pointer;
}
.notifications .item-text {
flex: 1;
}
.profile {
margin-left: env(safe-area-inset-left);
}
:host([rtl]) .profile {
margin-left: initial;
margin-right: env(safe-area-inset-right);
}
.profile paper-icon-item {
padding-left: 4px;
}
:host([rtl]) .profile paper-icon-item {
padding-left: auto;
padding-right: 4px;
}
.profile .item-text {
margin-left: 8px;
}
:host([rtl]) .profile .item-text {
margin-right: 8px;
}
.spacer {
flex: 1;
pointer-events: none;
}
.notification-badge {
min-width: 20px;
box-sizing: border-box;
border-radius: 50%;
font-weight: 400;
background-color: var(--accent-color);
line-height: 20px;
text-align: center;
padding: 0px 6px;
color: var(--text-accent-color, var(--text-primary-color));
}
ha-svg-icon + .notification-badge {
position: absolute;
bottom: 14px;
left: 26px;
font-size: 0.65em;
}
.subheader {
color: var(--sidebar-text-color);
font-weight: 500;
font-size: 14px;
padding: 16px;
white-space: nowrap;
}
.spacer {
flex: 1;
pointer-events: none;
}
.dev-tools {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 8px;
width: 256px;
box-sizing: border-box;
}
.subheader {
color: var(--sidebar-text-color);
font-weight: 500;
font-size: 14px;
padding: 16px;
white-space: nowrap;
}
.dev-tools a {
color: var(--sidebar-icon-color);
}
.dev-tools {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 8px;
width: 256px;
box-sizing: border-box;
}
.tooltip {
display: none;
position: absolute;
opacity: 0.9;
border-radius: 2px;
white-space: nowrap;
color: var(--sidebar-background-color);
background-color: var(--sidebar-text-color);
padding: 4px;
font-weight: 500;
}
.dev-tools a {
color: var(--sidebar-icon-color);
}
.tooltip {
display: none;
position: absolute;
opacity: 0.9;
border-radius: 2px;
white-space: nowrap;
color: var(--sidebar-background-color);
background-color: var(--sidebar-text-color);
padding: 4px;
font-weight: 500;
}
:host([rtl]) .menu mwc-icon-button {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
`;
:host([rtl]) .menu mwc-icon-button {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
`,
];
}
}

166
src/panels/logbook/ha-logbook.ts
View File

@ -21,6 +21,7 @@ import { computeRTL, emitRTLDirection } from "../../common/util/compute_rtl";
import "../../components/ha-circular-progress";
import "../../components/ha-icon";
import { LogbookEntry } from "../../data/logbook";
import { haStyleScrollbar } from "../../resources/styles";
import { HomeAssistant } from "../../types";
@customElement("ha-logbook")
@ -73,7 +74,7 @@ class HaLogbook extends LitElement {
return html`
<div
class="container ${classMap({
class="container ha-scrollbar ${classMap({
narrow: this.narrow,
rtl: this._rtl,
"no-name": this.noName,
@ -184,103 +185,106 @@ class HaLogbook extends LitElement {
});
}
static get styles(): CSSResult {
return css`
:host {
display: block;
height: 100%;
}
static get styles(): CSSResult[] {
return [
haStyleScrollbar,
css`
:host {
display: block;
height: 100%;
}
.rtl {
direction: ltr;
}
.rtl {
direction: ltr;
}
.entry-container {
width: 100%;
}
.entry-container {
width: 100%;
}
.entry {
display: flex;
width: 100%;
line-height: 2em;
padding: 8px 16px;
box-sizing: border-box;
border-top: 1px solid
var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
}
.entry {
display: flex;
width: 100%;
line-height: 2em;
padding: 8px 16px;
box-sizing: border-box;
border-top: 1px solid
var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
}
.time {
display: flex;
justify-content: center;
flex-direction: column;
width: 65px;
flex-shrink: 0;
font-size: 12px;
color: var(--secondary-text-color);
}
.time {
display: flex;
justify-content: center;
flex-direction: column;
width: 65px;
flex-shrink: 0;
font-size: 12px;
color: var(--secondary-text-color);
}
.date {
margin: 8px 0;
padding: 0 16px;
}
.date {
margin: 8px 0;
padding: 0 16px;
}
.narrow .date {
padding: 0 8px;
}
.narrow .date {
padding: 0 8px;
}
.rtl .date {
direction: rtl;
}
.rtl .date {
direction: rtl;
}
.icon-message {
display: flex;
align-items: center;
}
.icon-message {
display: flex;
align-items: center;
}
.no-entries {
text-align: center;
}
.no-entries {
text-align: center;
}
ha-icon {
margin: 0 8px 0 16px;
flex-shrink: 0;
color: var(--primary-text-color);
}
ha-icon {
margin: 0 8px 0 16px;
flex-shrink: 0;
color: var(--primary-text-color);
}
.message {
color: var(--primary-text-color);
}
.message {
color: var(--primary-text-color);
}
.no-name .item-message {
text-transform: capitalize;
}
.no-name .item-message {
text-transform: capitalize;
}
a {
color: var(--primary-color);
}
a {
color: var(--primary-color);
}
.uni-virtualizer-host {
display: block;
position: relative;
contain: strict;
height: 100%;
overflow: auto;
}
.uni-virtualizer-host {
display: block;
position: relative;
contain: strict;
height: 100%;
overflow: auto;
}
.uni-virtualizer-host > * {
box-sizing: border-box;
}
.uni-virtualizer-host > * {
box-sizing: border-box;
}
.narrow .entry {
flex-direction: column;
line-height: 1.5;
padding: 8px;
}
.narrow .entry {
flex-direction: column;
line-height: 1.5;
padding: 8px;
}
.narrow .icon-message ha-icon {
margin-left: 0;
}
`;
.narrow .icon-message ha-icon {
margin-left: 0;
}
`,
];
}
}

19
src/resources/styles.ts
View File

@ -320,3 +320,22 @@ export const haStyleDialog = css`
color: var(--error-color);
}
`;
export const haStyleScrollbar = css`
.ha-scrollbar::-webkit-scrollbar {
width: 0.4rem;
height: 0.4rem;
}
.ha-scrollbar::-webkit-scrollbar-thumb {
-webkit-border-radius: 4px;
border-radius: 4px;
background: var(--scrollbar-thumb-color);
}
.ha-scrollbar {
overflow-y: auto;
scrollbar-color: var(--scrollbar-thumb-color) transparent;
scrollbar-width: thin;
}
`;