289f34fe8e
This implements a basic CardDav UI, titled "Contacts". It allows creating new contacts with a first name + last name, and editing their first and last names, main email, main phone, and notes. You can also import and export VCF (VCARD) files. It also allows editing the VCARD directly, for power users. Additionally, you can choose, create, or delete address books, and if there's no address book created yet in your CardDav server (first-time setup), it'll automatically create one, titled "Contacts". Finally, there are some dependency updates and a fix for the config not allowing disabling the `cardDav` or the `calDav` server. Related to #56
93 lines
2.2 KiB
CSS
93 lines
2.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
html {
|
|
/* This is needed to ensure that the system color scheme is dark and matches the dark theme of the app */
|
|
color-scheme: dark;
|
|
}
|
|
|
|
h1 {
|
|
@apply text-4xl font-bold;
|
|
}
|
|
|
|
a {
|
|
@apply text-[#51a4fb] no-underline hover:underline font-semibold;
|
|
}
|
|
|
|
main {
|
|
@apply mx-auto max-w-7xl py-6 sm:px-6 lg:px-8 text-white;
|
|
}
|
|
|
|
form {
|
|
@apply px-4 py-8 max-w-screen-md mx-auto lg:min-w-96;
|
|
}
|
|
|
|
.button {
|
|
@apply inline-block rounded text-white no-underline font-normal bg-[#51a4fb] hover:bg-sky-400 hover:shadow-sm
|
|
hover:no-underline px-4 py-2;
|
|
}
|
|
|
|
.button-secondary {
|
|
@apply inline-block rounded text-white no-underline font-normal bg-slate-600 hover:text-slate-900 hover:bg-slate-400
|
|
hover:shadow-sm hover:no-underline px-4 py-2;
|
|
}
|
|
|
|
.button-danger {
|
|
@apply inline-block rounded text-slate-50 no-underline font-normal bg-red-600 hover:text-slate-900 hover:bg-red-400
|
|
hover:shadow-md hover:no-underline px-4 py-2;
|
|
}
|
|
|
|
.input-field {
|
|
@apply block w-full p-2 rounded-md text-white bg-slate-700 border-transparent border focus:border-[#51a4fb]
|
|
focus:bg-slate-700 outline-none focus:ring-0 shadow-sm;
|
|
}
|
|
|
|
.input-field[type='range'] {
|
|
@apply w-auto;
|
|
}
|
|
|
|
.input-field:required:invalid:not(:placeholder-shown) {
|
|
@apply bg-red-400;
|
|
}
|
|
|
|
.notification-error {
|
|
@apply bg-red-700 rounded text-white px-6 py-8 shadow-md mt-2 mb-6 w-full hover:shadow-lg;
|
|
}
|
|
|
|
.notification-error h3 {
|
|
@apply text-4xl text-white mb-6;
|
|
}
|
|
|
|
.notification-success {
|
|
@apply bg-green-600 rounded text-white px-6 py-8 shadow-md mt-2 mb-6 w-full hover:shadow-lg;
|
|
}
|
|
|
|
.notification-success h3 {
|
|
@apply text-4xl text-white mb-6;
|
|
}
|
|
|
|
img.white {
|
|
filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(42deg) brightness(99%) contrast(112%);
|
|
}
|
|
|
|
img.green {
|
|
filter: invert(47%) sepia(19%) saturate(6698%) hue-rotate(114deg) brightness(91%) contrast(83%);
|
|
}
|
|
|
|
img.red {
|
|
filter: invert(18%) sepia(45%) saturate(3518%) hue-rotate(337deg) brightness(110%) contrast(101%);
|
|
}
|
|
|
|
img.gray {
|
|
filter: invert(30%) sepia(46%) saturate(356%) hue-rotate(174deg) brightness(90%) contrast(82%);
|
|
}
|
|
|
|
img.blue {
|
|
filter: invert(74%) sepia(36%) saturate(7057%) hue-rotate(186deg) brightness(101%) contrast(97%);
|
|
}
|
|
|
|
details summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|