hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

panels/statuses are looking really good now even with transparency

Browse source
This commit is contained in:
Henry Jameson 2024-03-04 18:24:29 +02:00
commit a190389f3c
12 changed files with 97 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/panel.scss
View file

@ -1,5 +1,8 @@
/* stylelint-disable no-descending-specificity */
.panel {
--__panel-background: var(--background);
--__panel-backdrop-filter: var(--backdrop-filter);
position: relative;
display: flex;
flex-direction: column;
@ -28,6 +31,8 @@
.panel-body {
padding: var(--panel-body-padding, 0);
background: var(--background);
backdrop-filter: var(--__panel-backdrop-filter);
&:empty::before {
content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
@ -50,6 +55,7 @@
--__panel-heading-height: 3.2em;
--__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
backdrop-filter: var(--__panel-backdrop-filter);
position: relative;
box-sizing: border-box;
display: grid;
@ -131,6 +137,9 @@
border-radius: var(--roundness) var(--roundness) 0 0;
border-width: 0 0 1px;
align-items: start;
background-image:
linear-gradient(to bottom, var(--background), var(--background)),
linear-gradient(to bottom, var(--__panel-background), var(--__panel-background));
&::after {
background-color: var(--background);
@ -186,5 +195,6 @@
border-width: 1px 0 0;
border-style: solid;
border-color: var(--border);
background-color: var(--__panel-background);
}
/* stylelint-enable no-descending-specificity */