mirror of
https://github.com/perstarkse/minne.git
synced 2026-04-23 09:18:36 +02:00
email wip
This commit is contained in:
Per Stark
227
assets/style.css
227
assets/style.css
@@ -877,6 +877,57 @@ html {
|
||||
content: var(--tw-content);
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: var(--rounded-box, 1rem);
|
||||
}
|
||||
|
||||
.card:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.card figure {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card.image-full {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.card.image-full:before {
|
||||
position: relative;
|
||||
content: "";
|
||||
z-index: 10;
|
||||
border-radius: var(--rounded-box, 1rem);
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.card.image-full:before,
|
||||
.card.image-full > * {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 1;
|
||||
}
|
||||
|
||||
.card.image-full > figure img {
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card.image-full > .card-body {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
--tw-text-opacity: 1;
|
||||
color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
|
||||
}
|
||||
|
||||
.chat {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -1164,6 +1215,34 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-auto-flow: row;
|
||||
place-items: start;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
row-gap: 2.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.footer > * {
|
||||
display: grid;
|
||||
place-items: start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.footer {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.footer-center {
|
||||
grid-auto-flow: row dense;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1182,20 +1261,6 @@ html {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item) {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex-shrink: 1;
|
||||
-webkit-appearance: none;
|
||||
@@ -1514,6 +1579,44 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
.card :where(figure:first-child) {
|
||||
overflow: hidden;
|
||||
border-start-start-radius: inherit;
|
||||
border-start-end-radius: inherit;
|
||||
border-end-start-radius: unset;
|
||||
border-end-end-radius: unset;
|
||||
}
|
||||
|
||||
.card :where(figure:last-child) {
|
||||
overflow: hidden;
|
||||
border-start-start-radius: unset;
|
||||
border-start-end-radius: unset;
|
||||
border-end-start-radius: inherit;
|
||||
border-end-end-radius: inherit;
|
||||
}
|
||||
|
||||
.card:focus-visible {
|
||||
outline: 2px solid currentColor;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.card.bordered {
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
|
||||
}
|
||||
|
||||
.card.compact .card-body {
|
||||
padding: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.card.image-full :where(figure) {
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.checkbox:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -1916,78 +2019,6 @@ html {
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item) {
|
||||
bottom: auto;
|
||||
inset-inline-end: 0px;
|
||||
inset-inline-start: auto;
|
||||
top: 0px;
|
||||
--tw-translate-y: -50%;
|
||||
--tw-translate-x: 50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item):where([dir="rtl"], [dir="rtl"] *) {
|
||||
--tw-translate-x: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item.indicator-start) {
|
||||
inset-inline-end: auto;
|
||||
inset-inline-start: 0px;
|
||||
--tw-translate-x: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item.indicator-start):where([dir="rtl"], [dir="rtl"] *) {
|
||||
--tw-translate-x: 50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item.indicator-center) {
|
||||
inset-inline-end: 50%;
|
||||
inset-inline-start: 50%;
|
||||
--tw-translate-x: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item.indicator-center):where([dir="rtl"], [dir="rtl"] *) {
|
||||
--tw-translate-x: 50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item.indicator-end) {
|
||||
inset-inline-end: 0px;
|
||||
inset-inline-start: auto;
|
||||
--tw-translate-x: 50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item.indicator-end):where([dir="rtl"], [dir="rtl"] *) {
|
||||
--tw-translate-x: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item.indicator-bottom) {
|
||||
bottom: 0px;
|
||||
top: auto;
|
||||
--tw-translate-y: 50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item.indicator-middle) {
|
||||
bottom: 50%;
|
||||
top: 50%;
|
||||
--tw-translate-y: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item.indicator-top) {
|
||||
bottom: auto;
|
||||
top: 0px;
|
||||
--tw-translate-y: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.menu-horizontal {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
@@ -2027,10 +2058,6 @@ html {
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@@ -2068,10 +2095,6 @@ html {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.max-h-full {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.min-h-\[80vh\] {
|
||||
min-height: 80vh;
|
||||
}
|
||||
@@ -2080,10 +2103,6 @@ html {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.min-h-full {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -2092,14 +2111,14 @@ html {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.max-w-md {
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
.max-w-lg {
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
||||
.max-w-md {
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
@@ -2159,6 +2178,10 @@ html {
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.border-transparent {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user