.boxes { width:480px; float:left; } .box { background-color:#000; background-image:url(hexa.png); background-position:center 30%; background-repeat:no-repeat; color:#fff; font-weight:700; line-height:1.5em; width:400px; border-radius:10px; border-top-width:30px; margin:10px 420px 10px 10px; padding:2px; h3 { color:#fff; text-align:center; margin:0; padding:3px; } .content { min-height:100px; margin:0; padding:5px; } } #new-wm-tooltip{ position: relative; z-index: 1; } #new-wm-tooltip-container{ margin: 10px 10px 5px 150px; border-radius: 4px; border: 1px solid #888; background: #FFFF66; box-shadow: 0 0 20px rgba(0,0,0,0.2); p{ text-align: left; font-size: 0.8em; word-spacing: 2px; } &:after{ content: ""; position: absolute; left: 300px; border-width: 15px; border-style: solid; border-color: #FFFF66 transparent transparent transparent; } } .wm{ &.opened .actions{ display: block !important; } &.small .summary{ padding: 5px; cursor: default; &:hover{ background-color: #c1c1c1; } .name{ background: none !important; text-align: center; float: none; } } .quota{ left: 0; top: 0; z-index: 0; position: absolute; width: 100%; height: 100%; .used{ height: 100%; } } .summary{ padding: 15px 5px; border-top: 1px solid #888; cursor: pointer; background-color: #c1c1c1; position: relative; &.unfinished{ background-color: #FFFF66; } &:hover{ background-color: #b1b1b1; .actions{ display: block; } } .id{ float: right; width: 30px; } .name{ float: left; padding-left: 25px; background-repeat: no-repeat; background-position: 0 0; z-index: 2; position: relative; } .status{ text-align: right; float: right; width: 60px; z-index: 2; position: relative; } .actions{ float: right; margin-left: 5px; display: none; z-index: 2; position: relative; a{ height: 16px; width: 16px; display: block; float: left; margin-left: 2px; &:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.4); background-color: rgba(0,0,0,0.4); } } } } .details{ border-top: 1px solid #888; background-color: #d1d1d1; display: none; .container{ padding: 5px 5px; } h3{ font-weight: normal; } ul{ list-style: none; margin: 0px 5px; } li{ margin: 8px 0px 4px 0px; padding: 3px 0px 3px 20px; border-bottom: 1px dotted #aaa; background-repeat: no-repeat; background-position: 0px 4px; &:last-child{ border-bottom: none; }; } a{ text-decoration: underline; } .name{ float: none; background-image: url(icons/computer.png); } .os-win{ background-image: url(icons/windows.png) } .os-linux{ background-image: url(icons/animal-penguin.png) } .type{ background-image: url(icons/box-share.png) } .date{ background-image: url(icons/calendar-day.png) } .cpu{ background-image: url(icons/processor.png) } .memory{ background-image: url(icons/memory.png) } .count{ background-image: url(icons/documents-stack.png) } .value{ float: right; width: 200px; text-align: right; } .description{ font-size: inherit; background-image: url(icons/document-snippet.png); .value{ font-size: 0.8em; word-spacing: 3px; width: 350px; } } } &.opened .details{ display: block; } &.new .name{ background-image: url(icons/computer--plus.png); } } .file-list{ list-style: none; overflow: hidden; .name{ float: left; } .info{ float: right; width: 60px; text-align: right; } } .filetype-c { background-image: url(icons/document-visual-studio.png); } .filetype-text { background-image: url(icons/document.png); } .filetype-image { background-image: url(icons/document-image.png); } .filetype-zip { background-image: url(icons/folder-zipper.png); } .filetype-folder { background-image: url(icons/folder-horizontal.png); } .filetype-more { background-image: url(icons/arrow-circle-double.png); } .filetype-up { background-image: url(icons/upload-cloud.png); } .filetype-jump-out { background-image: url(icons/arrow-curve-090.png); } .wm-on{ background-image: url(icons/computer-cloud.png); } .wm-off{ background-image: url(icons/computer-off.png); } #template .wm .summary .name{ background-image: url(icons/document-template.png) } #new-template-button .name{ background-image: url(icons/document--plus.png) !important } .wm-list.modal{ border-radius: 4px; border: 1px solid #666; } .wm-list.modal input{ padding: 2px 10px; } .wm-list.modal .wm:nth-child(1) .summary{ border-top: none; } #template{ .wm { .template-details{ margin: 0; padding: 0; border-top: 1px solid #888; display: none; ul{ list-style-type: none; } li{ padding-left: 10px; border-top: 1px solid #aaa; position: relative; &:first-child{ border-top: none; }; .status{ float: right; padding: 0 5px; } .group-name{ float: left; line-height: 1.5em; z-index: 2; position: relative; } } } } }