_FocusTimer.scss (4836B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this file, 3 * You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 .focus-timer { 6 @include newtab-card-style; 7 8 grid-column: span 1; 9 width: var(--newtab-card-grid-layout-width); 10 11 // Match the new card width if sections are enabled 12 .has-sections-grid & { 13 width: var(--newtab-card-width-medium); 14 } 15 16 border-radius: var(--border-radius-large); 17 padding-block: var(--space-medium); 18 height: var(--newtab-card-height); 19 display: flex; 20 flex-direction: column; 21 align-items: center; 22 box-shadow: var(--box-shadow-card); 23 } 24 25 .focus-timer-tabs { 26 display: flex; 27 margin-block-end: var(--space-medium); 28 position: relative; 29 width: 100%; 30 padding-inline: var(--space-medium); 31 } 32 33 // Align the context menu button to the right while keeping the Focus/Break button centered 34 .focus-timer-tabs-buttons { 35 display: flex; 36 gap: var(--space-xxsmall); 37 justify-content: center; 38 flex-grow: 1; 39 40 moz-button { 41 flex-grow: 1; 42 } 43 44 moz-button:first-of-type { 45 &::part(button) { 46 border-end-end-radius: 0; 47 border-start-end-radius: 0; 48 } 49 } 50 51 moz-button:last-of-type { 52 &::part(button) { 53 border-start-start-radius: 0; 54 border-end-start-radius: 0; 55 } 56 } 57 } 58 59 .newtab-widget-timer-notification-title-wrapper { 60 display: flex; 61 justify-content: space-between; 62 // Alignment note: This matches alignment with the Lists widget "List name" select 63 align-items: center; 64 width: 100%; 65 padding-inline: var(--space-medium); 66 margin-block-end: var(--space-medium); 67 68 h3 { 69 font-size: var(--button-font-size); 70 font-weight: var(--heading-font-weight); 71 margin-block: 0; 72 } 73 } 74 75 // Make sure context menu is only visible as you hover over the Timer widget 76 .focus-timer-context-menu-wrapper { 77 opacity: 0; 78 pointer-events: none; 79 } 80 81 .focus-timer:hover, .focus-timer:focus-within { 82 .focus-timer-context-menu-wrapper { 83 opacity: 1; 84 pointer-events: auto; 85 } 86 } 87 88 .progress-circle-wrapper { 89 /* Colours for the main timer */ 90 --timer-red: var(--color-red-50); 91 --timer-orange: var(--color-orange-30); 92 93 /* Colours for the break timer */ 94 --timer-blue: var(--color-blue-20); 95 --timer-violet: var(--color-violet-20); 96 97 /* Complete timer */ 98 --timer-green: var(--color-green-20); 99 100 &.is-small { 101 min-height: 114px; 102 width: 114px; 103 104 .progress-circle-label { 105 font-size: var(--font-size-xxlarge); 106 } 107 } 108 109 min-height: 138px; 110 position: relative; 111 width: 138px; 112 overflow: hidden; 113 margin-block-end: var(--space-small); 114 115 .progress-circle-background, 116 .progress-circle-background-break, 117 .progress-circle, 118 .progress-circle-complete { 119 --thickness: var(--space-small); 120 121 border-radius: var(--border-radius-circle); 122 inset: 0; 123 mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black calc(100% - var(--thickness))); position: absolute; 124 } 125 126 .progress-circle, 127 .progress-circle-complete { 128 background-color: var(--border-color-interactive); 129 } 130 131 /* main timer colours */ 132 .progress-circle-background { 133 background: conic-gradient( 134 var(--timer-orange) 0deg, 135 var(--timer-red) 150deg, 136 var(--timer-red) 210deg, 137 var(--timer-orange) 360deg 138 ); 139 } 140 141 /* break timer colours */ 142 .progress-circle-background-break { 143 background: conic-gradient( 144 var(--timer-violet) 0deg, 145 var(--timer-blue) 150deg, 146 var(--timer-blue) 210deg, 147 var(--timer-violet) 360deg 148 ); 149 } 150 151 /* timer turns green when complete */ 152 .progress-circle-complete { 153 background: var(--timer-green); 154 opacity: 0; 155 transition: opacity 1.5s ease-in-out; 156 z-index: 2; 157 158 &.visible { 159 opacity: 1; 160 } 161 } 162 163 .focus-hidden { 164 opacity: 0; 165 pointer-events: none; 166 } 167 168 .focus-visible { 169 opacity: 1; 170 } 171 172 .break-hidden { 173 opacity: 0; 174 pointer-events: none; 175 } 176 177 .break-visible { 178 opacity: 1; 179 } 180 181 .progress-circle-label { 182 align-items: center; 183 color: var(--text-color); 184 display: flex; 185 // Bug 1880518 - Large font-size number (32px) 186 font-size: calc(var(--font-size-large) * 2); 187 font-weight: var(--font-weight-semibold); 188 font-variant-numeric: tabular-nums; 189 height: 100%; 190 inset-block-start: 0; 191 inset-inline-start: 0; 192 justify-content: center; 193 position: absolute; 194 width: 100%; 195 z-index: 2; 196 } 197 } 198 199 .timer-set-minutes, 200 .timer-set-seconds { 201 &:focus { 202 outline: var(--focus-outline); 203 } 204 } 205 206 .focus-timer-controls { 207 display: flex; 208 flex-direction: row; 209 align-items: center; 210 gap: var(--space-medium); 211 } 212 213 .timer-notification-status { 214 color: var(--text-color-deemphasized); 215 font-size: var(--font-size-small); 216 margin-block-start: var(--space-small); 217 }