Theodor-Springmann-Stiftung/musenalm
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/musenalm.git synced 2025-10-29 01:05:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Titel

Browse Source
This commit is contained in:
Simon Martens
2025-06-04 13:31:30 +02:00
parent 4cf1c2ffd3
commit dccc3ed8ca
5 changed files with 421 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
views/transform/form.css
View File

@@ -1,8 +1,8 @@
@layer components {
.dbform .inputwrapper {
@apply rounded-xs border-2 border-transparent px-3
@apply rounded-xs border-2 border-transparent pl-3 pr-1.5
py-1 pb-1.5 border-l-2 focus-within:border-l-slate-600
bg-slate-200 focus-within:bg-slate-100 transition-all duration-100;
bg-stone-100 focus-within:bg-slate-100 transition-all duration-100;
}
.dbform .inputwrapper .inputlabel {
@@ -22,6 +22,10 @@
@apply mt-1 block w-full focus:border-none focus:outline-none;
}
.dbform .inputwrapper .inputtextarea {
@apply mt-1 block w-full focus:border-none focus:outline-none min-h-[20rem] resize-y;
}
.dbform .submitbutton {
@apply w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-slate-700 hover:bg-slate-800 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 active:bg-slate-900 transition-all duration-75;
}
@@ -30,6 +34,10 @@
@apply w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md text-sm font-medium text-gray-800 bg-stone-200 hover:bg-stone-300 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 no-underline;
}
.dbform div-menu {
@apply relative inline-block;
}
/* Multi-Select-Role example styles */
.msr-selected-items-container {
@apply rounded-md;
@@ -270,104 +278,28 @@
@apply disabled:hidden;
}
.ts-menu {
position: relative;
display: inline-block;
}
.ts-menu-popup {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: white;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;
min-width: 220px; /* Slightly wider for longer labels */
margin-top: 4px;
}
.ts-menu-toggle-button {
padding: 10px 15px;
font-size: 1rem;
color: #ffffff;
background-color: #3498db;
border: none;
border-radius: 6px;
cursor: pointer;
transition:
background-color 0.2s ease,
opacity 0.2s ease;
}
.ts-menu-toggle-button:hover {
background-color: #2980b9;
}
.ts-menu-toggle-button:focus {
outline: 2px solid #2980b9;
outline-offset: 2px;
}
.ts-menu-toggle-button:disabled {
background-color: #bdc3c7;
cursor: not-allowed;
opacity: 0.7;
@apply hidden absolute top-full left-0 bg-white border border-gray-300 rounded-xs shadow z-50 min-w-[200px] mt-1;
}
.ts-menu-list {
list-style: none;
padding: 8px 0;
padding: 0px 0;
margin: 0;
}
.ts-menu-list-item {
.ts-menu-list li {
@apply cursor-pointer ml-0 list-none px-2.5 py-1 hover:bg-gray-100 border-b;
}
.ts-menu-placeholder-message {
padding: 10px 15px;
font-style: italic;
color: #7f8c8d;
text-align: center;
display: none;
.ts-menu-list li:last-child {
@apply border-b-0;
}
.ts-menu-item-action {
display: block;
width: 100%;
text-align: left;
padding: 10px 15px;
background: none;
border: none;
cursor: pointer;
font-size: 0.95rem;
color: #333;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
.ts-menu-item-action:hover {
background-color: #ecf0f1;
}
.ts-item-is-selected {
font-weight: bold;
color: #2980b9;
background-color: #e8f4f8;
}
.ts-content-close-button {
position: absolute;
top: 8px; /* Adjusted for better alignment with padding */
right: 8px; /* Adjusted */
background-color: #e74c3c;
color: white;
border: none;
border-radius: 50%;
width: 22px; /* Slightly larger */
height: 22px; /* Slightly larger */
font-size: 13px;
line-height: 20px;
text-align: center;
cursor: pointer;
font-weight: bold;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: background-color 0.2s ease;
}
.ts-content-close-button:hover {
background-color: #c0392b;
.ts-menu-list li button {
@apply w-full cursor-pointer text-left text-gray-700;
}
.form-submit-button {
margin-top: 20px;
padding: 12px 20px;