1// Copyright (C) 2021 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@import "widgets/theme"; 16 17.home-page { 18 display: grid; 19 align-items: stretch; 20 justify-items: center; 21 grid-template-columns: 1fr; 22 grid-template-rows: 1fr 60px; 23 grid-template-areas: "center" "footer"; 24 25 .home-page-center { 26 grid-area: center; 27 28 display: flex; 29 flex-direction: column; 30 justify-content: space-around; 31 align-items: center; 32 33 .logo { 34 height: 1em; 35 margin-right: 1rem; 36 } 37 38 .home-page-title { 39 display: flex; 40 flex-direction: row; 41 align-items: center; 42 justify-content: center; 43 font-size: 60px; 44 margin: 25px; 45 text-align: center; 46 font-family: $pf-font; 47 color: #333; 48 } 49 50 .channel-select { 51 font-family: $pf-font; 52 --chan-width: 100px; 53 --chan-num: 2; 54 55 input[type="radio"] { 56 width: 0; 57 height: 0; 58 margin: 0; 59 padding: 0; 60 -moz-appearance: none; 61 -webkit-appearance: none; 62 &:nth-of-type(1):checked ~ .highlight { 63 margin-left: 0; 64 } 65 &:nth-of-type(2):checked ~ .highlight { 66 margin-left: 100px; 67 background-color: hsl(54, 100%, 40%); 68 } 69 &:nth-of-type(3):checked ~ .highlight { 70 margin-left: 200px; 71 background-color: hsl(24, 80%, 42%); 72 } 73 } 74 75 fieldset { 76 text-align: center; 77 margin: 1rem auto; 78 padding: 0; 79 position: relative; 80 background-color: hsl(218, 8%, 30%); 81 border-radius: $pf-border-radius; 82 box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4); 83 border: 0; 84 width: calc(var(--chan-width) * var(--chan-num)); 85 height: 40px; 86 line-height: 40px; 87 z-index: 0; 88 } 89 90 label { 91 display: inline-block; 92 cursor: pointer; 93 position: relative; 94 width: var(--chan-width); 95 height: 100%; 96 color: white; 97 z-index: 2; 98 text-transform: uppercase; 99 font-size: 16px; 100 font-family: $pf-font; 101 } 102 103 .highlight { 104 width: var(--chan-width); 105 height: 100%; 106 position: absolute; 107 background: hsla(122, 45%, 45%, 0.99); 108 background-image: linear-gradient( 109 rgba(255, 255, 255, 0.2), 110 transparent 111 ); 112 top: 0; 113 left: 0; 114 z-index: 1; 115 border-radius: inherit; 116 @include transition(0.2s); 117 } 118 119 .home-page-reload { 120 font-size: 12px; 121 opacity: 0; 122 color: #da4534; 123 font-weight: 400; 124 @include transition(0.2s); 125 &.show { 126 opacity: 1; 127 } 128 } 129 } // .channel-select 130 131 .home-page-hints { 132 display: flex; 133 flex-direction: column; 134 align-items: center; 135 justify-content: center; 136 font-family: $pf-font; 137 138 .pf-hotkey { 139 display: inline-flex; 140 vertical-align: middle; 141 } 142 143 ul { 144 margin: 0; 145 padding: 0; 146 147 li { 148 padding-top: 0.5rem; 149 } 150 } 151 152 .tagline { 153 font-style: italic; 154 color: red; 155 } 156 157 img { 158 display: block; 159 object-fit: contain; 160 max-width: 30vw; 161 } 162 } 163 } // .home-page-center 164 165 .privacy { 166 grid-area: footer; 167 align-self: center; 168 text-decoration: none; 169 font-family: $pf-font; 170 color: #333; 171 } 172} // .home-page 173