mirror of
https://github.com/TheAnachronism/docspell.git
synced 2025-02-22 14:03:26 +00:00
7beda302b2
Show also "empty tags", where the count is 0. Before only tags with a count > 0 were displayed. When searching this is fine, but when using drag&drop to attach tags to items, it is good to see all. They can be hidden via a button. The tags are now ordered by their count descending, but regarding to the overall count – not the current view. Otherwise the tags are reordered when clicking on them, which is confusing. Also it then shows the "more important" (most used) tags first, even when the result is a subset. A fix was made related to updating the menu. When coming back from the detail view where a tag with prior count=0 was associated, the menu didn't show it, because it relied on a previous state, where this tag were not included.
504 lines
10 KiB
CSS
504 lines
10 KiB
CSS
/* Docspell CSS */
|
|
/* https://www.color-hex.com/color/f0f8ff
|
|
* https://www.color-hex.com/color-palette/1637
|
|
*/
|
|
|
|
.calevent-input {
|
|
border: 1px solid rgba(34,36,38,.15);
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 0 0 1em;
|
|
}
|
|
.calevent-input input.time-input {
|
|
border: 0 !important;
|
|
font-family: monospace !important;
|
|
text-align: center;
|
|
}
|
|
.calevent-input .separator {
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
padding-top: 2%;
|
|
}
|
|
.calevent-input label {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: small;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
.calevent-input .datetime.separator {
|
|
margin: 0 1em;
|
|
}
|
|
|
|
.default-layout .ui.menu a.search-menu-toggle {
|
|
position: absolute;
|
|
left: -2px;
|
|
top: 18px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.default-layout .icons.search-corner-icons {
|
|
position: relative;
|
|
top: 10px;
|
|
left: 8px;
|
|
}
|
|
|
|
.default-layout .ui.icon.menu .label.item {
|
|
padding: 0 0.5em 0 0;
|
|
}
|
|
|
|
.default-layout .right-float {
|
|
float: right;
|
|
}
|
|
.default-layout {
|
|
background: #fff;
|
|
}
|
|
|
|
.default-layout .main-content {
|
|
margin-top: 45px;
|
|
}
|
|
|
|
.default-layout .top-menu {
|
|
background: aliceblue;
|
|
box-shadow: 1px 1px 0px 0px black;
|
|
height: 44px;
|
|
}
|
|
|
|
.default-layout .top-menu a.header.item img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
.default-layout .top-menu a.header.item .content {
|
|
margin-left: 0.5em;
|
|
}
|
|
.default-layout a.icon.item img.image.icon {
|
|
width: 18.75px;
|
|
}
|
|
|
|
.default-layout .ui.multiple.search.dropdown>input.search {
|
|
width: 3.5em;
|
|
}
|
|
.default-layout .ui.multiple.search.dropdown>input.search.long-search {
|
|
width: auto;
|
|
}
|
|
|
|
.default-layout .extracted-text {
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
max-height: 20rem;
|
|
overflow: scroll;
|
|
background: floralwhite;
|
|
padding: 0.8em;
|
|
}
|
|
|
|
.default-layout .card .card-attachment-nav {
|
|
position: absolute;
|
|
left: 4px;
|
|
top: 4px;
|
|
z-index: 8;
|
|
}
|
|
.default-layout .multi-select-mode .ui.card {
|
|
border: 1px dashed rgba(34,36,38, .8);
|
|
}
|
|
.default-layout .ui.card:hover {
|
|
box-shadow: 0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);
|
|
}
|
|
.default-layout .ui.blue.card:hover {
|
|
box-shadow: 0 0 0 1px #d4d4d5,0 2px 0 0 #2185d0,0 2px 10px 0 rgba(34,36,38,.15);
|
|
}
|
|
.default-layout .image.ds-card-image {
|
|
overflow: hidden;
|
|
}
|
|
.default-layout .image.ds-card-image.small {
|
|
max-height: 120px;
|
|
}
|
|
.default-layout .image.ds-card-image.medium {
|
|
max-height: 240px;
|
|
}
|
|
.default-layout .image.ds-card-image.large {
|
|
max-height: 600px;
|
|
}
|
|
.default-layout img.preview-image {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.default-layout .image.ds-card-image img.preview-image.small {
|
|
max-width: 80px;
|
|
}
|
|
.default-layout .image.ds-card-image img.preview-image.medium {
|
|
max-width: 160px;
|
|
}
|
|
.default-layout .image.ds-card-image img.preview-image.large {
|
|
max-width: none;
|
|
}
|
|
|
|
.default-layout .menu .item.active a.right-tab-icon-link {
|
|
position: relative;
|
|
right: -8px;
|
|
}
|
|
|
|
.default-layout .ui.cards .ui.card .content.search-highlight {
|
|
background: rgba(246, 255, 158, 0.1);
|
|
font-size: smaller;
|
|
max-height: 25em;
|
|
overflow: auto;
|
|
}
|
|
.default-layout .ui.cards .ui.card .content.search-highlight .ui.list .item .content .header {
|
|
}
|
|
.default-layout .ui.cards .ui.card .content.search-highlight .ui.list .item .content .description {
|
|
color: rgba(0,0,0,.6);
|
|
margin-left: 0.75em;
|
|
}
|
|
.default-layout .ui.cards .ui.card .content.search-highlight .ui.list .item .content .description strong > em {
|
|
background: rgba(220, 255, 71, 0.6);
|
|
}
|
|
.default-layout .ui.cards .ui.card.current {
|
|
box-shadow: 0 0 6px rgba(0,0,0,0.55);
|
|
}
|
|
|
|
.default-layout .qr-code svg {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
.default-layout .qr-code.bordered svg {
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.markdown-preview {
|
|
overflow: auto;
|
|
max-height: 300px;
|
|
}
|
|
.markdown-split > textarea.markdown-editor {
|
|
height: 100%;
|
|
max-height: 300px;
|
|
width: 100%;
|
|
border: 0;
|
|
border-right: 1px solid #00000060
|
|
}
|
|
textarea.markdown-editor {
|
|
height: 100%;
|
|
max-height: 300px;
|
|
width: 100%;
|
|
border: 0;
|
|
min-height: 5em;
|
|
}
|
|
|
|
.default-layout .job-log {
|
|
background: #181819;
|
|
color: white;
|
|
font-size: smaller;
|
|
overflow: auto;
|
|
padding: 0.5em;
|
|
font-family: monospace,monospace;
|
|
max-height: 75vh;
|
|
}
|
|
|
|
.default-layout .job-log>.debug {
|
|
color: rgba(255,255,255,0.5);
|
|
}
|
|
.default-layout .job-log>.error {
|
|
color: rgba(255,0,0,0.9);
|
|
}
|
|
.default-layout .job-log>.warn {
|
|
color: rgba(255,255,0,0.9);
|
|
}
|
|
|
|
.default-layout .main-content>.grid {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.default-layout .dropzone.dragging {
|
|
background: aliceblue;
|
|
}
|
|
|
|
.default-layout .ui.fluid.container.item-detail-page {
|
|
padding-top: 1em;
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
.default-layout .item-group:not(:first-child) > .ui.horizontal.divider.header.item-list {
|
|
margin-top: 1.5em;
|
|
}
|
|
.default-layout .ui.horizontal.divider.header.item-list {
|
|
margin-bottom: 1em;
|
|
background: rgba(240,248,255,0.4);
|
|
}
|
|
|
|
.default-layout .ui.dropdown .menu .current-drop-target, .header.current-drop-target, .current-drop-target {
|
|
background: rgba(0,0,0,0.2) !important;
|
|
}
|
|
.default-layout .ui.cards.small > .ui.card {
|
|
max-width: 180px;
|
|
}
|
|
.default-layout .ui.cards.small > .ui.card .image {
|
|
max-width: 100px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.default-layout .search-menu {
|
|
box-shadow: 2px 1px 3px rgba(216, 223, 229, 1);
|
|
background-color: aliceblue;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.default-layout .search-menu {
|
|
overflow-y: auto;
|
|
height: calc(100vh - 45px);
|
|
scrollbar-width: none;
|
|
}
|
|
.default-layout .search-menu::-webkit-scrollbar {
|
|
width: 0 !important;
|
|
}
|
|
.default-layout .item-card-list {
|
|
overflow-y: scroll;
|
|
height: calc(100vh - 45px);
|
|
}
|
|
body,html {
|
|
height: inherit;
|
|
}
|
|
}
|
|
|
|
.default-layout .ui.action.input .elm-datepicker--container {
|
|
width: 100%;
|
|
}
|
|
.default-layout .ui.action.input .elm-datepicker--container input.elm-datepicker--input {
|
|
width: 100%;
|
|
padding-left: 2.67142857em;
|
|
padding-right: 1em;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.ui.dimmer.keep-small {
|
|
justify-content: start;
|
|
}
|
|
.ui.modal.keep-small {
|
|
width: 95%;
|
|
}
|
|
.ui.modal.keep-small .scrolling.content {
|
|
min-height: 23rem;
|
|
}
|
|
.ui.modal.keep-small .scrolling.content .menu.transition.visible {
|
|
max-height: 11rem;
|
|
}
|
|
|
|
label span.muted {
|
|
font-size: smaller;
|
|
color: rgba(0,0,0,0.6);
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.width-80 {
|
|
width: 80%;
|
|
}
|
|
|
|
.ui.search.dropdown.open, .ui.selection.dropdown.open {
|
|
z-index: 20;
|
|
}
|
|
|
|
.ui.grid>.ablue.column, .ui.grid>.ablue.row, .ui.grid>.row>.ablue.column {
|
|
background: aliceblue;
|
|
}
|
|
|
|
.ui.ablue.menu, .ui.menu .ablue.item {
|
|
background-color: aliceblue;
|
|
}
|
|
|
|
.ui.ablue-comp.menu, .ui.menu .ablue-comp.item {
|
|
background-color: rgba(255, 247, 240, 1);
|
|
}
|
|
.ui.ablue-comp.header {
|
|
background-color: rgba(255, 247, 240, 1);
|
|
}
|
|
|
|
.ui.ablue-shade.menu, .ui.menu .ablue-shade.item {
|
|
background-color: rgba(216, 223, 229, 1);
|
|
}
|
|
|
|
.ablue-bg {
|
|
background-color: aliceblue;
|
|
}
|
|
.ablue-shade-bg {
|
|
background-color: rgba(216, 223, 229, 1);
|
|
}
|
|
|
|
.ui.selectable.pointer.table tr {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.small-info {
|
|
font-size: smaller;
|
|
color: rgba(0,0,0,0.6);
|
|
}
|
|
.small-info code {
|
|
font-size: smaller;
|
|
}
|
|
|
|
.placeholder-message {
|
|
color: rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.mail-body {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.ui.form textarea.search {
|
|
border: 0;
|
|
}
|
|
|
|
.login-layout, .register-layout {
|
|
background: #708090;
|
|
height: 100vh;
|
|
}
|
|
.login-layout > .ui.footer, .register-layout > .ui.footer {
|
|
background: #708090;
|
|
}
|
|
|
|
.login-layout .login-view, .register-layout .register-view {
|
|
background: #fff;
|
|
position: relative;
|
|
top: 2vh;
|
|
}
|
|
|
|
.invisible {
|
|
display: none !important;
|
|
}
|
|
|
|
.no-margin {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.no-border {
|
|
border: 0 !important;
|
|
}
|
|
|
|
@media (min-height: 320px) {
|
|
.ui.footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: smaller;
|
|
font-family: monospace;
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
|
|
/* Datepicker
|
|
From: https://github.com/CurrySoftware/elm-datepicker/blob/3.1.0/css/elm-datepicker.css
|
|
License: BSD-3-Clause
|
|
*/
|
|
|
|
.elm-datepicker--container.ui.input .elm-datepicker--picker {
|
|
top: 2.7em;
|
|
}
|
|
|
|
|
|
.elm-datepicker--container {
|
|
position: relative; }
|
|
|
|
.elm-datepicker--input:focus {
|
|
outline: 0; }
|
|
|
|
.elm-datepicker--picker {
|
|
position: absolute;
|
|
border: 1px solid #CCC;
|
|
z-index: 10;
|
|
background-color: white; }
|
|
|
|
.elm-datepicker--picker-header,
|
|
.elm-datepicker--weekdays {
|
|
background: #F2F2F2; }
|
|
|
|
.elm-datepicker--picker-header {
|
|
display: flex;
|
|
align-items: center;
|
|
background: aliceblue; }
|
|
|
|
.elm-datepicker--prev-container,
|
|
.elm-datepicker--next-container {
|
|
flex: 0 1 auto;
|
|
cursor: pointer; }
|
|
|
|
.elm-datepicker--month-container {
|
|
flex: 1 1 auto;
|
|
padding: 0.5em;
|
|
display: flex;
|
|
flex-direction: column; }
|
|
|
|
.elm-datepicker--month,
|
|
.elm-datepicker--year {
|
|
flex: 1 1 auto;
|
|
cursor: default;
|
|
text-align: center; }
|
|
|
|
.elm-datepicker--year {
|
|
font-size: 0.6em;
|
|
font-weight: 700; }
|
|
|
|
.elm-datepicker--prev,
|
|
.elm-datepicker--next {
|
|
border: 6px solid transparent;
|
|
background-color: inherit;
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
padding: 0 0.2em; }
|
|
|
|
.elm-datepicker--prev {
|
|
border-right-color: #AAA; }
|
|
.elm-datepicker--prev:hover {
|
|
border-right-color: #BBB; }
|
|
|
|
.elm-datepicker--next {
|
|
border-left-color: #AAA; }
|
|
.elm-datepicker--next:hover {
|
|
border-left-color: #BBB; }
|
|
|
|
.elm-datepicker--table {
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
font-size: 0.8em; }
|
|
.elm-datepicker--table td {
|
|
width: 2em;
|
|
height: 2em;
|
|
text-align: center; }
|
|
|
|
.elm-datepicker--row {
|
|
border-top: 1px solid #F2F2F2; }
|
|
|
|
.elm-datepicker--dow {
|
|
border-bottom: 1px solid #CCC;
|
|
cursor: default; }
|
|
|
|
.elm-datepicker--day {
|
|
cursor: pointer; }
|
|
.elm-datepicker--day:hover {
|
|
background: #F2F2F2; }
|
|
|
|
.elm-datepicker--disabled {
|
|
cursor: default;
|
|
color: #DDD; }
|
|
.elm-datepicker--disabled:hover {
|
|
background: inherit; }
|
|
|
|
.elm-datepicker--picked {
|
|
color: white;
|
|
background: darkblue; }
|
|
.elm-datepicker--picked:hover {
|
|
background: darkblue; }
|
|
|
|
.elm-datepicker--today {
|
|
font-weight: bold; }
|
|
|
|
.elm-datepicker--other-month {
|
|
color: #AAA; }
|
|
.elm-datepicker--other-month.elm-datepicker--disabled {
|
|
color: #EEE; }
|
|
.elm-datepicker--other-month.elm-datepicker--picked {
|
|
color: white; }
|