vikarti.anatra/safing-web
1
0
Fork 0
mirror of https://github.com/safing/web synced 2025-09-01 10:39:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add table styling

Browse source
This commit is contained in:
Luke 2021-11-15 05:15:34 +01:00
parent a5a950c4dc
commit 96adb4743d
1 changed files with 279 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

138
_sass/_page_container.scss
View file

@ -17,6 +17,7 @@
padding-left: .75rem;
font-weight : 700;
}
hr {
margin : 0;
border-top-width: 1px;
@ -24,6 +25,7 @@
}
#page-container content {
p {
margin-top: 1rem;
color : #545454;
@ -48,6 +50,7 @@
}
}
a:hover {
opacity : .5;
transition-duration : 150ms;
@ -115,6 +118,135 @@
}
}
.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;
@ -159,6 +291,8 @@
}
}
em {
font-weight: 400;
}
@ -187,6 +321,10 @@
margin : auto;
margin-top: 3rem;
p img {
--transform-translate-x: 0;
--transform-translate-y: 0;