mirror of
https://github.com/TheAnachronism/docspell.git
synced 2025-06-23 02:48:26 +00:00
Fix tailwind setup
- Adopted postcss and tailwind config to new version - renamed colors bluegray->slate etc to not have custom definitions (hope to reduce migration next time) - tailwind now doesn't build the complete css anymore, so the `dev-ui-build` script must compile both
This commit is contained in:
eikek
99
modules/webapp/src/main/styles/custom-components.css
Normal file
99
modules/webapp/src/main/styles/custom-components.css
Normal file
@ -0,0 +1,99 @@
|
||||
@layer components {
|
||||
.label {
|
||||
@apply flex flex-row items-center px-2 py-0.5 rounded border ;
|
||||
}
|
||||
|
||||
.ds-item-card.current {
|
||||
@apply shadow-lg dark:border-sky-600;
|
||||
}
|
||||
.ds-item-row.current {
|
||||
@apply bg-gray-200 bg-opacity-50 dark:bg-sky-600 dark:bg-opacity-10;
|
||||
}
|
||||
|
||||
.elm-datepicker--input {
|
||||
@apply pl-10 rounded w-full placeholder-gray-400 dark:text-slate-200 dark:border-slate-500;
|
||||
}
|
||||
#sidebar .elm-datepicker--input {
|
||||
@apply dark:bg-slate-700 border-gray-500 bg-blue-50;
|
||||
}
|
||||
|
||||
#content .elm-datepicker--input {
|
||||
@apply dark:bg-slate-800 border-gray-400;
|
||||
}
|
||||
#item-card-list .elm-datepicker--input {
|
||||
@apply dark:bg-slate-800 border-gray-400;
|
||||
}
|
||||
|
||||
.elm-datepicker--container {
|
||||
@apply w-full;
|
||||
}
|
||||
.elm-datepicker--picker {
|
||||
@apply absolute top-11 z-50 bg-white dark:bg-slate-800 w-full flex flex-col border border-gray-300 dark:border-slate-500 shadow-lg;
|
||||
}
|
||||
.elm-datepicker--picker-header {
|
||||
@apply flex flex-row items-center py-2 bg-blue-50 dark:bg-slate-700;
|
||||
}
|
||||
.elm-datepicker--prev-container {
|
||||
@apply flex-none px-2;
|
||||
}
|
||||
.elm-datepicker--prev {
|
||||
@apply fa fa-chevron-left inline-flex block px-2 py-2 focus:outline-none hover:opacity-75;
|
||||
}
|
||||
.elm-datepicker--month-container {
|
||||
@apply flex-grow px-2 flex flex-col space-y-1 items-center;
|
||||
}
|
||||
.elm-datepicker--next-container {
|
||||
@apply px-2;
|
||||
}
|
||||
.elm-datepicker--next {
|
||||
@apply fa fa-chevron-right inline-flex block px-2 py-2 focus:outline-none hover:opacity-75;
|
||||
}
|
||||
.elm-datepicker--year-menu {
|
||||
@apply dark:text-slate-200 dark:bg-slate-600 dark:border-slate-400 rounded text-sm py-1 focus:ring focus:ring-black focus:ring-opacity-50 focus:ring-offset-0 dark:focus:ring-slate-400;
|
||||
}
|
||||
|
||||
.elm-datepicker--table {
|
||||
@apply border-collapse w-full text-lg;
|
||||
}
|
||||
.elm-datepicker--weekdays {
|
||||
@apply font-semibold text-sm border-0 border-b dark:border-slate-500;
|
||||
}
|
||||
.elm-datepicker--year {
|
||||
@apply h-8;
|
||||
}
|
||||
.elm-datepicker--dow {
|
||||
@apply px-1 py-1 text-center;
|
||||
}
|
||||
.elm-datepicker--day {
|
||||
@apply cursor-pointer text-center hover:underline;
|
||||
}
|
||||
.elm-datepicker--day.elm-datepicker--other-month {
|
||||
@apply opacity-50;
|
||||
}
|
||||
.elm-datepicker--day.elm-datepicker--today {
|
||||
@apply border-2 rounded-full border-blue-500 dark:border-sky-500 h-5/6 w-5/6 flex items-center justify-center ;
|
||||
}
|
||||
|
||||
|
||||
.markdown-preview h3,h4,h5,h6 {
|
||||
@apply text-lg font-semibold mb-2;
|
||||
}
|
||||
.markdown-preview h2 {
|
||||
@apply text-xl font-semibold mb-2;
|
||||
}
|
||||
.markdown-preview h1 {
|
||||
@apply text-2xl font-semibold mb-2;
|
||||
}
|
||||
.markdown-preview ul {
|
||||
@apply list-disc py-2 ml-4;
|
||||
}
|
||||
.markdown-preview ol {
|
||||
@apply list-decimal py-2 ml-4;
|
||||
}
|
||||
.markdown-preview p {
|
||||
@apply py-2;
|
||||
}
|
||||
.markdown-preview a {
|
||||
@apply text-blue-400 hover:text-blue-500 dark:text-sky-200 dark:hover:text-sky-100 cursor-pointer;
|
||||
}
|
||||
}
|
||||
86
modules/webapp/src/main/styles/custom-utilities.css
Normal file
86
modules/webapp/src/main/styles/custom-utilities.css
Normal file
@ -0,0 +1,86 @@
|
||||
@layer utilities {
|
||||
.disabled {
|
||||
@apply opacity-50 cursor-not-allowed;
|
||||
}
|
||||
.h-screen-10 {
|
||||
height: calc(100vh - 2.5rem);
|
||||
}
|
||||
.h-screen-11 {
|
||||
height: calc(100vh - 2.75rem);
|
||||
}
|
||||
.h-screen-12 {
|
||||
height: calc(100vh - 3rem);
|
||||
}
|
||||
.h-full-10 {
|
||||
height: calc(100% - 2.5rem);
|
||||
}
|
||||
.h-full-11 {
|
||||
height: calc(100% - 2.75rem);
|
||||
}
|
||||
.h-full-12 {
|
||||
height: calc(100% - 3rem);
|
||||
}
|
||||
.z-35 {
|
||||
z-index: 35;
|
||||
}
|
||||
|
||||
@variants responsive {
|
||||
.min-h-7 {
|
||||
min-height: 1.75rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.scrollbar-none {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
/* Chrome, Safari and Opera */
|
||||
.scrollbar-none::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.scrollbar-thin::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
@variants dark {
|
||||
.scrollbar-dark-sidebar {
|
||||
scrollbar-color: rgba(15,23,42,0.9) rgba(15,23,42,0.3);
|
||||
}
|
||||
.scrollbar-light-sidebar {
|
||||
scrollbar-color: rgba(219, 234, 254, 1.0) rgba(219, 234, 254,0.3);
|
||||
}
|
||||
.scrollbar-main {
|
||||
scrollbar-color: rgba(156, 163, 175,0.9) rgba(156, 163, 175,0.3);
|
||||
}
|
||||
|
||||
.scrollbar-dark-sidebar::-webkit-scrollbar {
|
||||
background-color: rgba(15,23,42,0.3);
|
||||
}
|
||||
.scrollbar-dark-sidebar::-webkit-scrollbar-thumb {
|
||||
background: rgba(15,23,42,0.9);
|
||||
}
|
||||
|
||||
.scrollbar-light-sidebar::-webkit-scrollbar {
|
||||
background-color: rgba(219, 234, 254, 0.3);
|
||||
}
|
||||
.scrollbar-light-sidebar::-webkit-scrollbar-thumb {
|
||||
background: rgba(219, 234, 254, 1.0);
|
||||
}
|
||||
|
||||
.scrollbar-main::-webkit-scrollbar {
|
||||
background-color: rgba(156, 163, 175, 0.3);
|
||||
}
|
||||
.scrollbar-main::-webkit-scrollbar-thumb {
|
||||
background: rgba(156, 163, 175, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.ds-card-search-hl strong {
|
||||
@apply bg-lime-200 dark:bg-sky-700 italic font-bold px-1 bg-opacity-60 dark:bg-opacity-60;
|
||||
}
|
||||
}
|
||||
@ -1,196 +1,9 @@
|
||||
@import "@fortawesome/fontawesome-free/css/all";
|
||||
@import "flag-icon-css/css/flag-icon.min";
|
||||
|
||||
/* all @import must be above this line */
|
||||
@import "tailwindcss/base";
|
||||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
@layer components {
|
||||
.label {
|
||||
@apply flex flex-row items-center px-2 py-0.5 rounded border ;
|
||||
}
|
||||
|
||||
.ds-item-card.current {
|
||||
@apply shadow-lg dark:border-lightblue-600;
|
||||
}
|
||||
.ds-item-row.current {
|
||||
@apply bg-gray-200 bg-opacity-50 dark:bg-lightblue-600 dark:bg-opacity-10;
|
||||
}
|
||||
|
||||
.elm-datepicker--input {
|
||||
@apply pl-10 rounded w-full placeholder-gray-400 dark:text-bluegray-200 dark:border-bluegray-500;
|
||||
}
|
||||
#sidebar .elm-datepicker--input {
|
||||
@apply dark:bg-bluegray-700 border-gray-500 bg-blue-50;
|
||||
}
|
||||
|
||||
#content .elm-datepicker--input {
|
||||
@apply dark:bg-bluegray-800 border-gray-400;
|
||||
}
|
||||
#item-card-list .elm-datepicker--input {
|
||||
@apply dark:bg-bluegray-800 border-gray-400;
|
||||
}
|
||||
|
||||
.elm-datepicker--container {
|
||||
@apply w-full;
|
||||
}
|
||||
.elm-datepicker--picker {
|
||||
@apply absolute top-11 z-50 bg-white dark:bg-bluegray-800 w-full flex flex-col border border-gray-300 dark:border-bluegray-500 shadow-lg;
|
||||
}
|
||||
.elm-datepicker--picker-header {
|
||||
@apply flex flex-row items-center py-2 bg-blue-50 dark:bg-bluegray-700;
|
||||
}
|
||||
.elm-datepicker--prev-container {
|
||||
@apply flex-none px-2;
|
||||
}
|
||||
.elm-datepicker--prev {
|
||||
@apply fa fa-chevron-left inline-flex block px-2 py-2 focus:outline-none hover:opacity-75;
|
||||
}
|
||||
.elm-datepicker--month-container {
|
||||
@apply flex-grow px-2 flex flex-col space-y-1 items-center;
|
||||
}
|
||||
.elm-datepicker--next-container {
|
||||
@apply px-2;
|
||||
}
|
||||
.elm-datepicker--next {
|
||||
@apply fa fa-chevron-right inline-flex block px-2 py-2 focus:outline-none hover:opacity-75;
|
||||
}
|
||||
.elm-datepicker--year-menu {
|
||||
@apply dark:text-bluegray-200 dark:bg-bluegray-600 dark:border-bluegray-400 rounded text-sm py-1 focus:ring focus:ring-black focus:ring-opacity-50 focus:ring-offset-0 dark:focus:ring-bluegray-400;
|
||||
}
|
||||
|
||||
.elm-datepicker--table {
|
||||
@apply border-collapse w-full text-lg;
|
||||
}
|
||||
.elm-datepicker--weekdays {
|
||||
@apply font-semibold text-sm border-0 border-b dark:border-bluegray-500;
|
||||
}
|
||||
.elm-datepicker--year {
|
||||
@apply h-8;
|
||||
}
|
||||
.elm-datepicker--dow {
|
||||
@apply px-1 py-1 text-center;
|
||||
}
|
||||
.elm-datepicker--day {
|
||||
@apply cursor-pointer text-center hover:underline;
|
||||
}
|
||||
.elm-datepicker--day.elm-datepicker--other-month {
|
||||
@apply opacity-50;
|
||||
}
|
||||
.elm-datepicker--day.elm-datepicker--today {
|
||||
@apply border-2 rounded-full border-blue-500 dark:border-lightblue-500 h-5/6 w-5/6 flex items-center justify-center ;
|
||||
}
|
||||
|
||||
|
||||
.markdown-preview h3,h4,h5,h6 {
|
||||
@apply text-lg font-semibold mb-2;
|
||||
}
|
||||
.markdown-preview h2 {
|
||||
@apply text-xl font-semibold mb-2;
|
||||
}
|
||||
.markdown-preview h1 {
|
||||
@apply text-2xl font-semibold mb-2;
|
||||
}
|
||||
.markdown-preview ul {
|
||||
@apply list-disc py-2 ml-4;
|
||||
}
|
||||
.markdown-preview ol {
|
||||
@apply list-decimal py-2 ml-4;
|
||||
}
|
||||
.markdown-preview p {
|
||||
@apply py-2;
|
||||
}
|
||||
.markdown-preview a {
|
||||
@apply text-blue-400 hover:text-blue-500 dark:text-lightblue-200 dark:hover:text-lightblue-100 cursor-pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.disabled {
|
||||
@apply opacity-50 cursor-not-allowed;
|
||||
}
|
||||
.h-screen-10 {
|
||||
height: calc(100vh - 2.5rem);
|
||||
}
|
||||
.h-screen-11 {
|
||||
height: calc(100vh - 2.75rem);
|
||||
}
|
||||
.h-screen-12 {
|
||||
height: calc(100vh - 3rem);
|
||||
}
|
||||
.h-full-10 {
|
||||
height: calc(100% - 2.5rem);
|
||||
}
|
||||
.h-full-11 {
|
||||
height: calc(100% - 2.75rem);
|
||||
}
|
||||
.h-full-12 {
|
||||
height: calc(100% - 3rem);
|
||||
}
|
||||
.z-35 {
|
||||
z-index: 35;
|
||||
}
|
||||
|
||||
@variants responsive {
|
||||
.min-h-7 {
|
||||
min-height: 1.75rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.scrollbar-none {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
/* Chrome, Safari and Opera */
|
||||
.scrollbar-none::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.scrollbar-thin::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
@variants dark {
|
||||
.scrollbar-dark-sidebar {
|
||||
scrollbar-color: rgba(15,23,42,0.9) rgba(15,23,42,0.3);
|
||||
}
|
||||
.scrollbar-light-sidebar {
|
||||
scrollbar-color: rgba(219, 234, 254, 1.0) rgba(219, 234, 254,0.3);
|
||||
}
|
||||
.scrollbar-main {
|
||||
scrollbar-color: rgba(156, 163, 175,0.9) rgba(156, 163, 175,0.3);
|
||||
}
|
||||
|
||||
.scrollbar-dark-sidebar::-webkit-scrollbar {
|
||||
background-color: rgba(15,23,42,0.3);
|
||||
}
|
||||
.scrollbar-dark-sidebar::-webkit-scrollbar-thumb {
|
||||
background: rgba(15,23,42,0.9);
|
||||
}
|
||||
|
||||
.scrollbar-light-sidebar::-webkit-scrollbar {
|
||||
background-color: rgba(219, 234, 254, 0.3);
|
||||
}
|
||||
.scrollbar-light-sidebar::-webkit-scrollbar-thumb {
|
||||
background: rgba(219, 234, 254, 1.0);
|
||||
}
|
||||
|
||||
.scrollbar-main::-webkit-scrollbar {
|
||||
background-color: rgba(156, 163, 175, 0.3);
|
||||
}
|
||||
.scrollbar-main::-webkit-scrollbar-thumb {
|
||||
background: rgba(156, 163, 175, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.ds-card-search-hl strong {
|
||||
@apply bg-lime-200 dark:bg-lightblue-700 italic font-bold px-1 bg-opacity-60 dark:bg-opacity-60;
|
||||
}
|
||||
}
|
||||
@import "./custom-components.css";
|
||||
@import "./custom-utilities.css";
|
||||
|
||||
Reference in New Issue
Block a user