xref: /aosp_15_r20/external/pigweed/pw_web/webconsole/styles/Home.module.scss (revision 61c4878ac05f98d0ceed94b57d316916de578985)
1*61c4878aSAndroid Build Coastguard Worker/*
2*61c4878aSAndroid Build Coastguard Worker * Copyright 2022 The Pigweed Authors
3*61c4878aSAndroid Build Coastguard Worker *
4*61c4878aSAndroid Build Coastguard Worker * Licensed under the Apache License, Version 2.0 (the "License"); you may not
5*61c4878aSAndroid Build Coastguard Worker * use this file except in compliance with the License. You may obtain a copy of
6*61c4878aSAndroid Build Coastguard Worker * the License at
7*61c4878aSAndroid Build Coastguard Worker *
8*61c4878aSAndroid Build Coastguard Worker *     https://www.apache.org/licenses/LICENSE-2.0
9*61c4878aSAndroid Build Coastguard Worker *
10*61c4878aSAndroid Build Coastguard Worker * Unless required by applicable law or agreed to in writing, software
11*61c4878aSAndroid Build Coastguard Worker * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
12*61c4878aSAndroid Build Coastguard Worker * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13*61c4878aSAndroid Build Coastguard Worker * License for the specific language governing permissions and limitations under
14*61c4878aSAndroid Build Coastguard Worker * the License.
15*61c4878aSAndroid Build Coastguard Worker */
16*61c4878aSAndroid Build Coastguard Worker.container {
17*61c4878aSAndroid Build Coastguard Worker  padding: 1rem;
18*61c4878aSAndroid Build Coastguard Worker  overflow: hidden;
19*61c4878aSAndroid Build Coastguard Worker  height: 100vh;
20*61c4878aSAndroid Build Coastguard Worker}
21*61c4878aSAndroid Build Coastguard Worker
22*61c4878aSAndroid Build Coastguard Worker.main {
23*61c4878aSAndroid Build Coastguard Worker  min-height: 100vh;
24*61c4878aSAndroid Build Coastguard Worker  flex: 1;
25*61c4878aSAndroid Build Coastguard Worker  display: flex;
26*61c4878aSAndroid Build Coastguard Worker  flex-direction: column;
27*61c4878aSAndroid Build Coastguard Worker  gap: 1rem;
28*61c4878aSAndroid Build Coastguard Worker}
29*61c4878aSAndroid Build Coastguard Worker
30*61c4878aSAndroid Build Coastguard Worker.toolbar {
31*61c4878aSAndroid Build Coastguard Worker  display: flex;
32*61c4878aSAndroid Build Coastguard Worker  gap: 1rem;
33*61c4878aSAndroid Build Coastguard Worker  align-items: center;
34*61c4878aSAndroid Build Coastguard Worker
35*61c4878aSAndroid Build Coastguard Worker  .logo {
36*61c4878aSAndroid Build Coastguard Worker    margin: 0;
37*61c4878aSAndroid Build Coastguard Worker    line-height: 1.15;
38*61c4878aSAndroid Build Coastguard Worker    font-size: 1rem;
39*61c4878aSAndroid Build Coastguard Worker
40*61c4878aSAndroid Build Coastguard Worker    &>span {
41*61c4878aSAndroid Build Coastguard Worker      color: #D475D4;
42*61c4878aSAndroid Build Coastguard Worker      font-size: 1.5rem;
43*61c4878aSAndroid Build Coastguard Worker    }
44*61c4878aSAndroid Build Coastguard Worker  }
45*61c4878aSAndroid Build Coastguard Worker}
46*61c4878aSAndroid Build Coastguard Worker
47*61c4878aSAndroid Build Coastguard Worker.description {
48*61c4878aSAndroid Build Coastguard Worker  margin: 4rem 0;
49*61c4878aSAndroid Build Coastguard Worker  line-height: 1.5;
50*61c4878aSAndroid Build Coastguard Worker  font-size: 1.5rem;
51*61c4878aSAndroid Build Coastguard Worker}
52*61c4878aSAndroid Build Coastguard Worker
53*61c4878aSAndroid Build Coastguard Worker.grid {
54*61c4878aSAndroid Build Coastguard Worker  display: flex;
55*61c4878aSAndroid Build Coastguard Worker  flex-grow: 1;
56*61c4878aSAndroid Build Coastguard Worker  background-color: #2c313a;
57*61c4878aSAndroid Build Coastguard Worker    border-radius: 10px;
58*61c4878aSAndroid Build Coastguard Worker
59*61c4878aSAndroid Build Coastguard Worker  &>div {
60*61c4878aSAndroid Build Coastguard Worker    flex-grow: 1;
61*61c4878aSAndroid Build Coastguard Worker    padding: 1rem;
62*61c4878aSAndroid Build Coastguard Worker    max-width: 50vw;
63*61c4878aSAndroid Build Coastguard Worker  }
64*61c4878aSAndroid Build Coastguard Worker
65*61c4878aSAndroid Build Coastguard Worker  &>div:first-child {
66*61c4878aSAndroid Build Coastguard Worker    border-right: 1px solid #414141;
67*61c4878aSAndroid Build Coastguard Worker  }
68*61c4878aSAndroid Build Coastguard Worker}
69*61c4878aSAndroid Build Coastguard Worker
70*61c4878aSAndroid Build Coastguard Worker.logsContainer{
71*61c4878aSAndroid Build Coastguard Worker  height: calc(100vh - 78px);
72*61c4878aSAndroid Build Coastguard Worker}
73*61c4878aSAndroid Build Coastguard Worker
74*61c4878aSAndroid Build Coastguard Worker@media (max-width: 600px) {
75*61c4878aSAndroid Build Coastguard Worker  .grid {
76*61c4878aSAndroid Build Coastguard Worker    width: 100%;
77*61c4878aSAndroid Build Coastguard Worker    flex-direction: column;
78*61c4878aSAndroid Build Coastguard Worker  }
79*61c4878aSAndroid Build Coastguard Worker}
80