1// Copyright (C) 2024 The Android Open Source Project 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); 4// you may not use this file except in compliance with the License. 5// You may obtain a copy of the License at 6// 7// http://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, 11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12// See the License for the specific language governing permissions and 13// limitations under the License. 14 15@use "sass:math"; 16@import "theme"; 17 18.pf-track { 19 --text-color-dark: hsl(213, 22%, 30%); 20 --text-color-light: white; 21 --indent-size: 8px; 22 --drag-highlight-color: rgb(29, 85, 189); 23 --default-background: white; 24 --collapsed-background: hsla(190, 49%, 97%, 1); 25 --expanded-background: hsl(215, 22%, 19%); 26 27 // Layout 28 display: grid; 29 grid-template-columns: 30 calc(var(--indent) * var(--indent-size)) calc( 31 250px - (var(--indent) * var(--indent-size)) 32 ) 33 1fr; 34 grid-template-areas: "indent shell content"; 35 36 // Appearance 37 font-family: "Roboto Condensed", sans-serif; 38 font-weight: 300; 39 font-size: 14px; 40 color: var(--text-color-dark); 41 background-color: var(--default-background); 42 43 &::before { 44 content: ""; 45 grid-area: indent; 46 background: lightgray; 47 display: block; 48 height: 100%; 49 } 50 51 .pf-track-shell { 52 grid-area: shell; 53 background-color: inherit; 54 box-shadow: inset 0px -1px 0px 0px var(--track-border-color); 55 56 &.pf-drag-after { 57 box-shadow: inset 0 -6px 3px -3px var(--drag-highlight-color); 58 } 59 60 &.pf-drag-before { 61 box-shadow: inset 0 6px 3px -3px var(--drag-highlight-color); 62 } 63 64 &.pf-clickable { 65 cursor: pointer; 66 } 67 68 .pf-visible-on-hover { 69 visibility: hidden; 70 71 &.pf-active { 72 visibility: unset; 73 } 74 } 75 76 &:hover { 77 .pf-visible-on-hover { 78 visibility: unset; 79 } 80 } 81 82 .pf-track-menubar { 83 display: grid; 84 grid-template-columns: 1fr auto; // title, buttons 85 padding: 1px 2px; 86 gap: 2px; 87 88 h1.pf-track-title { 89 // Override h1 formatting 90 font-size: inherit; 91 margin: inherit; 92 93 display: flex; 94 flex-direction: row; 95 gap: 2px; 96 overflow: hidden; 97 margin-left: 2px; 98 99 // The chevron icon used is very thin - take some empty space out of 100 // left & right 101 .pf-icon { 102 margin-inline: -0.2em; 103 } 104 105 .pf-track-title-popup { 106 border-radius: 2px; 107 color: rgba(0, 0, 0, 0); 108 background: rgba(255, 255, 255, 0); 109 position: absolute; 110 text-overflow: unset; 111 pointer-events: none; 112 white-space: nowrap; 113 user-select: none; 114 } 115 116 &:hover .pf-track-title-popup.pf-visible { 117 box-shadow: 1px 1px 2px 2px var(--track-border-color); 118 background: white; 119 color: hsl(213, 22%, 30%); 120 } 121 } 122 123 .pf-track-buttons { 124 // Make the track buttons a little larger so they're easier to see & 125 // click 126 font-size: 16px; 127 } 128 } 129 } 130 131 &.pf-is-summary { 132 background-color: var(--collapsed-background); 133 134 &.pf-expanded { 135 background-color: var(--expanded-background); 136 color: var(--text-color-light); 137 } 138 } 139 140 &.pf-highlight { 141 .pf-track-shell { 142 background-color: #ffe263; 143 color: var(--text-color-dark); 144 } 145 } 146 147 .pf-track-content { 148 grid-area: content; 149 box-shadow: inset 1px -1px 0px 0px var(--track-border-color); 150 151 &.pf-track-content-error { 152 // Necessary trig because we have 45deg stripes 153 $pattern-density: 1px * math.sqrt(2); 154 $pattern-col: #ddd; 155 156 background: repeating-linear-gradient( 157 -45deg, 158 $pattern-col, 159 $pattern-col $pattern-density, 160 white $pattern-density, 161 white $pattern-density * 4 162 ); 163 } 164 } 165} 166