rentgen/components/toolbar/toolbar.scss
2022-07-09 18:05:56 +02:00

177 lines
4.0 KiB
SCSS

@import '../../styles/colors.scss';
body {
width: 400px;
overflow-x: hidden;
user-select: none;
}
.toolbar {
padding: 0.125rem 1rem;
.header {
display: grid;
grid-template-columns: 1.75rem 1fr 1.25rem;
align-items: center;
max-height: 3.5rem;
min-height: 3.5rem;
border-bottom: 1px solid $light-grey;
position: sticky;
top: 0;
background: #ffffff;
z-index: 1;
user-select: none;
&--no-page {
border-bottom: 0;
}
.webpage-metadata {
word-break: break-all;
display: flex;
flex-flow: column;
flex-wrap: nowrap;
font-size: 0.875rem;
font-weight: 700;
justify-content: center;
padding-left: 1rem;
color: #000;
&--hyperlink {
font-weight: 600;
color: $ultra-black-color;
max-height: 2rem;
overflow: hidden;
}
}
button {
border: none;
background: transparent;
cursor: pointer;
padding: 0;
}
}
.summary {
display: flex;
flex-flow: column;
justify-content: center;
padding-bottom: 1.5rem;
border-bottom: 1px solid $light-grey;
.counters-wrapper {
flex-flow: row;
display: flex;
justify-content: center;
.counters {
display: flex;
flex-flow: column;
align-content: flex-start;
justify-content: center;
margin-right: 1rem;
.counter {
font-size: 1.25rem;
font-weight: 700;
align-items: center;
display: flex;
img {
margin-right: 0.5rem;
}
span {
margin-right: 2rem;
}
&:nth-child(1) {
margin-bottom: 1rem;
}
}
}
.big-counter {
font-size: 6rem;
font-weight: 700;
}
}
.notice {
font-size: 0.875rem;
font-weight: 700;
text-align: center;
}
}
.details {
padding-top: 1.5rem;
p {
font-size: 0.875rem;
padding-bottom: 1rem;
}
}
.about {
&__no-errors {
text-align: center;
padding-bottom: 1.5rem;
}
p {
font-size: 0.875rem;
font-weight: 700;
}
}
.actions {
padding: 2rem 0;
display: flex;
justify-content: center;
align-items: center;
a {
font-size: 0.875rem;
font-weight: 700;
color: #000;
margin-right: 0.5rem;
}
.button {
border: 0;
outline: 0;
height: 3rem;
font-size: 0.875rem;
line-height: 0.875rem;
cursor: pointer;
&--report {
font-weight: 800;
padding: 0 1.5rem;
background-color: #000;
color: #fff;
&:hover {
color: $icd-rentgen-color;
background-image: linear-gradient(
to right,
$icd-rentgen-color 0%,
$icd-rentgen-color 4%,
#000 4%,
#000 100%
);
animation: slidebg 1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}
}
@keyframes slidebg {
to {
background-position: 155px;
}
}
}
}
}