| /* Copyright 2019 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 { |
| height: 100%; /* Required for printing. */ |
| } |
| |
| audio { |
| display: none; |
| } |
| |
| body { |
| background: black; |
| bottom: 0; |
| height: 100%; |
| left: 0; |
| margin: 0; |
| overflow: hidden; |
| position: absolute; |
| top: 0; |
| width: 100%; |
| } |
| |
| .scrollbar-track { |
| padding: 2px; |
| position: fixed; |
| } |
| |
| .scrollbar-track-horizontal { |
| bottom: 0; |
| left: 0; |
| right: 0; |
| } |
| |
| .scrollbar-track-vertical { |
| bottom: 0; |
| right: 0; |
| top: 0; |
| } |
| |
| .scrollbar-thumb { |
| background: white; |
| border: 1px solid #555; |
| border-radius: 3px; |
| box-sizing: border-box; |
| opacity: 0.4; |
| position: absolute; |
| transition: opacity 100ms; |
| } |
| |
| .scrollbar-track .scrollbar-thumb:hover { |
| opacity: 0.6; |
| } |
| |
| .scrollbar-track .scrollbar-thumb:active { |
| opacity: 0.8; |
| } |
| |
| .scrollbar-track-horizontal, |
| .scrollbar-track-horizontal .scrollbar-thumb { |
| height: 8px; |
| } |
| |
| .scrollbar-track-vertical, |
| .scrollbar-track-vertical .scrollbar-thumb { |
| width: 8px; |
| } |
| |
| button, |
| input { |
| background-color: transparent; |
| border-radius: 4px; |
| border-style: none; |
| margin: 0; |
| outline: none; |
| padding: 0; |
| pointer-events: auto; |
| position: relative; |
| } |
| |
| input { |
| -webkit-appearance: none; |
| } |
| |
| button:focus::after, |
| input:focus::after { |
| border: 2px solid rgba(37, 129, 223, 0.7); |
| border-radius: 4px; |
| bottom: -3px; |
| content: ''; |
| left: -3px; |
| position: absolute; |
| right: -3px; |
| top: -3px; |
| } |
| |
| #browser .media-wrapper:focus { |
| /* Make elements have the same focus style. */ |
| outline: 2px solid rgba(37, 129, 223, 0.7); |
| } |
| |
| .circle button, |
| .circle button:focus::after, |
| .circle input:focus::after { |
| border-radius: 50%; |
| } |
| |
| .buttons { |
| align-items: center; |
| display: flex; |
| justify-content: center; |
| pointer-events: none; |
| } |
| |
| .buttons button:active, |
| .buttons input:active { |
| transform: scale(1.07); |
| } |
| |
| .buttons button, |
| .buttons input, |
| .menu-header .icon, |
| .menu-item .icon { |
| background-position: center; |
| background-repeat: no-repeat; |
| flex-shrink: 0; |
| height: 40px; |
| width: 40px; |
| } |
| |
| #browser-print { |
| background-image: url(../images/browser_button_print.svg); |
| } |
| |
| #browser-export { |
| background-image: url(../images/browser_button_export.svg); |
| } |
| |
| #browser-back { |
| background-image: url(../images/browser_button_back.svg); |
| } |
| |
| #browser-delete { |
| background-image: url(../images/browser_button_delete.svg); |
| } |
| |
| ::-webkit-scrollbar { |
| height: 0; |
| width: 0; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: transparent; |
| height: 0; |
| width: 0; |
| } |
| |
| .top-stripe { |
| position: absolute; |
| top: 48px; |
| transform: translateY(-50%); |
| } |
| |
| .bottom-stripe { |
| bottom: 56px; |
| position: absolute; |
| transform: translateY(50%); |
| } |
| |
| .left-stripe { |
| left: 40px; |
| position: absolute; |
| transform: translateX(-50%); |
| } |
| |
| .right-stripe { |
| position: absolute; |
| right: 56px; |
| transform: translateX(50%); |
| } |
| |
| .horizontal-center-stripe { |
| left: 50%; |
| position: absolute; |
| transform: translateX(-50%); |
| } |
| |
| .top-stripe.right-stripe { |
| transform: translate(50%, -50%); |
| } |
| |
| .top-stripe.left-stripe { |
| transform: translate(-50%, -50%); |
| } |
| |
| .top-stripe.horizontal-center-stripe { |
| transform: translate(-50%, -50%); |
| } |
| |
| .bottom-stripe.right-stripe { |
| transform: translate(50%, 50%); |
| } |
| |
| .bottom-stripe.left-stripe { |
| transform: translate(-50%, 50%); |
| } |
| |
| #shutters-group { |
| bottom: calc((var(--modes-bottom) + var(--modes-height)) + 16px); |
| } |
| |
| body.tablet-landscape .actions-group { |
| flex-direction: column-reverse; |
| } |
| |
| #modes-group { |
| -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 10% 90%, rgba(0,0,0,0) 100%); |
| bottom: var(--modes-bottom); |
| flex-direction: column; |
| height: calc(var(--modes-height) * 0.8); |
| justify-content: flex-start; |
| overflow: scroll; |
| padding: calc(var(--modes-height) * 0.1) 0; |
| pointer-events: auto; |
| } |
| |
| .mode-item { |
| margin: 4px 0; |
| position: relative; |
| } |
| |
| label.mode-item>span { |
| border-radius: 13px / 50%; |
| color: white; |
| display: inline-block; |
| font-family: 'Roboto', sans-serif; |
| font-size: 14px; |
| font-weight: 500; |
| padding: 8px 12px; |
| text-shadow: 2px 3px 3px rgba(32, 33, 36, 0.3); |
| } |
| |
| .mode-item>input { |
| height: 100%; |
| position: absolute; |
| width: 100%; |
| } |
| |
| .mode-item>input:checked + span { |
| background: white; |
| color: black; |
| text-shadow: none; |
| } |
| |
| button.shutter { |
| display: none; |
| height: 72px; |
| width: 72px; |
| z-index: 1; /* On top of transforming switch-mode buttons. */ |
| } |
| |
| body.video-mode:not(.taking) #start-recordvideo, |
| body.video-mode.taking #stop-recordvideo, |
| body:not(.taking):not(.video-mode) #start-takephoto, |
| body:not(.timer):not(.video-mode) #start-takephoto, |
| body.taking.timer:not(.video-mode) #stop-takephoto { |
| display: inline-block; |
| } |
| |
| #start-takephoto { |
| background-image: url(../images/camera_shutter_photo_start.svg); |
| } |
| |
| #start-takephoto:hover { |
| background-image: url(../images/camera_shutter_photo_start_hover.svg); |
| } |
| |
| #start-takephoto:active { |
| background-image: url(../images/camera_shutter_photo_start_active.svg); |
| } |
| |
| #stop-takephoto { |
| background-image: url(../images/camera_shutter_photo_stop.svg); |
| } |
| |
| #stop-takephoto:hover { |
| background-image: url(../images/camera_shutter_photo_stop_hover.svg); |
| } |
| |
| #start-recordvideo { |
| background-image: url(../images/camera_shutter_video_start.svg); |
| } |
| |
| #start-recordvideo:hover { |
| background-image: url(../images/camera_shutter_video_start_hover.svg); |
| } |
| |
| #stop-recordvideo { |
| background-image: url(../images/camera_shutter_video_stop.svg); |
| } |
| |
| #stop-recordvideo:hover { |
| background-image: url(../images/camera_shutter_video_stop_hover.svg); |
| } |
| |
| body:not(.video-mode) #toggle-mic, |
| body:not(.multi-camera) #switch-device { |
| visibility: hidden; |
| } |
| |
| #camera-mode { |
| background-image: url(../images/camera_mode_photo.svg); |
| height: 40px; |
| visibility: hidden; |
| width: 40px; |
| } |
| |
| body.video-mode #camera-mode { |
| background-image: url(../images/camera_mode_video.svg); |
| } |
| |
| body.square-mode #camera-mode { |
| background-image: url(../images/camera_mode_square.svg); |
| } |
| |
| body.portrait-mode #camera-mode { |
| background-image: url(../images/camera_mode_portrait.svg); |
| } |
| |
| body.mode-switching:not(.streaming) #camera-mode { |
| visibility: visible; |
| } |
| |
| #timer-tick-msg { |
| color: white; |
| font-family: 'Roboto', sans-serif; |
| font-size: 72px; |
| visibility: hidden; |
| } |
| |
| #timer-tick-msg.animate { |
| opacity: 0.2; |
| transform: scale(1.8, 1.8); |
| transition: transform 500ms ease-out, opacity 500ms ease-out; |
| visibility: visible; |
| } |
| |
| #switch-device { |
| background-image: url(../images/camera_button_switch_device.svg); |
| height: var(--big-icon); |
| width: var(--big-icon); |
| } |
| |
| #switch-device.animate { |
| animation: switch-device-rotate 350ms ease-out; |
| } |
| |
| @keyframes switch-device-rotate { |
| 0% { |
| transform: rotate(0deg); |
| } |
| 100% { |
| transform: rotate(-180deg); |
| } |
| } |
| |
| #gallery-enter { |
| background-color: rgba(24, 24, 24, 1); |
| background-size: cover; |
| height: var(--big-icon); |
| position: relative; |
| width: var(--big-icon); |
| } |
| |
| .centered-overlay { |
| left: 50%; |
| position: absolute; |
| top: 50%; |
| transform: translate(-50%, -50%); |
| } |
| |
| #options-group { |
| bottom: calc((var(--bottom-line) + (var(--big-icon) / 2)) + 30px); |
| flex-direction: column; |
| } |
| |
| body:not(.multi-camera) #options-group { |
| bottom: calc((var(--bottom-line) - 18px) - (var(--small-icon) / 2)); |
| } |
| |
| #options-group input { |
| margin: 18px 0; |
| } |
| |
| body._3sec #toggle-timer:checked { |
| background-image: url(../images/camera_button_timer_on_3s.svg); |
| } |
| |
| body._10sec #toggle-timer:checked { |
| background-image: url(../images/camera_button_timer_on_10s.svg); |
| } |
| |
| #toggle-timer { |
| background-image: url(../images/camera_button_timer_off.svg); |
| } |
| |
| #toggle-grid:checked { |
| background-image: url(../images/camera_button_grid_on.svg); |
| } |
| |
| #toggle-grid { |
| background-image: url(../images/camera_button_grid_off.svg); |
| } |
| |
| #toggle-mirror:checked { |
| background-image: url(../images/camera_button_mirror_on.svg); |
| } |
| |
| #toggle-mirror { |
| background-image: url(../images/camera_button_mirror_off.svg); |
| } |
| |
| #toggle-mic:checked { |
| background-image: url(../images/camera_button_mic_on.svg); |
| } |
| |
| #toggle-mic { |
| background-image: url(../images/camera_button_mic_off.svg); |
| } |
| |
| #open-settings { |
| background-image: url(../images/camera_button_settings.svg); |
| } |
| |
| #camera, |
| #settings, |
| #gridsettings, |
| #timersettings, |
| #browser, |
| #dialog, |
| #warning { |
| bottom: 0; |
| left: 0; |
| opacity: 0; |
| overflow: auto; |
| position: absolute; |
| right: 0; |
| top: 0; |
| visibility: hidden; |
| } |
| |
| body.camera #camera, |
| body.settings #settings, |
| body.gridsettings #gridsettings, |
| body.timersettings #timersettings, |
| body.browser #browser, |
| body.dialog #dialog, |
| body.warning #warning { |
| opacity: 1; |
| transition: opacity 100ms; |
| visibility: visible; |
| } |
| |
| body.gridsettings #gridsettings, |
| body.timersettings #timersettings, |
| body.settings #settings { |
| /* Avoid flicking for transition between settings. */ |
| transition: opacity 0ms; |
| } |
| |
| body.settings .left-stripe, |
| body.gridsettings .left-stripe, |
| body.gridsettings #settings, |
| body.timersettings .left-stripe, |
| body.timersettings #settings { |
| opacity: 0; |
| } |
| |
| #camera, |
| #preview-wrapper { |
| align-items: center; |
| display: flex; |
| justify-content: center; |
| overflow: hidden; |
| } |
| |
| #camera { |
| --big-icon: 48px; |
| --bottom-line: 56px; |
| --modes-height: 130px; |
| --modes-bottom: calc((var(--bottom-line) + (var(--big-icon) / 2)) + 24px); |
| --small-icon: 40px; |
| } |
| |
| @media screen and (min-height: 800px) { |
| #camera { |
| --modes-height: 220px; |
| } |
| } |
| |
| body.w-letterbox.w-letterbox-s #camera { |
| justify-content: flex-end; |
| } |
| |
| body.w-letterbox.w-letterbox-m #camera, |
| body.w-letterbox.w-letterbox-l #camera { |
| justify-content: flex-start; |
| } |
| |
| body.w-letterbox.w-letterbox-xl #camera { |
| justify-content: center; |
| } |
| |
| body:not(.w-letterbox) #camera { |
| flex-direction: column; |
| justify-content: center; |
| } |
| |
| body:not(.w-letterbox).preview-vertical-dock #camera { |
| justify-content: flex-end; |
| } |
| |
| #preview-wrapper, |
| #preview-video { |
| flex-shrink: 0; |
| pointer-events: none; |
| position: relative; |
| } |
| |
| body.w-letterbox.w-letterbox-l #preview-wrapper { |
| left: 72px; |
| } |
| |
| body:not(.w-letterbox).preview-vertical-dock #preview-wrapper { |
| bottom: calc((var(--bottom-line) + (var(--big-icon) / 2)) + 12px); |
| } |
| |
| body.square-preview #preview-wrapper { |
| height: 0; /* Calculate at runtime. */ |
| width: 0; /* Calculate at runtime. */ |
| } |
| |
| body.square-preview #preview-video { |
| left: 0; /* Calculate at runtime. */ |
| position: absolute; |
| top: 0; /* Calculate at runtime. */ |
| } |
| |
| body.streaming #preview-video { |
| pointer-events: auto; |
| } |
| |
| body.mirror #preview-video, |
| body.mirror #preview-focus { |
| transform: scaleX(-1); |
| } |
| |
| #preview-focus { |
| bottom: 0; |
| left: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| #preview-focus-aim { |
| position: absolute; |
| transform: translate(-50%, -50%); |
| } |
| |
| body:not(.streaming) #preview-video { |
| filter: blur(10px); |
| /* Scale up to hide blurred edges. */ |
| transform: scale(1.03, 1.03); |
| } |
| |
| body.mirror:not(.streaming) #preview-video { |
| transform: scale(-1.03, 1.03); |
| } |
| |
| #preview-grid { |
| bottom: 0; |
| left: 0; |
| opacity: 0.5; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| body:not(.streaming) #preview-grid, |
| body:not(.streaming) #preview-focus, |
| body:not(.streaming) #open-settings, |
| body:not(.streaming) #toggle-mic, |
| body:not(.streaming) #options-group { |
| visibility: hidden; |
| } |
| |
| #preview-grid-horizontal { |
| border-bottom: 1px solid white; |
| border-top: 1px solid white; |
| height: 100%; |
| left: 0; |
| position: absolute; |
| right: 0; |
| top: 50%; |
| transform: translateY(-50%); |
| } |
| |
| body._4x4 #preview-grid-horizontal::before { |
| border-bottom: 1px solid white; |
| content: ''; |
| height: 0; |
| left: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| body.grid._3x3 #preview-grid-horizontal, |
| body.gridsettings._3x3 #preview-grid-horizontal { |
| height: 33.333%; |
| } |
| |
| body.grid.golden #preview-grid-horizontal, |
| body.gridsettings.golden #preview-grid-horizontal { |
| height: 23.607%; |
| } |
| |
| body.grid._4x4 #preview-grid-horizontal, |
| body.grid._4x4 #preview-grid-horizontal::before, |
| body.gridsettings._4x4 #preview-grid-horizontal, |
| body.gridsettings._4x4 #preview-grid-horizontal::before { |
| height: 50%; |
| } |
| |
| #preview-grid-vertical { |
| border-left: 1px solid white; |
| border-right: 1px solid white; |
| bottom: 0; |
| left: 50%; |
| position: absolute; |
| top: 0; |
| transform: translateX(-50%); |
| width: 100%; |
| } |
| |
| body._4x4 #preview-grid-vertical::before { |
| border-right: 1px solid white; |
| bottom: 0; |
| content: ''; |
| left: 0; |
| position: absolute; |
| top: 0; |
| width: 0; |
| } |
| |
| body.grid._3x3 #preview-grid-vertical, |
| body.gridsettings._3x3 #preview-grid-vertical { |
| width: 33.333%; |
| } |
| |
| body.grid.golden #preview-grid-vertical, |
| body.gridsettings.golden #preview-grid-vertical { |
| width: 23.607%; |
| } |
| |
| body.grid._4x4 #preview-grid-vertical, |
| body.grid._4x4 #preview-grid-vertical::before, |
| body.gridsettings._4x4 #preview-grid-vertical, |
| body.gridsettings._4x4 #preview-grid-vertical::before { |
| width: 50%; |
| } |
| |
| #preview-grid-horizontal.animate, |
| #preview-grid-horizontal.animate::before { |
| transition: height 500ms, visibility 500ms; |
| } |
| |
| #preview-grid-vertical.animate, |
| #preview-grid-vertical.animate::before { |
| transition: width 500ms, visibility 500ms; |
| } |
| |
| body:not(.grid):not(.gridsettings) #preview-grid-horizontal, |
| body:not(.grid):not(.gridsettings) #preview-grid-horizontal::before, |
| body:not(.grid):not(.gridsettings) #preview-grid-vertical, |
| body:not(.grid):not(.gridsettings) #preview-grid-vertical::before { |
| visibility: hidden; |
| } |
| |
| #record-time { |
| align-items: center; |
| background-color: rgba(0, 0, 0, 0.2); |
| border-radius: 4px; |
| display: flex; |
| height: 32px; |
| justify-content: flex-start; |
| padding: 0 12px; |
| pointer-events: none; |
| } |
| |
| #record-time[hidden], |
| .menu-item[hidden] { |
| display: none; /* Required for flexbox hidden. */ |
| } |
| |
| #record-time .icon { |
| background-color: rgb(234, 67, 53); |
| border-radius: 50%; |
| flex-shrink: 0; |
| height: 6px; |
| width: 6px; |
| } |
| |
| #record-time #record-time-msg { |
| color: white; |
| flex-shrink: 0; |
| font-family: 'Roboto', sans-serif; |
| font-size: 13px; |
| margin-left: 8px; |
| } |
| |
| #browser .buttons { |
| left: 10px; |
| position: fixed; |
| top: 10px; |
| } |
| |
| #browser .buttons button { |
| margin: 0 8px; |
| } |
| |
| #browser .buttons button[disabled], |
| body.ext-fs #browser-export { |
| display: none; |
| } |
| |
| #browser { |
| background: black; |
| } |
| |
| #browser .padder { |
| align-items: center; |
| display: flex; |
| height: 100%; |
| } |
| |
| #browser div.media-wrapper { |
| align-items: center; |
| display: flex; |
| flex-shrink: 0; |
| justify-content: center; |
| margin: 4%; |
| pointer-events: auto; |
| } |
| |
| #browser div.bounds-padder { |
| display: flex; |
| flex-shrink: 0; |
| height: 1px; /* Required to make the element visible. */ |
| width: 50%; |
| } |
| |
| @media print { |
| html { |
| height: 100%; /* Required for printing. */ |
| } |
| |
| body { |
| height: auto; |
| overflow: visible; |
| position: static; |
| width: 100%; |
| } |
| |
| /* Reset background colors. */ |
| body, |
| #browser { |
| background: transparent; |
| } |
| |
| /* Hide the buttons and scroll bars. */ |
| .buttons, |
| .scrollbar-track { |
| display: none; |
| } |
| |
| /* Hide all root elements, except the printed view. */ |
| body.browser > :not(#browser) { |
| display: none; |
| } |
| |
| /* Hide everything from the browser view, but the selected one(s). */ |
| #browser .padder > :not(.selected) { |
| display: none; |
| } |
| |
| #browser .padder { |
| align-items: flex-start; |
| } |
| |
| /* Set default styles and max-dimensions for printing the browser view. */ |
| #browser div.media-wrapper.selected { |
| border: none; |
| box-shadow: none; |
| display: block; /* Allows to keep aspect ratio of children. */ |
| margin: auto; |
| position: absolute; |
| } |
| |
| #browser div.media-wrapper.selected img, |
| #browser div.media-wrapper.selected video { |
| height: auto; |
| max-height: 100%; |
| max-width: 100%; |
| width: auto; |
| } |
| |
| #browser video::-webkit-media-controls { |
| display: none; |
| } |
| } |
| |
| #tooltip { |
| background: rgba(241, 243, 244, 0.8); |
| border-radius: 2px; |
| color: rgb(32, 33, 36); |
| font-family: 'Roboto', sans-serif; |
| font-size: 12px; |
| left: 0; |
| line-height: 22px; |
| opacity: 0; |
| padding: 0 8px; |
| pointer-events: none; |
| position: absolute; |
| top: 0; |
| white-space: nowrap; |
| z-index: 100; |
| } |
| |
| #tooltip.visible { |
| opacity: 1; |
| transition: opacity 350ms ease-out 1500ms; |
| } |
| |
| #toast { |
| background: rgb(30, 30, 35); |
| border-radius: 16px; |
| color: white; |
| font-family: 'Roboto', sans-serif; |
| font-size: 16px; |
| line-height: 32px; |
| opacity: 0; |
| padding: 0 16px; |
| pointer-events: none; |
| z-index: 100; |
| } |
| |
| #toast.animate.spoken { |
| animation: toast-spoken 3000ms ease-out; |
| } |
| |
| #toast.animate:not(.spoken) { |
| animation: toast-shown 3000ms ease-out; |
| } |
| |
| @keyframes toast-spoken { |
| 0%, |
| 100% { |
| opacity: 0; |
| } |
| } |
| |
| @keyframes toast-shown { |
| 0% { |
| opacity: 0; |
| } |
| 10%, |
| 90% { |
| opacity: 0.9; |
| } |
| 100% { |
| opacity: 0; |
| } |
| } |
| |
| .menu { |
| background: rgba(0, 0, 0, 0.75); |
| display: flex; |
| flex-direction: column; |
| height: 100%; |
| left: 0; |
| min-width: 360px; |
| opacity: 0.9; |
| position: absolute; |
| top: 0; |
| } |
| |
| .menu-header, |
| .menu-item { |
| align-items: center; |
| color: rgb(241, 243, 244); |
| display: flex; |
| flex-shrink: 0; |
| font-family: 'Roboto', sans-serif; |
| font-size: 13px; |
| height: 64px; |
| justify-content: flex-start; |
| padding: 0 20px 0 24px; |
| text-align: left; |
| } |
| |
| .menu-header { |
| color: white; |
| font-size: 20px; |
| height: 88px; |
| } |
| |
| .menu-header .icon, |
| .menu-item .icon { |
| margin-right: 6px; |
| } |
| |
| .menu-item .end { |
| margin-left: auto; |
| } |
| |
| .menu-item .description { |
| color: rgb(189, 193, 198); |
| margin-top: 5px; |
| } |
| |
| .menu-item .description span { |
| display: none; |
| } |
| |
| body._3x3 .description span[i18n-content=label_grid_3x3], |
| body._4x4 .description span[i18n-content=label_grid_4x4], |
| body.golden .description span[i18n-content=label_grid_golden], |
| body._3sec .description span[i18n-content=label_timer_3s], |
| body._10sec .description span[i18n-content=label_timer_10s] { |
| display: inline; |
| } |
| |
| .menu-item input::before { |
| border-radius: 50%; |
| bottom: 13px; |
| box-shadow: 0 0 0 2px rgb(241, 243, 244); |
| content: ''; |
| left: 13px; |
| position: absolute; |
| right: 13px; |
| top: 13px; |
| } |
| |
| .menu-item input:checked::before { |
| background-clip: padding-box; |
| background-color: rgb(241, 243, 244); |
| border: 4px solid transparent; |
| bottom: 12px; |
| box-shadow: 0 0 0 1px rgb(241, 243, 244); |
| left: 12px; |
| right: 12px; |
| top: 12px; |
| transition: border-width 100ms ease-in; |
| } |
| |
| .menu-item:focus::after { |
| left: 2px; |
| right: 2px; |
| } |
| |
| .menu-header .icon { |
| background-image: url(../images/settings_button_back.svg); |
| } |
| |
| #settings-gridtype .icon { |
| background-image: url(../images/settings_grid_type.svg); |
| } |
| |
| #settings-timerdur .icon { |
| background-image: url(../images/settings_timer_duration.svg); |
| } |
| |
| #settings-feedback .icon { |
| background-image: url(../images/settings_feedback.svg); |
| } |
| |
| #settings-help .icon { |
| background-image: url(../images/settings_help.svg); |
| } |
| |
| #settings-gridtype .icon.end, |
| #settings-timerdur .icon.end { |
| background-image: url(../images/settings_button_expand.svg); |
| } |
| |
| #warning, |
| #dialog { |
| align-items: center; |
| display: flex; |
| justify-content: center; |
| z-index: 1; |
| } |
| |
| #warning { |
| background: black; |
| color: white; |
| } |
| |
| #warning #error-msg { |
| font-family: 'Roboto', sans-serif; |
| font-size: 18px; |
| line-height: 32px; |
| text-align: center; |
| white-space: pre-wrap; |
| } |
| |
| #dialog { |
| background: rgba(0, 0, 0, 0.8); |
| } |
| |
| #dialog-popup { |
| background: white; |
| border-radius: 4px; |
| display: flex; |
| flex-direction: column; |
| padding: 20px; |
| transform: translateY(20px); |
| transition: transform 200ms; |
| } |
| |
| body.dialog #dialog #dialog-popup { |
| transform: translateY(0); |
| } |
| |
| #dialog #dialog-msg { |
| color: rgb(32, 33, 36); |
| cursor: text; |
| font-family: 'Roboto', sans-serif; |
| font-size: 14px; |
| max-height: 320px; |
| max-width: 472px; |
| overflow: auto; |
| padding: 20px 0; |
| user-select: text; /* Allow copying the message. */ |
| white-space: pre-wrap; |
| } |
| |
| #dialog #dialog-msg::-webkit-scrollbar { |
| height: 6px; |
| width: 6px; |
| } |
| |
| #dialog #dialog-msg::-webkit-scrollbar-track { |
| background: transparent; |
| } |
| |
| #dialog #dialog-msg::-webkit-scrollbar-thumb { |
| background: gray; |
| height: 6px; |
| width: 6px; |
| } |
| |
| #dialog-buttons { |
| align-items: center; |
| display: flex; |
| justify-content: flex-end; |
| margin: 0 -2px; |
| } |
| |
| #dialog-buttons button { |
| background-color: white; |
| border-style: solid; |
| color: rgb(37, 129, 223); |
| font-family: 'Roboto', sans-serif; |
| font-size: 12px; |
| margin: 4px; |
| padding: 6px 18px; |
| } |
| |
| #dialog-buttons button:focus { |
| background-color: rgb(37, 129, 223); |
| border-color: rgb(37, 129, 223); |
| color: white; |
| } |
| |
| #dialog-buttons button:focus::after { |
| border: none; |
| } |
| |
| #spinner { |
| background-image: url(../images/spinner.svg); |
| height: 32px; |
| visibility: hidden; |
| width: 32px; |
| z-index: 1; |
| } |
| |
| body:not(.mode-switching):not(.streaming) #spinner { |
| visibility: visible; |
| } |