mirror of
https://github.com/safing/web
synced 2025-04-17 09:29:08 +00:00
402 lines
8.5 KiB
SCSS
402 lines
8.5 KiB
SCSS
#page-container {
|
|
&.imprint {
|
|
h4 {
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
p {
|
|
padding: .5rem 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
#page-container content .progress-update {
|
|
h4 {
|
|
font-size : 1.125rem;
|
|
margin : 0;
|
|
padding-left: .75rem;
|
|
font-weight : 700;
|
|
}
|
|
|
|
hr {
|
|
margin : 0;
|
|
border-top-width: 1px;
|
|
}
|
|
}
|
|
|
|
#page-container content {
|
|
|
|
p {
|
|
margin-top: 1rem;
|
|
color : #545454;
|
|
}
|
|
|
|
strong {
|
|
color: #353535;
|
|
}
|
|
|
|
a {
|
|
--text-opacity : 1;
|
|
color : #667eea;
|
|
color : rgba(102, 126, 234, var(--text-opacity));
|
|
text-decoration : inherit;
|
|
background-color : transparent;
|
|
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
|
|
|
|
strong {
|
|
--text-opacity: 1;
|
|
color : #667eea;
|
|
color : rgba(102, 126, 234, var(--text-opacity))
|
|
}
|
|
}
|
|
|
|
|
|
a:hover {
|
|
opacity : .5;
|
|
transition-duration : 150ms;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
|
|
}
|
|
|
|
h1 {
|
|
font-size : 3rem;
|
|
font-weight: 600;
|
|
color : #000;
|
|
}
|
|
|
|
h2 {
|
|
font-size : 1.8rem;
|
|
margin-top : 2rem;
|
|
font-weight : 500;
|
|
color : #000;
|
|
border-bottom : 1px solid #d7d7d7;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size : 1.4rem;
|
|
margin-top : 2.5rem;
|
|
font-weight: 500;
|
|
color : #000;
|
|
}
|
|
|
|
h4 {
|
|
font-size : 1.2rem;
|
|
margin-top : 1.5rem;
|
|
font-weight: 500;
|
|
color : #000;
|
|
}
|
|
|
|
h5 {
|
|
font-size : 1.1rem;
|
|
margin-top : 1.5rem;
|
|
font-weight: 500;
|
|
color : #000;
|
|
}
|
|
|
|
h6 {
|
|
font-size : 1rem;
|
|
margin-top : 1.5rem;
|
|
font-weight: 500;
|
|
color : #000;
|
|
}
|
|
|
|
ul {
|
|
padding-top : 1.25rem;
|
|
padding-left : 1.85rem;
|
|
list-style-type: disc;
|
|
color : #545454;
|
|
|
|
li {
|
|
padding-left: .25rem;
|
|
|
|
li ul {
|
|
padding-top : 0.05rem;
|
|
padding-left : 1.25rem;
|
|
list-style-type: disc;
|
|
color : #545454;
|
|
}
|
|
}
|
|
}
|
|
|
|
.table {
|
|
width : fit-content;
|
|
--transform-translate-x: 0;
|
|
--transform-translate-y: 0;
|
|
--transform-rotate : 0;
|
|
--transform-skew-x : 0;
|
|
--transform-skew-y : 0;
|
|
--transform-scale-x : 1.1;
|
|
--transform-scale-y : 1.1;
|
|
transform : translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
|
|
box-shadow : 0 0px 90px 0 rgba(59, 93, 199, 0.1), 0 0px 5px 0 rgba(0, 0, 0, 0);
|
|
max-width : 100%;
|
|
height : auto;
|
|
border-radius : .375rem;
|
|
display : block;
|
|
margin-bottom : 4rem;
|
|
margin-top : 4rem;
|
|
margin-left : auto;
|
|
margin-right : auto;
|
|
|
|
padding-left : 2rem;
|
|
padding-right: 2rem;
|
|
|
|
table {
|
|
table-layout: auto;
|
|
text-align : left;
|
|
margin-left : 1.5rem;
|
|
margin-right: 1.5rem;
|
|
|
|
colgroup>col {
|
|
width: 220px;
|
|
}
|
|
|
|
colgroup .highlight {
|
|
background-color: #f7f9ff;
|
|
}
|
|
|
|
thead {
|
|
margin-top: 1.5rem;
|
|
|
|
tr {
|
|
text-align : center;
|
|
border-bottom: 2px solid rgba(0, 0, 0, 0.19);
|
|
}
|
|
|
|
tr>th {
|
|
padding-top : 1.4rem;
|
|
padding-bottom: 1.4rem;
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
margin-bottom: 1.5rem;
|
|
text-align : center;
|
|
|
|
tr {
|
|
border-bottom: 2px solid rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
tr>td {
|
|
height : 4.5rem;
|
|
font-size: 0.9rem;
|
|
|
|
>* {
|
|
margin-left : auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
img[src*="tick.svg"],
|
|
img[src*="cross.svg"],
|
|
img[src*="windows.svg"],
|
|
img[src*="linux.svg"] {
|
|
width: 1.4rem;
|
|
}
|
|
|
|
img[src*="docker.svg"] {
|
|
width: 2rem;
|
|
}
|
|
}
|
|
|
|
tr:last-child {
|
|
border-bottom: 0px;
|
|
}
|
|
|
|
tr td:first-child {
|
|
text-align: left;
|
|
opacity : 0.65;
|
|
}
|
|
|
|
.link {
|
|
position: relative;
|
|
|
|
a:hover {
|
|
opacity: 1 !important;
|
|
|
|
img {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
a {
|
|
display : flex;
|
|
align-items: center;
|
|
height : 100%;
|
|
|
|
div {
|
|
width : fit-content;
|
|
display : flex;
|
|
margin-left : auto;
|
|
margin-right: auto;
|
|
|
|
>* {
|
|
margin: 6px;
|
|
}
|
|
}
|
|
|
|
>img {
|
|
position : absolute;
|
|
right : 15px;
|
|
width : 0.75rem;
|
|
margin-right: auto;
|
|
margin-top : -3px;
|
|
opacity : 0.5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
pre {
|
|
padding : 16px;
|
|
overflow : auto;
|
|
font-size : 10%;
|
|
line-height : 1.45;
|
|
background-color: #f7f7f7;
|
|
border-radius : 3px;
|
|
padding-top : 1rem;
|
|
display : flex;
|
|
margin-top : 1rem;
|
|
|
|
code {
|
|
background-color: transparent;
|
|
padding-left : 0;
|
|
padding-right : 0;
|
|
color : black;
|
|
font-size : 0.8rem;
|
|
font-weight : 500;
|
|
max-width : 5rem;
|
|
display : inline;
|
|
}
|
|
}
|
|
|
|
hr {
|
|
margin-top : 3rem;
|
|
margin-bottom : 3rem;
|
|
border-top-width: 2px;
|
|
}
|
|
|
|
code {
|
|
color : #ba00bf;
|
|
font-weight: 500;
|
|
font-size : .875rem;
|
|
word-break : break-word;
|
|
|
|
&::after {
|
|
content: "`";
|
|
}
|
|
|
|
&::before {
|
|
content: "`";
|
|
}
|
|
}
|
|
|
|
|
|
|
|
em {
|
|
font-weight: 400;
|
|
}
|
|
|
|
ol {
|
|
padding-top : 0.1rem;
|
|
list-style-type: decimal;
|
|
padding-left : 1rem;
|
|
color : #545454;
|
|
|
|
li {
|
|
padding-top: 0.4rem
|
|
}
|
|
}
|
|
|
|
blockquote {
|
|
padding-left: 1rem;
|
|
margin-top : 1.55rem;
|
|
color : black;
|
|
opacity : 1;
|
|
border-left : 4px solid #ddd;
|
|
}
|
|
|
|
.content {
|
|
max-width : 750px;
|
|
margin : auto;
|
|
margin-top: 3rem;
|
|
|
|
|
|
|
|
|
|
|
|
p img {
|
|
--transform-translate-x: 0;
|
|
--transform-translate-y: 0;
|
|
--transform-rotate : 0;
|
|
--transform-skew-x : 0;
|
|
--transform-skew-y : 0;
|
|
--transform-scale-x : 1.1;
|
|
--transform-scale-y : 1.1;
|
|
transform : translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
|
|
box-shadow : 0 0px 90px 0 rgba(59, 93, 199, 0.1), 0 0px 5px 0 rgba(0, 0, 0, 0);
|
|
margin-top : 5rem;
|
|
max-width : 100%;
|
|
height : auto;
|
|
border-radius : .375rem;
|
|
display : block;
|
|
margin-bottom : 4rem;
|
|
margin-top : 5rem;
|
|
}
|
|
|
|
.podcast h2 {
|
|
padding-top : 1rem;
|
|
font-weight : 500;
|
|
font-size : 1rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
audio {
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.notification-podcast {
|
|
font-size : .85rem;
|
|
background-color: #5c85ff;
|
|
width : fit-content;
|
|
width : -moz-fit-content;
|
|
overflow-wrap : break-word;
|
|
padding-left : 1.25rem;
|
|
padding : 1.25rem;
|
|
margin-bottom : 1.25rem;
|
|
margin-top : 1.25rem;
|
|
display : flex;
|
|
border-radius : .375rem;
|
|
width : 100%;
|
|
|
|
p {
|
|
color : #fff !important;
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
img {
|
|
width : 1.5rem;
|
|
margin-right: 1.25rem;
|
|
height : 1.5rem;
|
|
align-self : center;
|
|
max-width : 100%;
|
|
display : block;
|
|
border-style: solid;
|
|
}
|
|
|
|
a {
|
|
color : white !important;
|
|
padding-left : .25rem;
|
|
padding-right : .25rem;
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
a:hover {
|
|
opacity : .5;
|
|
transition-duration : 150ms;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
}
|
|
}
|