lukas/timetracker
1
0
Fork 0
Code Issues 27 Pull Requests 4 Actions Packages Projects 1 Releases 20 Wiki Activity

Improve session list

Browse Source
This commit is contained in:
Lukáš Kucharczyk
2023-01-05 22:00:08 +01:00
parent e6b5804e37
commit 76bf03b482
4 changed files with 201 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
src/web/tracker/static/base.css
View File

@ -750,8 +750,12 @@ select {
display: flex;
}
.grid {
display: grid;
.h-4 {
height: 1rem;
}
.h-5 {
height: 1.25rem;
}
.min-h-screen {
@ -762,12 +766,20 @@ select {
width: 100%;
}
.max-w-screen-lg {
max-width: 1024px;
.w-7 {
width: 1.75rem;
}
.grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
.w-4 {
width: 1rem;
}
.w-5 {
width: 1.25rem;
}
.max-w-screen-lg {
max-width: 1024px;
}
.flex-col {
@ -782,6 +794,10 @@ select {
align-items: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
@ -810,8 +826,8 @@ select {
border-radius: 0.75rem;
}
.border {
border-width: 1px;
.rounded-lg {
border-radius: 0.5rem;
}
.border-gray-200 {
@ -819,19 +835,24 @@ select {
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.border-red-900 {
--tw-border-opacity: 1;
border-color: rgb(127 29 29 / var(--tw-border-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-red-700 {
.bg-green-600 {
--tw-bg-opacity: 1;
background-color: rgb(185 28 28 / var(--tw-bg-opacity));
background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}
.bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.bg-red-600 {
--tw-bg-opacity: 1;
background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}
.p-4 {
@ -842,15 +863,21 @@ select {
padding: 0.5rem;
}
.p-1 {
padding: 0.25rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.pl-3 {
padding-left: 0.75rem;
}
@ -863,6 +890,10 @@ select {
text-align: center;
}
.text-right {
text-align: right;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
@ -883,9 +914,9 @@ select {
line-height: 1.75rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.font-semibold {
@ -902,18 +933,47 @@ select {
color: rgb(203 213 225 / var(--tw-text-opacity));
}
.text-red-400 {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity));
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-200 {
transition-duration: 200ms;
}
.ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.dark form label {
--tw-text-opacity: 1;
color: rgb(148 163 184 / var(--tw-text-opacity));
}
.dark form input,.dark select,.dark textarea {
.dark form input,.dark
select,.dark
textarea {
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(15 23 42 / var(--tw-border-opacity));
@ -923,30 +983,69 @@ select {
color: rgb(241 245 249 / var(--tw-text-opacity));
}
form input[type=submit] {
#session-table {
display: grid;
grid-template-columns: repeat(3, 2fr) 0.5fr 1fr;
}
#button-container button {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.hover\:bg-green-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(88 28 135 / var(--tw-bg-opacity));
padding: 0.5rem;
background-color: rgb(21 128 61 / var(--tw-bg-opacity));
}
.hover\:border-dotted:hover {
border-style: dotted;
}
.hover\:border-white:hover {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.hover\:bg-orange-700:hover {
.hover\:bg-blue-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(194 65 12 / var(--tw-bg-opacity));
background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}
.hover\:bg-red-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}
.hover\:underline:hover {
text-decoration-line: underline;
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-green-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
}
.focus\:ring-blue-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}
.focus\:ring-red-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px;
}
.focus\:ring-offset-blue-200:focus {
--tw-ring-offset-color: #bfdbfe;
}
.dark .dark\:border-white {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
@ -999,4 +1098,4 @@ form input[type=submit] {
.md\:flex-row {
flex-direction: row;
}
}
}