mirror of
https://github.com/safing/web
synced 2025-04-16 17:09:09 +00:00
Add table styling
This commit is contained in:
Luke
parent
a5a950c4dc
commit
96adb4743d
1 changed files with 279 additions and 141 deletions
|
|
@ -11,19 +11,21 @@
|
|||
}
|
||||
|
||||
#page-container content .progress-update {
|
||||
h4{
|
||||
font-size: 1.125rem;
|
||||
margin: 0;
|
||||
padding-left: .75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
hr{
|
||||
margin: 0;
|
||||
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;
|
||||
|
|
@ -48,6 +50,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
a:hover {
|
||||
opacity : .5;
|
||||
transition-duration : 150ms;
|
||||
|
|
@ -115,149 +118,284 @@
|
|||
}
|
||||
}
|
||||
|
||||
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;
|
||||
.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 : 5rem;
|
||||
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 td {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
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 : 10px;
|
||||
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 {
|
||||
background-color: transparent;
|
||||
padding-left : 0;
|
||||
padding-right : 0;
|
||||
color : black;
|
||||
font-size : 0.8rem;
|
||||
font-weight : 500;
|
||||
max-width : 5rem;
|
||||
display : inline;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top : 3rem;
|
||||
margin-bottom : 3rem;
|
||||
border-top-width: 2px;
|
||||
}
|
||||
.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%;
|
||||
|
||||
code {
|
||||
color : #ba00bf;
|
||||
font-weight: 500;
|
||||
font-size : .875rem;
|
||||
word-break : break-word;
|
||||
|
||||
&::after {
|
||||
content: "`";
|
||||
p {
|
||||
color : #fff !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
&::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;
|
||||
img {
|
||||
width : 1.5rem;
|
||||
margin-right: 1.25rem;
|
||||
height : 1.5rem;
|
||||
align-self : center;
|
||||
max-width : 100%;
|
||||
display : block;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.podcast h2 {
|
||||
padding-top : 1rem;
|
||||
font-weight : 500;
|
||||
font-size : 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
a {
|
||||
color : white !important;
|
||||
padding-left : .25rem;
|
||||
padding-right : .25rem;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
audio {
|
||||
padding-bottom: 1.5rem;
|
||||
a:hover {
|
||||
opacity : .5;
|
||||
transition-duration : 150ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue