/* Copyright 2019 The Chromium Authors
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
/* This file should contain style used on desktop but not Android or iOS. */
:root {
--google-grey-500: 154, 160, 166;
--google-grey-700: 95, 99, 104;
--google-grey-800: 60, 64, 67;
}
fieldset {
background: transparent;
border: none;
}
#main-content h1 {
font-size: 1.5em;
}
#main-content #article-header {
margin-top: 32px;
}
.screen-reader-only {
border: none;
color: transparent;
display: block;
height: 0;
margin: 0;
padding: 0;
user-select: none;
}
#main-content {
margin-bottom: 1em;
max-width: 100%;
padding: 0 1em;
width: 35em;
}
#settings-container {
border-bottom: thin solid gray;
display: flex;
flex: 1 1 auto;
height: 36px;
justify-content: flex-end;
}
#settings-container button {
background: transparent;
border: none;
border-radius: 50%;
color: rgb(var(--google-grey-700));
}
#settings-container button .material-icons {
user-select: none;
}
#settings-container button.activated {
background-color: rgba(0, 0, 0, .1);
}
.dark #settings-container button.activated {
background-color: rgba(255, 255, 255, .1);
}
#settings-container button:focus {
background-color: rgba(95, 99, 104, .2);
box-shadow: 0 0 0 8px rgba(95, 99, 104, .2);
outline: none;
}
#settings-container button#settings-toggle {
border-radius: 16px;
}
.dark #settings-toggle {
color: #E0E0E0;
}
#settings-dialog {
border: none;
border-radius: 2px;
box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3),
0 4px 8px 3px rgba(60, 64, 67, 0.15);
box-sizing: border-box;
color: rgb(var(--google-grey-800));
font-family: 'Roboto Regular', 'Roboto', sans-serif;
font-size: 13px;
height: 168px;
padding: 16px;
position: fixed;
top: 0;
width: 320px;
/* The z-index is set so that any 'positioned' elements in the article text
* (e.g. footnotes) are rendered below the dialog. */
z-index: 1;
}
#settings-header h1 {
font-size: 15px;
}
#settings-dialog::backdrop {
display: none;
}
#dialog-backdrop {
bottom: 0;
display: none;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
}
#settings-header {
margin-bottom: 16px;
}
#settings-header > * {
display: inline;
}
#close-settings-button {
height: 18px;
padding: 0;
position: absolute;
right: 8px;
top: 8px;
width: 18px;
}
#close-settings-button > * {
font-size: 18px;
margin: 0;
}
#settings-fields {
display: grid;
grid-row-gap: 12px;
grid-template:
'style color' 32px
'size size' 32px
/ 50% 50%;
width: 100%;
}
.font-family-container {
position: relative;
}
select#font-family-selection {
-webkit-appearance: none;
background: transparent;
border: 1px solid silver;
border-radius: 2px;
color: inherit;
font-family: inherit;
font-size: inherit;
height: 32px;
padding: 0 8px 0 8px;
width: 100%;
}
#arrow-drop-down {
pointer-events: none;
position: absolute;
right: 0;
top: 4px;
}
select#font-family-selection:focus {
outline-color: rgb(var(--google-blue-600));
}
#theme-selection ul {
column-gap: 16px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
list-style-type: none;
margin-inline-start: 16px;
}
.theme-option {
display: block;
height: 32px;
position: relative;
width: 32px;
}
.theme-option input[type='radio'] {
-webkit-appearance: none;
appearance: none;
border: 1px solid rgb(var(--google-grey-500));
border-radius: 50%;
height: 32px;
margin: 0;
padding: 0;
width: 32px;
}
.theme-option input[type='radio']:focus {
border: 2px solid rgb(var(--google-blue-600));
outline: none;
}
.checkmark {
bottom: -3px;
display: none;
height: 16px;
position: absolute;
right: -3px;
width: 16px;
}
.checkmark .material-icons {
background-color: white;
border-radius: 50%;
color: rgb(var(--google-blue-600));
font-size: 16px;
user-select: none;
}
.theme-option input[type='radio']:checked + .checkmark {
display: inline;
}
#font-size-wrapper {
grid-area: size;
padding: 0 8px;
}
#font-size-selection {
--fontSizePercent: 22%;
-webkit-appearance: none;
background: transparent;
margin: 0;
width: 100%;
}
#font-size-selection:focus {
outline: none;
}
#font-size-selection::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: rgb(var(--google-blue-600));
border-radius: 50%;
height: 10px;
/* Position the thumb over the slider track. */
margin-top: -4px;
position: relative;
width: 10px;
/* Render the thumb on top of the tickmarks. We can't just rearrange the HTML
* because the tickmarks need to render above the slider's track but below the
* thumb. */
z-index: 1;
}
#font-size-selection:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 11px rgba(var(--google-blue-600), .2);
}
#font-size-selection::-webkit-slider-container {
/* Increase the clickable area of the slider. */
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
}
#font-size-selection::-webkit-slider-runnable-track {
/* Make the track opaque blue to the left of the thumb and mostly transparent
* to the right of the thumb. */
background: linear-gradient(
to right,
rgb(var(--google-blue-600)),
rgb(var(--google-blue-600)) var(--fontSizePercent),
rgba(var(--google-blue-600), .2) var(--fontSizePercent),
rgba(var(--google-blue-600), .2));
height: 2px;
width: 100%;
}
.tickmarks {
display: flex;
height: 2px;
justify-content: space-between;
/* Position the tickmarks over the slider track. */
margin-top: -19px;
/* Restrict the height of individual options to that of their containing
* datalist. Setting the height property directly does not seem to have an
* impact. */
overflow: hidden;
padding-top: 0;
width: 100%;
}
.tickmarks option {
padding: 0;
width: 2px;
}
.tickmarks option.before-thumb {
background: white;
}
.tickmarks option.after-thumb {
background: rgb(var(--google-blue-600));
}
.label-container {
display: flex;
font-size: 13px;
justify-content: space-between;
padding-top: 8px;
}
Codebase Browser
chromium