| /* Copyright 2015 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. */ |
| |
| html { |
| /* Material Design constants */ |
| --md-tile-margin: 16px; |
| --md-tile-size: 112px; |
| |
| /* This will be overridden based on the viewport width, see below. |
| * TODO(kristipark): Combine these. |
| */ |
| --column-count: 2; |
| --shortcut-column-count: 3; |
| |
| --content-width: calc( |
| (var(--column-count) * (var(--tile-width) + var(--tile-margin))) |
| /* We add an extra pixel because rounding errors on different zooms can |
| * make the width shorter than it should be. */ |
| + 1px); |
| |
| --shortcuts-width: calc(var(--shortcut-column-count) * var(--md-tile-size)); |
| |
| --logo-height: 200px; /* Normal height of a doodle. */ |
| --logo-margin-top: 56px; /* Expected OGB height, so logo doesn't overlap. */ |
| --logo-margin-bottom: 29px; /* Between logo and fakebox. */ |
| |
| /* Initial height determines the margin between the logo and the fakebox. If |
| * the iframe height exceeds the normal --logo-height, the difference is |
| * subtracted from the margin. The actual --logo-iframe-{width,height} can be |
| * changed later, but the initial height, and therefore the margin, remains |
| * the same. |
| */ |
| --logo-iframe-initial-height: var(--logo-height); |
| --logo-iframe-height: var(--logo-height); |
| --logo-iframe-resize-duration: 150ms; |
| --logo-iframe-width: 500px; |
| --tile-height: 128px; |
| --tile-margin: 16px; |
| --tile-width: 154px; |
| |
| --mv-notice-time: 10s; |
| |
| /* These can be overridden by themes. */ |
| --text-color: #000; |
| --text-color-light: #fff; |
| --text-color-link: rgb(17, 85, 204); |
| |
| height: 100%; |
| } |
| |
| html[darkmode=true] body:not(.light-chip) { |
| /* These can be overridden by themes. */ |
| --text-color: rgb(var(--GG200-rgb)); |
| --text-color-light: rgb(var(--GG200-rgb)); |
| --text-color-link: rgb(var(--GB400-dark-rgb)); |
| } |
| |
| /* width >= (3 cols * (16px + 154px) - 16px + 200px) */ |
| @media (min-width: 694px) { |
| html { |
| --column-count: 3; |
| --shortcut-column-count: 4; |
| } |
| } |
| |
| /* width >= (4 cols * (16px + 154px) - 16px + 200px) */ |
| @media (min-width: 864px) { |
| html { |
| --column-count: 4; |
| --shortcut-column-count: 5; |
| } |
| } |
| |
| body { |
| background-attachment: fixed !important; |
| cursor: default; |
| display: none; |
| font-size: small; |
| margin: 0; |
| min-height: 100%; |
| } |
| |
| body.inited { |
| display: block; |
| } |
| |
| /* Button defaults vary by platform. Reset CSS so that the NTP can use buttons |
| * as a kind of clickable div. */ |
| button { |
| background: transparent; |
| border: 0; |
| margin: 0; |
| padding: 0; |
| } |
| |
| #ntp-contents { |
| display: flex; |
| flex-direction: column; |
| height: 100%; |
| position: relative; |
| z-index: 1; |
| } |
| |
| #logo, |
| #fakebox-container { |
| flex-shrink: 0; |
| } |
| |
| .non-google-page #ntp-contents { |
| /* The inherited height from #ntp-contents applies from the "top" location, |
| * but uses the size of the overall NTP content area, resulting in an |
| * unnecessary scrollbar. This height corresponds to MV tile height for a |
| * single row, but also works for a row of icons, and works well on small |
| * screens (like Pixelbook), as well as high-res screens. */ |
| height: 155px; |
| left: calc(50% - var(--shortcuts-width)/2); |
| position: absolute; |
| top: calc(50% - 155px); |
| } |
| |
| body.hide-fakebox #fakebox { |
| opacity: 0; |
| visibility: hidden; |
| } |
| |
| #fakebox-container { |
| margin: 0 auto 0 auto; |
| width: var(--content-width); |
| } |
| |
| body.remove-fakebox #fakebox-container { |
| display: none; |
| } |
| |
| .alternate-fakebox #fakebox-container { |
| /* Increase min-width to account for larger font + increased padding: 341px |
| * min-width + 50px */ |
| min-width: 390px; |
| } |
| |
| .show-fakebox-icon.alternate-fakebox #fakebox-container { |
| /* Increase min-width again to account for the search icon: 390px new |
| * min-width + additional 20px */ |
| min-width: 410px; |
| } |
| |
| #fakebox { |
| background-color: rgb(var(--GG100-rgb)); |
| border-radius: 22px; |
| cursor: text; |
| font-size: 18px; |
| height: 44px; |
| line-height: 36px; |
| margin: 0 auto; |
| max-width: 560px; |
| opacity: 1; |
| position: relative; |
| /* Transition should be similar to .mv-tile/.md-tile opacity transition. */ |
| transition: background-color 300ms ease-in-out, opacity 200ms |
| } |
| |
| .alternate-fakebox-rect #fakebox { |
| border-radius: 8px; |
| } |
| |
| html[darkmode=true] body:not(.alternate-fakebox):not(.light-chip) #fakebox { |
| background-color: rgb(var(--GG900-rgb)); |
| } |
| |
| .alternate-fakebox #fakebox { |
| background: white; |
| box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28); |
| box-sizing: border-box; |
| font-size: 16px; |
| line-height: 21px; |
| max-width: 584px; |
| transition: none; |
| } |
| |
| html[darkmode=true] .alternate-fakebox #fakebox { |
| box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .78); |
| } |
| |
| #fakebox:hover { |
| background-color: rgb(var(--GG200-rgb)); |
| } |
| |
| html[darkmode=true] body:not(.alternate-fakebox):not(.light-chip) #fakebox:hover { |
| background-color: rgb(42, 43, 46); |
| } |
| |
| .alternate-fakebox #fakebox:hover, |
| .alternate-fakebox.fakebox-focused #fakebox { |
| background: white; |
| } |
| |
| .non-google-page #fakebox-container { |
| display: none; |
| } |
| |
| #fakebox > input { |
| bottom: 0; |
| box-sizing: border-box; |
| left: 0; |
| margin: 0; |
| opacity: 0; |
| padding-inline-start: 20px; |
| position: absolute; |
| top: 0; |
| width: 100%; |
| } |
| |
| html[dir=rtl] #fakebox > input { |
| right: 0; |
| } |
| |
| #fakebox-search-icon { |
| -webkit-mask-image: |
| url(../../../../ui/webui/resources/images/icon_search.svg); |
| -webkit-mask-repeat: no-repeat; |
| -webkit-mask-size: 100%; |
| background: 24px 24px rgb(117, 117, 117); |
| bottom: 0; |
| display: none; |
| height: 24px; |
| left: 0; |
| margin: auto 0; |
| margin-inline-start: 16px; |
| position: absolute; |
| top: 0; |
| width: 24px; |
| } |
| |
| #fakebox-search-icon.color { |
| background-color: rgb(var(--GB600-rgb)); |
| } |
| |
| .show-fakebox-icon #fakebox-search-icon { |
| display: block; |
| } |
| |
| html[dir=rtl] #fakebox-search-icon { |
| right: 0; |
| } |
| |
| #fakebox-text { |
| bottom: 4px; |
| color: rgb(var(--GG700-rgb)); |
| font-size: 14px; |
| left: 0; |
| margin-top: 1px; |
| overflow: hidden; |
| padding-inline-start: 20px; |
| position: absolute; |
| right: 44px; |
| text-align: initial; |
| text-overflow: ellipsis; |
| top: 4px; |
| vertical-align: middle; |
| visibility: inherit; |
| white-space: nowrap; |
| } |
| |
| html[darkmode=true] body:not(.alternate-fakebox):not(.light-chip) #fakebox-text { |
| color: rgb(var(--GG200-rgb)); |
| } |
| |
| html[dir=rtl] #fakebox-text { |
| left: auto; |
| right: 0; |
| } |
| |
| .alternate-fakebox #fakebox-text { |
| bottom: 0; |
| color: rgb(117, 117, 117); |
| font-size: 16px; |
| height: 21px; |
| margin: auto 0; |
| right: 44px; |
| top: 0; |
| } |
| |
| .show-fakebox-icon.alternate-fakebox #fakebox-text { |
| padding-inline-start: 48px; |
| } |
| |
| html[dir=rtl] #fakebox-text { |
| left: 44px; |
| right: 0; |
| } |
| |
| #fakebox-cursor { |
| background: #333; |
| /* Total 20px height: 44px fakebox height - 12px top - 12px bottom */ |
| bottom: 12px; |
| left: 20px; |
| position: absolute; |
| top: 12px; |
| visibility: hidden; |
| width: 1px; |
| } |
| |
| html[dir=rtl] #fakebox-cursor { |
| left: auto; |
| right: 20px; |
| } |
| |
| html[darkmode=true] body:not(.alternate-fakebox):not(.light-chip) #fakebox-cursor { |
| background: rgb(var(--GB300-rgb)); |
| } |
| |
| .alternate-fakebox #fakebox-cursor { |
| /* Total 16px height: (46px fakebox height - 2px border) - 14px top - 14px |
| * bottom */ |
| bottom: 14px; |
| top: 14px; |
| } |
| |
| .show-fakebox-icon.alternate-fakebox #fakebox-cursor { |
| left: 48px; |
| } |
| |
| html[dir=rtl] .show-fakebox-icon.alternate-fakebox #fakebox-cursor { |
| left: auto; |
| right: 48px; |
| } |
| |
| #fakebox-microphone { |
| background: url(icons/googlemic_clr_24px.svg) no-repeat center; |
| background-size: 24px 24px; |
| bottom: 0; |
| cursor: pointer; |
| margin-inline-end: 12px; |
| padding: 22px 12px 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| width: 28px; |
| } |
| |
| .alternate-fakebox #fakebox-microphone { |
| background-size: 21px 21px; |
| margin-inline-end: 16px; |
| width: 21px; |
| } |
| |
| html[dir=rtl] #fakebox-microphone { |
| left: 0; |
| right: auto; |
| } |
| |
| @keyframes blink { |
| 0% { |
| opacity: 1; |
| } |
| 61.55% { |
| opacity: 0; |
| } |
| } |
| |
| body.fakebox-drag-focused #fakebox-text:not(.show-placeholder), |
| body.fakebox-focused #fakebox-text:not(.show-placeholder) { |
| visibility: hidden; |
| } |
| |
| body.fakebox-drag-focused #fakebox-cursor { |
| visibility: inherit; |
| } |
| |
| body.fakebox-focused #fakebox-cursor { |
| animation: blink 1.3s step-end infinite; |
| visibility: inherit; |
| } |
| |
| .alternate-fakebox #user-content-wrapper { |
| /* Reduce margin by new height of fakebox (46px) - old height (44px) = 2px */ |
| margin-top: -2px; |
| } |
| |
| body.remove-fakebox #user-content { |
| /* Total of 48px margin between the logo and MV tiles/suggestions: 29px logo |
| * margin-bottom + 32px margin (from #most-visited or #suggestions) - 13px */ |
| margin-top: -13px; |
| } |
| |
| #most-visited { |
| /* Total of 40px margin between fakebox and MV tiles: 8px fakebox |
| * margin-bottom + 22px here margin-top + 10px MV margin-top */ |
| margin-top: 22px; |
| text-align: -webkit-center; |
| user-select: none; |
| } |
| |
| /* Non-Google pages have no Fakebox, so don't need top margin. */ |
| .non-google-page #most-visited { |
| margin-top: 0; |
| } |
| |
| #mv-tiles { |
| /* Two rows of tiles of 112px each, 16px of spacing after each row, and 10px |
| * of padding on top. If you change this, also change the corresponding values |
| * in most_visited_single.css. */ |
| height: calc(2*(var(--md-tile-size) + var(--md-tile-margin)) + 10px); |
| margin: 0; |
| position: relative; |
| text-align: -webkit-auto; |
| /* Add 2*6px to account for drop shadow on the tiles. If you change this, also |
| * change the corresponding padding in most_visited_single.css. */ |
| width: calc(var(--shortcuts-width) + 12px); |
| } |
| |
| #mv-notice-container { |
| bottom: -50px; |
| left: 0; |
| margin-bottom: 16px; |
| position: fixed; |
| transition: bottom 400ms; |
| width: 100%; |
| } |
| |
| /* Required to allow click events through the wrapping div of the toast |
| * notification container. */ |
| #mv-notice-container, |
| #error-notice-container { |
| pointer-events: none; |
| } |
| #mv-notice-container > div, |
| #error-notice-container > div { |
| pointer-events: all; |
| } |
| |
| #mv-notice-container.float-up { |
| bottom: 0; |
| } |
| |
| #mv-notice-container.notice-hide { |
| display: none; |
| } |
| |
| /* The notification shown when a tile is blacklisted. */ |
| #mv-notice { |
| background-color: white; |
| border: 1px solid rgb(var(--GG300-rgb)); |
| /* Necessary for a "pill" shape. Using 50% creates an oval. */ |
| border-radius: 16px; |
| font-size: 12px; |
| height: fit-content; |
| margin: 0 auto; |
| opacity: 1; |
| width: fit-content; |
| } |
| |
| html[darkmode=true] body:not(.light-chip) #mv-notice { |
| background-color: rgb(var(--GG900-rgb)); |
| border-color: rgba(0, 0, 0, 0.1); |
| } |
| |
| #mv-notice span { |
| color: rgb(var(--GG700-rgb)); |
| cursor: default; |
| display: inline-block; |
| height: auto; |
| line-height: 32px; |
| vertical-align: unset; |
| } |
| |
| html[darkmode=true] body:not(.light-chip) #mv-notice span { |
| color: rgb(var(--GG200-rgb)); |
| } |
| |
| /* Links in the notification. */ |
| #mv-notice-links span { |
| /* Necessary for a "pill" shape. Using 50% creates an oval. */ |
| border-radius: 16px; |
| color: rgb(var(--GB600-rgb)); |
| cursor: pointer; |
| margin-inline-start: 0; |
| outline: none; |
| padding: 0 16px; |
| position: relative; |
| } |
| |
| html[darkmode=true] body:not(.light-chip) #mv-notice-links span { |
| color: rgb(var(--GB400-dark-rgb)); |
| } |
| |
| #mv-notice-links span:focus { |
| text-decoration: underline; |
| } |
| |
| #mv-notice-links span:hover, |
| #mv-notice-links span:active { |
| background-color: rgba(var(--GB600-rgb), 0.1); |
| text-decoration: none; |
| transition: background-color 200ms; |
| } |
| |
| html[darkmode=true] body:not(.light-chip) #mv-notice-links span:hover, |
| html[darkmode=true] body:not(.light-chip) #mv-notice-links span:active { |
| background-color: rgba(var(--GB400-dark-rgb), 0.1); |
| } |
| |
| #mv-msg { |
| color: var(--text-color); |
| padding: 0 16px; |
| } |
| |
| html[darkmode=true] body:not(.light-chip) .default-theme.dark #mv-msg :not(), |
| html[darkmode=true] body:not(.light-chip) .default-theme.dark #mv-notice-links :not() span { |
| color: rgb(var(--GG200-rgb)); |
| } |
| |
| #mv-notice.mv-notice-delayed-hide:not(:focus-within) { |
| opacity: 0; |
| transition-delay: var(--mv-notice-time); |
| transition-property: opacity; |
| } |
| |
| #mv-notice.notice-hide { |
| display: none; |
| } |
| |
| #attribution { |
| bottom: 0; |
| color: var(--text-color-light); |
| cursor: default; |
| display: inline-block; |
| font-size: 13px; |
| left: auto; |
| position: fixed; |
| right: 8px; |
| text-align: start; |
| user-select: none; |
| z-index: -1; |
| } |
| |
| html[dir=rtl] #attribution, |
| #attribution.left-align-attribution { |
| left: 8px; |
| right: auto; |
| text-align: end; |
| } |
| |
| #mv-single { |
| border: none; |
| display: block; |
| height: 100%; |
| width: 100%; |
| } |
| |
| .customize-dialog::backdrop { |
| background-color: rgba(255, 255, 255, .75); |
| } |
| |
| html[darkmode=true] .customize-dialog::backdrop { |
| background-color: rgba(0, 0, 0, 0.4); |
| } |
| |
| #custom-links-edit-dialog { |
| background: transparent; |
| border: none; |
| height: 100%; |
| padding: 0; |
| position: fixed; |
| top: 0; |
| width: 100%; |
| } |
| |
| #custom-links-edit { |
| border: none; |
| height: 100%; |
| position: absolute; |
| top: 0; |
| width: 100%; |
| } |
| |
| #custom-links-edit.show { |
| display: block; |
| } |
| |
| #one-google { |
| display: none; |
| position: absolute; |
| top: 0; |
| transition: opacity 130ms; |
| /* One Google Bar can automatically align to left and right |
| based on the profile language preference */ |
| width: 100%; |
| } |
| |
| /* The box containing the slider */ |
| .switch { |
| background-color: #fff; |
| border-radius: 8px; |
| display: inline-block; |
| height: 12px; |
| left: 3px; |
| position: absolute; |
| top: 2px; |
| transition: background-color linear 80ms; |
| width: 28px; |
| z-index: 0; |
| } |
| |
| /* Hide default checkbox */ |
| .switch input { |
| display: none; |
| } |
| |
| /* Rounded background element for the toggle */ |
| .toggle { |
| background-color: #ccc; |
| border-radius: 34px; |
| bottom: 0; |
| cursor: pointer; |
| display: block; |
| left: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| transition: transform linear 80ms, background-color linear 80ms; |
| } |
| |
| .toggle::before { |
| background-color: #fff; |
| border-radius: 50%; |
| bottom: -2px; |
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); |
| content: ''; |
| display: block; |
| height: 16px; |
| left: -6px; |
| position: absolute; |
| transition: transform linear 80ms, background-color linear 80ms; |
| width: 16px; |
| } |
| |
| input:checked + .toggle { |
| background-color: rgba(var(--GB600-rgb), .5); |
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); |
| } |
| |
| input:focus + .toggle { |
| box-shadow: 0 0 1px rgb(33, 150, 243); |
| } |
| |
| input:checked + .toggle::before { |
| -webkit-transform: translateX(26px); |
| background-color: rgb(var(--GB600-rgb)); |
| transform: translateX(26px); |
| } |
| |
| #error-notice-container { |
| bottom: -50px; |
| margin-bottom: 16px; |
| position: fixed; |
| transition: bottom 400ms; |
| user-select: none; |
| width: 100%; |
| } |
| |
| #error-notice-container.float-up { |
| bottom: 0; |
| } |
| |
| #error-notice { |
| background-color: white; |
| border: 1px solid rgb(var(--GG300-rgb)); |
| /* Necessary for a "pill" shape. Using 50% creates an oval. */ |
| border-radius: 16px; |
| color: rgb(var(--GR600-rgb)); |
| display: flex; |
| font-size: 12px; |
| font-weight: normal; |
| height: fit-content; |
| margin: 0 auto; |
| opacity: 1; |
| padding: 0; |
| position: relative; |
| width: fit-content; |
| } |
| |
| html[darkmode=true] body:not(.light-chip) #error-notice { |
| background-color: rgb(var(--GG900-rgb)); |
| border-color: rgba(0, 0, 0, 0.1); |
| color: rgb(var(--GR500-dark-rgb)); |
| } |
| |
| #error-notice.notice-hide { |
| display: none; |
| } |
| |
| #error-notice span { |
| align-self: center; |
| display: inline-block; |
| line-height: 32px; |
| } |
| |
| #error-notice-icon { |
| background: url(../../../../ui/webui/resources/images/error.svg) no-repeat center; |
| background-size: 18px 18px; |
| height: 32px; |
| padding: 0 8px; |
| width: 18px; |
| } |
| |
| #error-notice-msg { |
| cursor: default; |
| padding-inline-end: 16px; |
| } |
| |
| #error-notice.has-link #error-notice-msg { |
| padding-inline-end: 0; |
| } |
| |
| html[dir=rtl] #error-notice.has-link #error-notice-msg { |
| padding: 0; |
| } |
| |
| #error-notice-link { |
| /* Necessary for a "pill" shape. Using 50% creates an oval. */ |
| border-radius: 16px; |
| color: rgb(var(--GB600-rgb)); |
| cursor: pointer; |
| display: none; |
| outline: none; |
| padding: 0 16px; |
| position: relative; |
| } |
| |
| html[darkmode=true] body:not(.light-chip) #error-notice-link { |
| color: rgb(var(--GB400-dark-rgb)); |
| } |
| |
| #error-notice:not(.has-link) #error-notice-link { |
| display: none; |
| } |
| |
| #error-notice-link:hover, |
| #error-notice-link:focus { |
| text-decoration: underline; |
| } |
| |
| #error-notice-link:hover, |
| #error-notice-link:active { |
| background-color: rgba(var(--GB600-rgb), 0.1); |
| text-decoration: none; |
| transition: background-color 200ms; |
| } |
| |
| html[darkmode=true] body:not(.light-chip) #error-notice-link:hover, |
| html[darkmode=true] body:not(.light-chip) #error-notice-link:active { |
| background-color: rgba(var(--GB400-dark-rgb), 0.1); |
| } |
| |
| #promo { |
| bottom: 16px; |
| display: none; |
| left: 0; |
| pointer-events: none; |
| position: fixed; |
| right: 0; |
| text-align: center; |
| transition: bottom 400ms; |
| } |
| |
| #promo.float-down { |
| bottom: -50px; |
| } |
| |
| #promo > div { |
| background-color: #FFF; |
| border: 1px solid rgb(var(--GG300-rgb)); |
| border-radius: 16px; |
| box-sizing: border-box; |
| color: rgb(var(--GG700-rgb)); |
| display: inline-block; |
| font-size: 12px; |
| line-height: 32px; |
| margin-bottom: 0; |
| max-width: 505px; |
| overflow: hidden; |
| padding: 0 16px; |
| pointer-events: all; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| html[darkmode=true] body:not(.light-chip) #promo > div { |
| background-color: rgb(var(--GG900-rgb)); |
| border-color: rgba(0, 0, 0, 0.1); |
| color: rgb(var(--GG200-rgb)); |
| } |
| |
| /** |
| * Hide the promo if the window is too small: |
| * max-width = promo.max-width (505px) + 2 * edit gear icon (16px + 28px + 8px) |
| * max-height = ntp-contents.max-height (628px) + promo div height (16px + 22px) |
| */ |
| @media only screen and (max-width: 609px), |
| screen and (max-height: 666px) { |
| #promo > div { |
| display: none; |
| } |
| } |
| |
| #promo > div > a { |
| color: rgb(51, 103, 214) !important; |
| text-decoration: none; |
| } |
| |
| #promo > div > a:visited { |
| color: rgb(51, 103, 214) !important; |
| } |
| |
| html[darkmode=true] body:not(.light-chip) #promo > div > a, |
| html[darkmode=true] body:not(.light-chip) #promo > div > a:visited { |
| color: rgb(var(--GB400-dark-rgb)) !important; |
| } |
| |
| #promo > div > img { |
| border-radius: 50%; |
| height: 24px; |
| margin: 0 8px 2px -12px; |
| object-fit: cover; |
| vertical-align: middle; |
| width: 24px; |
| } |
| |
| html[darkmode=true] body:not(.light-chip) #promo > div > img { |
| background-color: rgb(var(--GG200-rgb)); |
| } |
| |
| #one-google.show-element, |
| #promo.show-element { |
| display: block; |
| } |
| |
| #promo.notice-hide { |
| display: none; |
| } |
| |
| #user-content { |
| z-index: -1; |
| } |
| |
| #customization-menu { |
| border: none; |
| border-radius: 8px; |
| box-shadow: 0 1px 3px 0 rgba(var(--GG800-rgb), .3), |
| 0 4px 8px 3px rgba(var(--GG800-rgb), .15); |
| height: 528px; |
| padding: 0; |
| width: 800px; |
| } |
| |
| #menu-nav-panel { |
| display: inline-block; |
| height: 384px; |
| left: 0; |
| vertical-align: top; |
| width: 192px; |
| } |
| |
| .menu-option { |
| border-radius: 0 16px 16px 0; |
| font-size: 14px; |
| height: 32px; |
| left: 0; |
| line-height: 32px; |
| margin-bottom: 16px; |
| outline: none; |
| user-select: none; |
| width: 192px; |
| } |
| |
| html[dir=rtl] .menu-option { |
| border-radius: 16px 0 0 16px; |
| } |
| |
| .menu-option:hover, |
| .menu-option:focus { |
| background-color: rgba(var(--GB900-rgb), .1); |
| } |
| |
| .menu-option:active, |
| .menu-option.selected { |
| background-color: rgb(232, 240, 254); |
| color: rgb(var(--GB600-rgb)); |
| } |
| |
| .menu-option-icon-wrapper { |
| display: inline-block; |
| height: 20px; |
| margin-inline-start: 24px; |
| width: 20px; |
| } |
| |
| .menu-option-icon { |
| -webkit-mask-image: url(icons/icon_pencil.svg); |
| -webkit-mask-position-x: center; |
| -webkit-mask-position-y: center; |
| -webkit-mask-repeat: no-repeat; |
| -webkit-mask-size: 20px; |
| background-color: black; |
| background-size: 20px 20px; |
| height: 20px; |
| margin-top: 6px; |
| width: 20px; |
| } |
| |
| .menu-option:active .menu-option-icon-wrapper .menu-option-icon, |
| .menu-option.selected .menu-option-icon-wrapper .menu-option-icon { |
| background-color: rgb(var(--GB600-rgb)); |
| } |
| |
| #shortcuts-icon { |
| -webkit-mask-image: url(icons/link.svg); |
| } |
| |
| .menu-option-label { |
| display: inline-block; |
| height: 32px; |
| line-height: 32px; |
| margin-inline-start: 16px; |
| text-align: center; |
| user-select: none; |
| } |
| |
| #menu-header { |
| height: 80px; |
| |
| } |
| |
| #menu-title-wrapper { |
| display: inline-block; |
| height: 80px; |
| position: absolute; |
| } |
| |
| #menu-title { |
| font-size: 16px; |
| height: 20px; |
| line-height: 20px; |
| margin-top: 38px; |
| user-select: none; |
| width: fit-content; |
| } |
| |
| .on-img-menu #menu-title { |
| margin-inline-start: 16px; |
| } |
| |
| #menu-footer { |
| border-top: 1px solid rgb(var(--GG200-rgb)); |
| bottom: 0; |
| color: rgb(var(--GG800-rgb)); |
| height: 64px; |
| left: 0; |
| padding-inline-start: 0; |
| position: absolute; |
| text-align: end; |
| user-select: none; |
| width: 100%; |
| } |
| |
| #menu-done { |
| height: 32px; |
| line-height: 32px; |
| margin-inline-end: 16px; |
| } |
| |
| #menu-cancel { |
| height: 32px; |
| line-height: 32px; |
| margin-inline-end: 8px; |
| } |
| |
| #menu-contents { |
| display: inline-block; |
| height: 384px; |
| margin-inline-start: 20px; |
| position: relative; |
| width: 584px; |
| } |
| |
| .menu-panel { |
| height: 100%; |
| left: 0; |
| overflow-y: scroll; |
| position: absolute; |
| top: 0; |
| visibility: hidden; |
| width: 100%; |
| } |
| |
| .menu-panel.menu-shown { |
| visibility: visible; |
| } |
| |
| #backgrounds-menu .bg-sel-tile-bg, |
| #backgrounds-image-menu .bg-sel-tile-bg { |
| border-radius: 4px; |
| height: 176px; |
| margin-bottom: 45px; |
| margin-inline-end: 8px; |
| margin-inline-start: 0; |
| margin-top: 0; |
| width: 176px; |
| } |
| |
| #backgrounds-image-menu .bg-sel-tile-bg { |
| margin-bottom: 8px; |
| } |
| |
| .selected #backgrounds-default-icon, |
| #backgrounds-image-menu .bg-sel-tile-bg.selected .bg-sel-tile { |
| height: 144px; |
| margin: 16px 16px 0 16px; |
| width: 144px; |
| } |
| |
| #backgrounds-image-menu .bg-sel-tile-bg.selected .bg-sel-tile:focus { |
| outline: none; |
| } |
| |
| #backgrounds-menu .bg-sel-tile, |
| #backgrounds-image-menu .bg-sel-tile { |
| background-position: center; |
| border-radius: 4px; |
| } |
| |
| #backgrounds-menu .bg-sel-tile-title { |
| background-color: unset; |
| color: rgb(var(--GG700-rgb)); |
| font-size: 13px; |
| height: 30px; |
| margin-bottom: -28px; |
| padding: 8px 0 24px 0; |
| } |
| |
| #backgrounds-default.bg-sel-tile-bg { |
| background-color: white; |
| border: 1px solid rgb(var(--GG300-rgb)); |
| height: 174px; |
| margin-inline-end: 6px; |
| width: 174px; |
| } |
| |
| #backgrounds-default.selected, |
| #backgrounds-image-menu .bg-sel-tile-bg.selected { |
| background-color: rgba(var(--GB900-rgb), .08); |
| } |
| |
| #backgrounds-upload.bg-sel-tile-bg { |
| background-color: white; |
| border: 1px solid rgb(var(--GG300-rgb)); |
| height: 174px; |
| margin-inline-end: 6px; |
| vertical-align: top; |
| width: 174px; |
| } |
| |
| #menu-back-wrapper { |
| display: inline-block; |
| height: 80px; |
| } |
| |
| #menu-back { |
| background: url(../../../../ui/webui/resources/images/icon_arrow_back.svg) no-repeat center; |
| background-size: 20px 20px; |
| height: 20px; |
| margin-inline-start: 192px; |
| margin-top: 39px; |
| outline: none; |
| visibility: hidden; |
| width: 20px; |
| } |
| |
| html[dir=rtl] #menu-back { |
| transform: scaleX(-1); |
| } |
| |
| .on-img-menu #menu-back { |
| margin-inline-start: 212px; |
| visibility: visible; |
| } |
| |
| #backgrounds-upload-icon { |
| -webkit-mask-image: url(icons/upload.svg); |
| -webkit-mask-repeat: no-repeat; |
| -webkit-mask-size: 100%; |
| background: 32px 32px rgb(var(--GG700-rgb)); |
| height: 32px; |
| margin-bottom: 8px; |
| margin-inline-start: 72px; |
| margin-top: 61px; |
| width: 32px; |
| } |
| |
| #backgrounds-upload-text { |
| color: rgb(var(--GG700-rgb)); |
| text-align: center; |
| width: 100%; |
| } |
| |
| #customization-menu .bg-sel-tile .selected-circle { |
| height: 20px; |
| left: initial; |
| right: 10px; |
| top: 10px; |
| width: 20px; |
| } |
| |
| html[dir=rtl] #customization-menu .bg-sel-tile .selected-circle { |
| left: 10px; |
| right: initial; |
| } |
| |
| #customization-menu .bg-sel-tile .selected-check { |
| height: 24px; |
| left: initial; |
| right: 0; |
| top: 0; |
| width: 24px; |
| } |
| |
| html[dir=rtl] #customization-menu .bg-sel-tile .selected-check { |
| left: 0; |
| right: initial; |
| } |
| |
| #backgrounds-default-icon { |
| background-color: white; |
| background-image: url(icons/upload.svg); |
| background-repeat: no-repeat; |
| height: 174px; |
| opacity: 1; |
| width: 174px; |
| } |
| |
| #shortcuts-menu { |
| line-height: 20px; |
| overflow-y: unset; |
| width: calc(100% - 24px); |
| } |
| |
| #sh-options { |
| display: flex; |
| } |
| |
| .sh-option { |
| width: 268px; |
| } |
| |
| #sh-option-cl { |
| margin-inline-end: 9px; |
| } |
| |
| .sh-option-select { |
| position: absolute; |
| visibility: none; |
| } |
| |
| .sh-option-image { |
| background-color: white; |
| border: 1px solid rgb(var(--GG300-rgb)); |
| border-radius: 4px; |
| height: 176px; |
| position: relative; |
| width: 268px; |
| } |
| |
| .sh-option-mini { |
| background-color: white; |
| border: 1px solid rgb(var(--GG300-rgb)); |
| border-radius: 4px; |
| height: 144px; |
| position: absolute; |
| right: 40px; |
| top: 16px; |
| width: 144px; |
| } |
| |
| html[dir=rtl] .sh-option-mini { |
| left: 40px; |
| right: unset; |
| } |
| |
| .sh-option-icon { |
| -webkit-mask-repeat: no-repeat; |
| -webkit-mask-size: 100%; |
| background: 96px 96px rgb(var(--GG200-rgb)); |
| height: 96px; |
| left: 16px; |
| position: absolute; |
| top: 48px; |
| width: 96px; |
| } |
| |
| #sh-option-cl .sh-option-icon { |
| -webkit-mask-image: url(../../../../ui/webui/resources/images/account_circle.svg); |
| } |
| |
| #sh-option-mv .sh-option-icon { |
| -webkit-mask-image: url(../../../../components/neterror/resources/images/generic-globe.svg); |
| } |
| |
| html[dir=rtl] .sh-option-icon { |
| right: 16px; |
| } |
| |
| .sh-title { |
| font-weight: bold; |
| margin: 8px 0; |
| } |
| |
| #sh-hide { |
| background-color: white; |
| border: 1px solid rgb(var(--GG300-rgb)); |
| border-radius: 4px; |
| display: flex; |
| height: 64px; |
| margin-top: 24px; |
| max-width: 544px; |
| width: 100%; |
| } |
| |
| #sh-hide > div { |
| margin-bottom: auto; |
| margin-top: auto; |
| } |
| |
| #sh-hide-icon { |
| -webkit-mask-image: url(../../../../ui/webui/resources/images/icon_visibility_off.svg); |
| -webkit-mask-repeat: no-repeat; |
| -webkit-mask-size: 100%; |
| background: 24px 24px rgb(var(--GG700-rgb)); |
| height: 24px; |
| margin-inline-end: 20px; |
| margin-inline-start: 24px; |
| width: 24px; |
| } |
| |
| #sh-hide-title { |
| font-weight: bold; |
| } |
| |
| #sh-hide-toggle { |
| margin-inline-end: 20px; |
| margin-inline-start: auto; |
| } |