1074 lines
No EOL
21 KiB
CSS
1074 lines
No EOL
21 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
/*
|
|
|
|
MY OWN TABLER (BETA 19, 20, 21, 22, and v1.1.1, and v1.4.0) FIXES
|
|
|
|
*/
|
|
|
|
/* scrollbar styling broke by adding a left margin... see https://github.com/tabler/tabler/issues/2271 -- this might not be the right fix: */
|
|
:root {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* that single-story "a" looks terrible IMO, so disable cv11. See all Inter font features here: https://rsms.me/inter/#features */
|
|
body {
|
|
font-feature-settings: "liga" 0, "calt" 1, "cv03", "cv04";
|
|
}
|
|
|
|
/* vertical spacing fix... ? hopefully not bad; ca. Tabler beta 20 */
|
|
.row-cards {
|
|
align-content: flex-start;
|
|
}
|
|
|
|
/* override tabler's .navbar-brand:hover style */
|
|
.navbar h1.navbar-brand:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* override tabler's style that removes spacing from before the down-arrow
|
|
because it assumes it is on its own */
|
|
.dropdown-toggle-split::after {
|
|
margin-left: 0.4em;
|
|
}
|
|
|
|
/* Tabler's default .input-group styles don't work well for
|
|
a textbox that has an icon in it, because it's contained in
|
|
a parent div. this takes care of that by removing the >. */
|
|
.input-group:not(.has-validation) :not(:last-child) :not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.input-group :not(:first-child) :not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
|
|
margin-left: -1px;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
/* broke in v1.4 (clicking on items in Map view) */
|
|
.btn-actions {
|
|
align-items: center;
|
|
}
|
|
|
|
/* broke sometime between Beta 22 and v1.1.1 */
|
|
.ts-wrapper.multi .ts-control > div {
|
|
margin: 0;
|
|
font-size: 12px;
|
|
border: none; /* no idea why tabler adds a border... */
|
|
}
|
|
.ts-control {
|
|
border: none;
|
|
padding: 0;
|
|
gap: 2px;
|
|
line-height: inherit; /* for some reason, their default of 18px makes the multi and single controls different heights */
|
|
}
|
|
.ts-control input {
|
|
min-width: 4rem;
|
|
font-size: 14px;
|
|
}
|
|
.ts-control .item {
|
|
margin: 0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* the tabler-defined height of 1.25rem shifts alignment to be off when inputs are in a row - removing it equalizes heights and alignment of form elements */
|
|
.dropdown-item-indicator {
|
|
height: inherit;
|
|
margin-left: 0; /* this fixes the -.25rem value that causes images to be cut off */
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.page::-webkit-scrollbar-track {
|
|
margin-top: 56px !important;
|
|
}
|
|
|
|
.translucent {
|
|
backdrop-filter: blur(15px);
|
|
-webkit-backdrop-filter: blur(15px);
|
|
}
|
|
|
|
.translucent:not([data-bs-theme=dark]) {
|
|
--tblr-navbar-bg: rgba(255, 255, 255, .75);
|
|
}
|
|
|
|
.container-xl {
|
|
transition: max-width .75s cubic-bezier(0, 0, 0.2, 1); /* modified "ease-out" */
|
|
}
|
|
|
|
#page-content,
|
|
.filter-results {
|
|
transition: opacity .2s linear;
|
|
}
|
|
|
|
#page-content.opacity0,
|
|
.filter-results.opacity0 {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.thumbhash-container {
|
|
display: grid;
|
|
margin: 0 auto;
|
|
max-height: inherit;
|
|
}
|
|
|
|
.thumbhash-container > * {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.thumbhash {
|
|
width: 100%;
|
|
background: black; /* when animated with "breathing" (the "radiate" keyframes), Chrome renders strange fade-to-white on bottom and right edges, unless bg is black */
|
|
}
|
|
|
|
/* Used to indicate something is loading/processing */
|
|
.breathing {
|
|
animation: 3s ease-in 0s infinite radiate;
|
|
}
|
|
@keyframes radiate {
|
|
50% { opacity: 0.65; }
|
|
}
|
|
|
|
.thumbhash-container .content {
|
|
object-fit: contain;
|
|
width: 100%;
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 1s;
|
|
}
|
|
|
|
.fade-out {
|
|
animation: reverse forwards fadeIn 1s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
.loader-supercontainer {
|
|
position: relative;
|
|
display: grid;
|
|
height: 100%;
|
|
overflow: hidden; /* mainly for rounded corners, so the sharp corners don't stick out */
|
|
place-items: center;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.loader-supercontainer > * {
|
|
grid-area: 1 / 1; /* the content and the loader are superimposed on each other, without position: absolute -- neat! now the container considers both elements' sizes */
|
|
}
|
|
|
|
.loader-container {
|
|
padding: 1rem;
|
|
place-self: stretch;
|
|
}
|
|
|
|
.loader-container-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
height: 100%;
|
|
}
|
|
|
|
.loader-container .loader {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.navbar h1.navbar-brand {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
|
|
header .logo {
|
|
width: 140px;
|
|
max-height: 1.5em;
|
|
}
|
|
|
|
.logo-dark {
|
|
display: none;
|
|
}
|
|
|
|
[data-bs-theme=dark] .logo-light {
|
|
display: none;
|
|
}
|
|
|
|
[data-bs-theme=dark] .logo-dark {
|
|
display: block;
|
|
}
|
|
|
|
.navbar-minimal {
|
|
background: rgba(233, 239, 244, .6);
|
|
-webkit-backdrop-filter: blur(4px);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
/* TODO: I don't remember having to set this before...
|
|
stolen from the .dark-theme .form-control styles,
|
|
but I don't want to enable dark-theme on this header,
|
|
since that affects dropdowns too - TODO: are these variables?
|
|
[data-bs-theme=dark] .form-control,
|
|
[data-bs-theme=dark] .form-select {
|
|
background-color: #1a2234;
|
|
border-color: #243049;
|
|
}
|
|
[data-bs-theme=dark] .form-control,
|
|
[data-bs-theme=dark] .form-select,
|
|
[data-bs-theme=dark] .ts-control {
|
|
color: #f8fafc;
|
|
}
|
|
.ts-wrapper {
|
|
margin-left: -1px;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
[data-bs-theme=dark] .ts-control {
|
|
padding-top: inherit;
|
|
padding-bottom: inherit;
|
|
padding-right: inherit;
|
|
padding: inherit inherit inherit 8px;
|
|
}
|
|
[data-bs-theme=dark] .ts-wrapper {
|
|
width: 100px;
|
|
}
|
|
*/
|
|
|
|
/* my own addition to prevent wrapping when it's crucial to not get taller */
|
|
.ts-control.single-line {
|
|
flex-wrap: nowrap;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ts-wrapper img {
|
|
height: 1.5em;
|
|
max-width: 1.5em;
|
|
}
|
|
|
|
.navbar .ts-wrapper {
|
|
/* prevent tomselects from growing unbounded horizontally */
|
|
width: 250px;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
max-height: 75vh;
|
|
/* TODO: overflow-y: auto is needed here, but that breaks other dropdowns' overflow-x! (like the Timelinize dropdown menu) */
|
|
}
|
|
|
|
form .dropdown-menu {
|
|
max-height: 300px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.dropdown-menu .dropdown-options .dropdown-item {
|
|
min-width: 0;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
font-size: small;
|
|
text-align: center;
|
|
display: block;
|
|
}
|
|
|
|
/* necessary after upgrading to Tabler v1.0.0-beta.21 -- not sure why though */
|
|
.icon {
|
|
min-width: var(--tblr-icon-size);
|
|
}
|
|
|
|
/* This is needed to make date dropdowns fill the width, for some reason */
|
|
.filter .input-icon {
|
|
flex: 1;
|
|
}
|
|
|
|
|
|
|
|
|
|
video {
|
|
max-width: 100%;
|
|
}
|
|
audio {
|
|
width: 100%;
|
|
}
|
|
|
|
.tl-item-media img,
|
|
.tl-item-media video,
|
|
.tl-item-media canvas {
|
|
max-height: 250px;
|
|
}
|
|
|
|
.page-num-container {
|
|
display: flex;
|
|
}
|
|
|
|
|
|
.avatar-xxs {
|
|
--tblr-avatar-size: 1rem;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
dfn {
|
|
text-decoration: underline dashed;
|
|
}
|
|
|
|
|
|
|
|
.job-preview .icon {
|
|
--tblr-icon-size: 3rem;
|
|
}
|
|
|
|
|
|
.dropdown-menu .recent-jobs-list {
|
|
min-width: 450px;
|
|
}
|
|
|
|
/*
|
|
My own modification to make dropdown toggling smooth and pleasant.
|
|
TODO: This requires some work... it requires that all dropdowns are in a 'position: relative' container, and a few other nuances (like with responsive design, collapsed menubar, etc)
|
|
*/
|
|
/* .dropdown-menu:not(.ts-dropdown),
|
|
.navbar-nav .dropdown-menu {
|
|
position: absolute;
|
|
display: block;
|
|
visibility: hidden;
|
|
transition: all .2s;
|
|
top: 100%;
|
|
left: 0;
|
|
opacity: 0;
|
|
transform: scale(0.75) translateY(-30px);
|
|
}
|
|
.dropdown-menu-end,
|
|
.navbar-nav .dropdown-menu-end {
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
.dropdown-menu.show {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0em);
|
|
} */
|
|
|
|
|
|
|
|
/* TODO: wish the z-index wasn't a problem */
|
|
/* .page-header-overlap::after {
|
|
--wails-draggable: drag;
|
|
} */
|
|
|
|
|
|
|
|
label.dropdown-item,
|
|
.system-file-picker,
|
|
.system-folder-picker,
|
|
.dropdown-item,
|
|
.dropdown-toggle,
|
|
.nav-link,
|
|
.card-link,
|
|
.link-secondary,
|
|
a {
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.input-group .form-select {
|
|
width: auto;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.static-menu .dropdown-menu {
|
|
display: inline-block;
|
|
width: 100%;
|
|
position: relative;
|
|
top: 0;
|
|
box-shadow: none;
|
|
z-index: inherit; /* don't cover actual dropdowns */
|
|
}
|
|
|
|
|
|
.static-menu .dropdown-menu .dropdown-header {
|
|
background: inherit;
|
|
top: calc(-1 * var(--tblr-dropdown-padding-y));
|
|
z-index: inherit;
|
|
}
|
|
|
|
.btn-dark {
|
|
--tblr-btn-border-color: #485f7a;
|
|
}
|
|
|
|
.pagination .btn-list {
|
|
align-items: center;
|
|
}
|
|
|
|
/* I think these buttons look better slightly taller */
|
|
.pagination .btn-list .btn {
|
|
--tblr-btn-padding-y: .5rem;
|
|
}
|
|
|
|
/* for some reason, the disabled button looks taller next to its
|
|
regular, un-disabled counterpart; lightening the border and very
|
|
slightly reducing the padding makes a subtle improvement IMO */
|
|
.pagination .btn-list .btn.disabled {
|
|
--tblr-btn-padding-y: .45rem;
|
|
--tblr-btn-disabled-border-color: #a6a6a6;
|
|
}
|
|
|
|
|
|
|
|
/* surprised I have to say this tbh */
|
|
a.disabled {
|
|
color: var(--tblr-text-secondary);
|
|
pointer-events: none;
|
|
cursor: default;
|
|
}
|
|
|
|
|
|
.emoji {
|
|
font-family: "Twemoji Mozilla",
|
|
"Apple Color Emoji",
|
|
"Segoe UI Emoji",
|
|
"Segoe UI Symbol",
|
|
"Noto Color Emoji",
|
|
"EmojiOne Color",
|
|
"Android Emoji";
|
|
}
|
|
|
|
.message-reactions {
|
|
margin-top: .5em;
|
|
margin-bottom: -1em;
|
|
}
|
|
|
|
.message-reaction {
|
|
cursor: default;
|
|
background: var(--tblr-card-bg);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
|
|
font-size: 85%;
|
|
border-radius: .5rem;
|
|
padding: .5rem;
|
|
margin-right: .25rem;
|
|
line-height: .75;
|
|
}
|
|
|
|
.message-reaction .emoji {
|
|
vertical-align: sub;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
|
|
|
|
.file-picker .btn.dropdown-toggle {
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
.file-picker-path {
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
/*
|
|
File picker styles are designed so that the contents of the table have the vertical
|
|
scrollbar when there is an overflow-y. The table header is stickied. The downside
|
|
is that the scrollbar goes onto the table header, which is not strictly necessary,
|
|
but seeing as scrollbars take up horizontal space on most platforms, this actually
|
|
is a good thing since it keeps cells aligned.
|
|
|
|
To make the table body have the scrollbar, but not the table header, and not need
|
|
sticky for the header, enable these styles:
|
|
|
|
.file-picker table {
|
|
display: flex;
|
|
flex-flow: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.file-picker table thead {
|
|
flex: 0 0 auto;
|
|
}
|
|
.file-picker table tbody {
|
|
flex: 1 1 auto;
|
|
display: block;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
.file-picker table tr {
|
|
width: 100%;
|
|
display: table;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
However! Doing things this way will cause cells to be slightly disjoint from
|
|
their header cells, since the scrollbar has width which squishes the cells'
|
|
widths slightly (but not on touch platforms, presumably). It also causes cells
|
|
to stop auto-sizing based on the width of their contents; i.e. all cells are
|
|
the same width, which looks dumb and is less useful when one column, such as
|
|
filename, almost always need the maximum width possible.
|
|
|
|
So, for simplicity and the benefits described, I've decided to not use these
|
|
styles. But it took hours to figure them out!
|
|
*/
|
|
#modal-file-picker .modal-body,
|
|
#modal-timeline-folder .modal-body {
|
|
min-height: 0;
|
|
display: flex;
|
|
}
|
|
.file-picker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
.file-picker thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.file-picker-table {
|
|
user-select: none;
|
|
background: var(--tblr-bg-forms);
|
|
border: 1px solid var(--tblr-border-color);
|
|
border-top: 0;
|
|
}
|
|
|
|
.file-picker-table tr:hover {
|
|
background: rgba(var(--tblr-primary-rgb), .04);
|
|
}
|
|
|
|
.file-picker-table tr.selected {
|
|
background: var(--tblr-indigo);
|
|
color: var(--tblr-light);
|
|
}
|
|
|
|
.file-picker-table thead th {
|
|
position: sticky;
|
|
}
|
|
|
|
.file-picker-table td {
|
|
word-wrap: anywhere;
|
|
}
|
|
|
|
.file-picker-table td:nth-child(2),
|
|
.file-picker-table td:nth-child(3) {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.file-picker-up {
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.content {
|
|
display: block;
|
|
}
|
|
|
|
.rounded {
|
|
overflow: hidden; /* prevent pointy corners from sticking out past the border-radius; IMO tabler should do this, but they use simple background-image */
|
|
}
|
|
|
|
.card-img-top .content, .card-img-bottom .content, /* images */
|
|
.card-img-top.content, .card-img-bottom.content { /* videos */
|
|
object-fit: cover;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
/* TODO: still working on this */
|
|
.map-container {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
#map {
|
|
flex: 1;
|
|
}
|
|
|
|
.minidisp-media {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
align-content: stretch;
|
|
}
|
|
|
|
.minidisp-media > a {
|
|
flex: 1;
|
|
}
|
|
|
|
.minidisp-media > a > * {
|
|
min-width: 180px;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.minidisp-media video {
|
|
object-fit: cover;
|
|
}
|
|
|
|
.minidisp-media .thumbhash {
|
|
max-height: inherit;
|
|
height: 100%;
|
|
}
|
|
|
|
.minidisp-media .thumbhash-container {
|
|
margin: 0;
|
|
}
|
|
|
|
.minidisp-media .thumbhash-container .content {
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.minidisp-media-xl .thumbhash-container,
|
|
.minidisp-media-xl .content {
|
|
max-height: 500px;
|
|
}
|
|
.minidisp-media-xl > a > * {
|
|
width: auto;
|
|
}
|
|
.minidisp-media-l .thumbhash-container,
|
|
.minidisp-media-l .content {
|
|
max-height: 350px;
|
|
}
|
|
.minidisp-media-m .thumbhash-container,
|
|
.minidisp-media-m .content {
|
|
max-height: 250px;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
THE FOLLOWING STYLES WERE REMOVED FROM TABLER 1.0 BETA 17.
|
|
THESE ARE TAKEN FROM BETA 16 UNTIL (IF?) WE CAN MOVE TO THE NEW SETUP.
|
|
TRACK THIS ISSUE: https://github.com/tabler/tabler/issues/1462
|
|
*/
|
|
.list-timeline {
|
|
position: relative;
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.list-timeline .list-timeline-card-item:not(.list-timeline-date-card) {
|
|
position: relative; /* the sticky time is sticky through the scrolling of the card */
|
|
margin-bottom: 1.5rem;
|
|
z-index: 1; /* above the timeline line thingie, but below the date sticky -- this becomes the sticky time's z-index since this is its relative ancestor */
|
|
}
|
|
|
|
.list-timeline-icon {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
color: #fff;
|
|
text-align: center;
|
|
background: var(--tblr-muted);
|
|
border-radius: 100rem;
|
|
}
|
|
|
|
.list-timeline-icon .icon {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.list-timeline-content {
|
|
margin-left: 3.5rem;
|
|
}
|
|
|
|
.list-timeline {
|
|
/* See https://github.com/w3c/csswg-drafts/issues/2496 - there doesn't seem to be a way
|
|
to have multiple levels of stickies (not siblings) that don't overlap, but a hack is to
|
|
make sure the first level stickies all have the same height and then set the top of the
|
|
second level stickies to that height */
|
|
--date-height: 60px;
|
|
}
|
|
|
|
.list-timeline-date-anchor {
|
|
position: relative; /* the date sticky scrolls through all the items in this container */
|
|
}
|
|
|
|
.list-timeline-time-container {
|
|
float: right;
|
|
margin-left: 1rem;
|
|
color: var(--tblr-muted);
|
|
height: 100%;
|
|
}
|
|
|
|
/* because the date and time elements are sticky, we have to be careful
|
|
what we position relative since the next relative ancestor needs to be
|
|
the one that it is stuck to when scrolling */
|
|
.list-timeline-date {
|
|
font-size: 110%;
|
|
font-weight: bold;
|
|
padding-top: 10px;
|
|
color: var(--tblr-body-color);
|
|
position: sticky;
|
|
top: 0;
|
|
height: var(--date-height);
|
|
background-color: var(--tblr-body-bg);
|
|
z-index: 2; /* on top of time that should slide underneath it */
|
|
}
|
|
|
|
.list-timeline-time {
|
|
position: sticky;
|
|
top: var(--date-height);
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.list-timeline:not(.list-timeline-simple)::before {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: calc(7.5rem + 2px);
|
|
z-index: 1;
|
|
display: block;
|
|
width: 2px;
|
|
content: "";
|
|
background-color: var(--tblr-border-color);
|
|
}
|
|
|
|
.list-timeline:not(.list-timeline-simple) .list-timeline-card-item {
|
|
min-height: 40px;
|
|
}
|
|
|
|
.list-timeline:not(.list-timeline-simple) .list-timeline-date-card {
|
|
min-height: 80px;
|
|
}
|
|
|
|
.list-timeline:not(.list-timeline-simple) .list-timeline-icon {
|
|
top: 0;
|
|
left: 6.5rem;
|
|
}
|
|
|
|
.list-timeline:not(.list-timeline-simple) .list-timeline-content {
|
|
padding: .625rem 0 0 10rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.list-timeline:not(.list-timeline-simple) .list-timeline-time-container {
|
|
position: absolute;
|
|
top: .5rem;
|
|
left: 0;
|
|
width: 5.5rem;
|
|
margin: 0;
|
|
text-align: right;
|
|
}
|
|
}
|
|
/* END STYLES RESTORED FROM TABLER BETA 16 */
|
|
|
|
|
|
/* when displaying a timeline outside of a card, and instead showing individual items
|
|
within a card, the card creates extra padding/whitespace that we need to account
|
|
for, since it kind of requires elements next to the card to move down a little to
|
|
better align with its content: 1rem down works well
|
|
*/
|
|
.list-timeline:not(.list-timeline-simple):before {
|
|
top: 1rem;
|
|
width: 3px;
|
|
--tblr-border-color: #c3d3d9;
|
|
left: calc(10.25rem + 2px);
|
|
z-index: 0; /* must be behind the timeline elements */
|
|
}
|
|
|
|
.list-timeline:not(.list-timeline-simple) .list-timeline-card-item .list-timeline-time-container {
|
|
top: 1.75rem;
|
|
}
|
|
|
|
.list-timeline:not(.list-timeline-simple) .list-timeline-card-item .list-timeline-icon {
|
|
top: 1rem;
|
|
}
|
|
|
|
|
|
/* we made the timeline icons a bit bigger and gave more space for the time display */
|
|
@media screen and (min-width:768px) {
|
|
.list-timeline-icon {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
}
|
|
.list-timeline-icon .icon {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
.list-timeline:not(.list-timeline-simple) .list-timeline-icon {
|
|
left: 9rem;
|
|
}
|
|
.list-timeline:not(.list-timeline-simple) .list-timeline-content {
|
|
padding: .75rem 0 0 13.5rem;
|
|
}
|
|
.list-timeline:not(.list-timeline-simple) .list-timeline-time-container {
|
|
width: 8rem;
|
|
}
|
|
}
|
|
|
|
.message-content {
|
|
word-break: break-word;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.paper {
|
|
background: white;
|
|
padding: 1.5em 2em;
|
|
}
|
|
|
|
.paper-fold {
|
|
position: relative;
|
|
background: linear-gradient(-150deg, transparent 1.5em, #fff 0);
|
|
border-radius: 8px;
|
|
box-shadow: 0 10px 13px -13px rgba(0, 0, 0, 0.25)
|
|
}
|
|
|
|
.paper-fold::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background: linear-gradient(to left bottom, #fff0 50%, rgb(255, 255, 255) 0, rgb(239, 239, 239)) no-repeat 100% 0;
|
|
box-shadow: -10px 10px 15px -5px rgba(0,0,0,.15);
|
|
width: 1.73em;
|
|
height: 3em;
|
|
transform: translateY(-1.3em) rotate(-30deg);
|
|
transform-origin: bottom right;
|
|
border-bottom-left-radius: inherit;
|
|
}
|
|
|
|
iframe {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* a ribbon on the top-left of a card can cover some of the
|
|
card-body, so this class adds a slight margin to avoid that */
|
|
.margin-for-ribbon-top-left {
|
|
margin-left: 40px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#app-loader {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
background: rgb(243 243 243);
|
|
backdrop-filter: blur(10px); /* NB: this breaks z-index of dropdowns, esp. when combined with the navbar-overlap layout... */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999; /* gahhh why does bootstrap/tabler use z-index on everything!? */
|
|
}
|
|
|
|
/* From https://cssloaders.github.io/ */
|
|
#app-loader .app-loader,
|
|
.slow-loader {
|
|
display: block;
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
margin: 50px auto;
|
|
animation: loaderRotate 1s linear infinite;
|
|
}
|
|
.modal-body .slow-loader {
|
|
margin: 25px auto;
|
|
}
|
|
#app-loader .app-loader::before,
|
|
#app-loader .app-loader::after,
|
|
.slow-loader::before,
|
|
.slow-loader::after {
|
|
content: "";
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
inset: 0px;
|
|
border-radius: 50%;
|
|
border: 5px solid var(--tblr-link-color);
|
|
animation: loaderPrixClipFix 2s linear infinite alternate;
|
|
}
|
|
#app-loader .app-loader::after,
|
|
.slow-loader::after {
|
|
border-color: var(--tblr-tertiary-color);
|
|
animation: loaderPrixClipFix 2s linear infinite alternate, loaderRotate 0.5s linear infinite reverse;
|
|
inset: 6px;
|
|
}
|
|
@keyframes loaderRotate {
|
|
0% {transform: rotate(0deg)}
|
|
100% {transform: rotate(360deg)}
|
|
}
|
|
@keyframes loaderPrixClipFix {
|
|
0% {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
|
|
25% {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
|
|
50% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
|
|
75% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
|
|
100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.air-datepicker {
|
|
/* TODO: this could be a problem if a modal is opened while a separate datepicker is open */
|
|
z-index: 1056; /* one more than --tblr-modal-zindex */
|
|
}
|
|
.air-datepicker-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: stretch;
|
|
}
|
|
.air-datepicker-button {
|
|
height: auto;
|
|
padding: 10px 5px;
|
|
flex: 1;
|
|
min-width: 45%;
|
|
}
|
|
|
|
|
|
.noUi-base,
|
|
.noUi-handle {
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.page-header .tl-date-picker,
|
|
.navbar .tl-date-picker {
|
|
min-width: 300px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#alert-container {
|
|
position: fixed;
|
|
z-index: 1021; /* .sticky-top is 1020... */
|
|
top: 65px;
|
|
right: 0;
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
width: 100%;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.alert-timer-progress-bar-container {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
grid-column: auto !important;
|
|
overflow: hidden;
|
|
border-bottom-right-radius: 8px;
|
|
}
|
|
|
|
.alert-timer-progress-bar {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 3px;
|
|
background: rgba(0, 0, 0, .2);
|
|
}
|
|
|
|
.alert-show {
|
|
animation: alert-toast-show 500ms;
|
|
}
|
|
.alert-hide {
|
|
animation: alert-toast-hide 250ms forwards;
|
|
}
|
|
|
|
@keyframes alert-toast-show {
|
|
0% { transform: translateY(-0.625em) rotateZ(2deg); }
|
|
33% { transform: translateY(0) rotateZ(-2deg); }
|
|
66% { transform: translateY(0.3125em) rotateZ(2deg); }
|
|
100% { transform: translateY(0) rotateZ(0deg); }
|
|
}
|
|
@keyframes alert-toast-hide {
|
|
100% {
|
|
transform: scale(.4);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Tabler 1.1/1.2 changed alert styles, and I don't like it exactly. If
|
|
there's no description/message, it expects you to not use .alert-heading
|
|
either; i.e. you either use both .alert-heading and .alert-description
|
|
or neither, but that makes building dynamic alerts like we do a little
|
|
more tedious. Our alerts always have a "heading", but not always a
|
|
description. To simplify my code, I'm swapping which tag has the margin.
|
|
This way, we only add space below a heading if a description is present.
|
|
*/
|
|
.alert-heading {
|
|
margin-bottom: 0;
|
|
}
|
|
.alert-description {
|
|
margin-top: .25rem;
|
|
} |