@openhab-ui/setup-and-maintenance/css/listgridview.css

Configuration and maintenance interface for openHAB

.emptylist{max-width:700px;margin:10px auto auto}.emptylist ui-context-help{padding:10px}ui-codeeditor{flex:1;width:100%}ui-codeeditor .editoroverlay{background:var(--background-color);box-shadow:0 0 10px rgba(26,26,26,.25);top:100px;position:absolute;width:500px;left:50%;transform:translateX(-50%);border-radius:10px;flex-direction:column;justify-content:center;padding:10px}oh-vue-list,oh-vue-list>div{flex-direction:column;flex:1}oh-vue-list>div{display:flex}ui-codeeditor[haschanges]{animation-name:haschanges;animation-duration:1s;animation-iteration-count:infinite}.secondlevel{position:absolute;background-color:var(--card-bg);box-shadow:0 0 5px 0 #000;border-radius:.25rem;top:45px;bottom:10px;left:10px;right:10px;padding:10px;z-index:-1;transition:all .5s;transform:translateY(-20px);opacity:0;min-height:150px}.secondlevel .tags,ui-codeeditor{margin-top:10px;display:flex}.secondlevel .tags h5{transform:translateX(-50%) translateY(100%) rotate(-90deg);margin-right:-40px;margin-left:10px;white-space:nowrap;align-self:flex-start}.secondlevel .tags ui-tags{flex:1}.secondlevel.show{opacity:.9;z-index:10;transform:translateY(0)}#listcontainer{align-self:flex-start;width:100%;margin-top:1.5rem}#listcontainer.grid{display:grid;grid-gap:20px;gap:20px;grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}#listcontainer article.single{grid-column:1/-1}#listcontainer.selectionmode article.selected,#listcontainer.selectionmode article.selected:hover{box-shadow:0 0 15px 0 var(--primary)}#listcontainer article section.actions .btn,ui-codeeditor .editoroverlay{display:flex;align-items:center}#listcontainer article.haschanges .actions,#listcontainer article.haschanges .itemstate,#listcontainer.grid>article section.actions .btn>span,#listcontainer.grid>article section.actions.onlylist{display:none}#listcontainer article.haschanges .actions.unsaved,oh-vue-list{display:flex}#listcontainer article:not(.haschanges) .actions.unsaved{display:none}#listcontainer.grid>article{display:grid;grid-template-areas:"title actions" "description description" "footer footer";grid-template-rows:min-content auto min-content;grid-template-columns:1fr min-content;transition:box-shadow 135ms cubic-bezier(.4,0,.2,1),width 235ms cubic-bezier(.4,0,.2,1);color:var(--color);box-shadow:0 1px 1px 0 rgba(60,64,67,.08),0 1px 3px 1px rgba(60,64,67,.16);position:relative;background-color:var(--card-bg);border-radius:10px}#listcontainer.grid>article.hasimage{grid-template-areas:"aside title actions" "aside description description" "aside footer footer";grid-template-columns:100px 1fr min-content}#listcontainer.grid>article:hover{box-shadow:0 1px 3px 1px rgba(60,64,67,.2),0 2px 8px 4px rgba(60,64,67,.1)}#listcontainer.grid>article.withtabs{margin-bottom:3rem}#listcontainer.grid>article aside{grid-area:aside;border-top-left-radius:10px;border-bottom-left-radius:10px}#listcontainer.grid>article header{grid-area:title;font-size:1.5rem;font-family:inherit;font-weight:500;line-height:1.2;color:var(--color-card-header);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:10px 0 10px 20px}#listcontainer.grid>article section.actions{grid-area:actions;padding:10px 20px 10px 2px;align-items:flex-start}#listcontainer.grid>article section.description{grid-area:description;padding:0 20px;display:flex;flex-direction:column}#listcontainer.grid>article section.description>span:nth-child(1){flex:1;padding-bottom:10px}#listcontainer.grid>article footer{grid-area:footer;display:flex;align-items:center;padding:10px 20px}#listcontainer.list>article{position:relative;display:flex;margin-bottom:-1px;background-color:var(--card-bg);border:1px solid rgba(0,0,0,.125)}#listcontainer.list>article .warnDialog{flex-direction:row}#listcontainer.list>article .warnDialog h4{font-size:1.3rem;margin:0}#listcontainer.list>article .warnDialog .loader{top:-25px;left:50px}#listcontainer.list>article header{width:100%;display:flex;flex-direction:row;align-items:center;padding:.5rem 1.25rem}#listcontainer.list>article header span:first-child{flex:1}#listcontainer.list>article header>:not(:last-child){margin-right:10px}#listcontainer.list>article footer,#listcontainer.list>article section.description{display:none}#listcontainer.list>article:last-child{margin-bottom:0;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}#listcontainer.list>article:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}