@digital-blueprint/lunchlottery-app
Version:
[GitHub Repository](https://github.com/digital-blueprint/lunchlottery-app) | [npmjs package](https://www.npmjs.com/package/@digital-blueprint/lunchlottery-app) | [Unpkg CDN](https://unpkg.com/browse/@digital-blueprint/lunchlottery-app/)
273 lines (227 loc) • 7.09 kB
JavaScript
import {css} from 'lit';
export function getFileHandlingCss() {
// language=css
return css`
/**************************\\
Modal Styles
\\**************************/
.modal-container {
grid-template-columns: 150px 1fr;
grid-template-rows: auto 1fr;
gap: 1px 1px;
grid-template-areas: 'sidebar header' 'sidebar main';
position: relative;
}
.modal-nav {
cursor: pointer;
overflow: hidden;
background-color: var(--dbp-background);
border-right: var(--dbp-border);
grid-area: sidebar;
}
.modal-nav > button,
.modal-nav > div {
padding: 5px;
text-align: center;
width: 100%;
background-color: var(--dbp-background);
color: var(--dbp-content);
border: 0;
}
.modal-nav > button:focus-visible {
box-shadow: inset 0px 0px 3px 1px var(--dbp-primary);
}
.modal-nav .nav-icon {
width: 35px;
height: 35px;
}
.modal-nav .active p {
font-weight: bold;
}
.modal-nav .active .nav-icon {
color: var(--dbp-accent);
}
.modal-content {
padding: 10px 20px 20px 20px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.modal-content .source-main {
/*flex-grow: 1;*/
/*justify-content: center;*/
/*align-items: center;*/
height: 100%;
width: 100%;
display: flex;
align-items: flex-end;
}
.modal-content .source-main.hidden {
display: none;
}
.modal-header {
grid-area: header;
display: flex;
padding: 10px 20px 0px 20px;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
.clipboard-container {
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
overflow-x: auto;
}
.micromodal-slide .modal-container,
.micromodal-slide .modal-overlay {
will-change: auto;
}
/**************************\\
Picker Styles
\\**************************/
#nextcloud-file-picker,
#clipboard-file-picker {
width: 100%;
height: 100%;
margin: var(--FUMargin, 0px);
padding: var(--FUPadding, 20px);
}
#fileElem {
position: absolute ;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
word-wrap: normal;
}
#fileElem:focus + label {
outline: none ;
outline-width: 0 ;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: 0px 0px 5px 1px var(--dbp-primary);
}
#nextcloud-file-picker.hidden {
display: none;
}
#modal-picker-content {
grid-area: main;
}
/**********************************\\
Tabulator table styles
\\*********************************/
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
display: inline-flex;
padding: 0px;
}
.checkmark {
height: 20px;
width: 20px;
left: 10px;
top: 8px;
}
.button-container .checkmark::after {
left: 7px;
top: 2px;
width: 5px;
height: 11px;
}
/*.tabulator .tabulator-tableHolder {*/
/* overflow: hidden;*/
/*}*/
.force-no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*.tabulator .tabulator-tableHolder {*/
/* !* height: unset !important; !*TODO find a better way to do this*!*/
/*}*/
/* .tabulator-row-handle {
padding: 0px !important;
}*/
/*.tabulator .tabulator-header .tabulator-col {*/
/* min-height: 37px !important;*/
/*}*/
.filename {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
}
.select-all-icon {
height: 40px;
position: absolute;
top: -1.1em;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
padding-top: 4px;
padding-bottom: 4px;
font-weight: normal;
font-size: 1rem;
}
@media only screen and (orientation: portrait) and (max-width: 768px) {
.tabulator .tabulator-tableHolder {
white-space: inherit;
}
.modal-container {
width: 100%;
height: 100%;
max-width: 100%;
}
}
/**************************\\
Tablett Portrait Styles
\\**************************/
@media only screen and (orientation: portrait) and (max-width: 768px) {
.modal-nav {
display: flex;
/*justify-content: space-around;*/
grid-area: nav;
border: none;
border-bottom: var(--dbp-border);
border-top: var(--dbp-border);
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.modal-nav::-webkit-scrollbar {
display: none;
}
.modal-content {
grid-area: main;
}
.modal-container {
grid-template-rows: 40px 55px auto;
grid-template-areas: 'header' 'nav' 'main';
grid-template-columns: auto;
}
.modal-header {
grid-area: header;
padding: 5px;
}
.modal-nav > div {
flex-grow: 1;
}
.modal-nav .nav-icon {
height: 20px;
}
#nextcloud-file-picker,
#clipboard-file-picker {
padding: 0px;
}
}
/**************************\\
Mobile Portrait Styles
\\**************************/
@media only screen and (orientation: portrait) and (max-width: 768px) {
}
`;
}