Atunci cand cunosti limbajele HTML si CSS (si nu doar acestea) la nivelul meu, te apuci de scris cod pentru grafica complexa. Biroul reprezinta cea mai complexa grafica pe care am realizat-o.
<div class="workspace"> <div class="workspace-data"> <div class="workspace-layers"> <div class="workspace-layer"></div> <div class="workspace-layer"> <div class="workspace-layer-row"> <div class="workspace-layer-cell"> <div class="workspace-layer-data"> <div class="workspace-layer-cell-file"> <div class="workspace-layer-cell-file-top"> <div class="workspace-layer-cell-file-top-line"></div> <div class="workspace-layer-cell-file-top-line"></div> <div class="workspace-layer-cell-file-top-line"></div> <div class="workspace-layer-cell-file-top-line"></div> <div class="workspace-layer-cell-file-top-line"></div> <div class="workspace-layer-cell-file-top-line"></div> <div class="workspace-layer-cell-file-top-line"></div> </div> <div class="workspace-layer-cell-file-bottom"> <div class="workspace-layer-cell-file-bottom-circle"></div> </div> </div> <div class="workspace-layer-cell-file"> <div class="workspace-layer-cell-file-top"> <div class="workspace-layer-cell-file-top-line"></div> <div class="workspace-layer-cell-file-top-line"></div> <div class="workspace-layer-cell-file-top-line"></div> <div class="workspace-layer-cell-file-top-line"></div> <div class="workspace-layer-cell-file-top-line"></div> <div class="workspace-layer-cell-file-top-line"></div> <div class="workspace-layer-cell-file-top-line"></div> </div> <div class="workspace-layer-cell-file-bottom"> <div class="workspace-layer-cell-file-bottom-circle"></div> </div> </div> <div class="workspace-layer-cell-file"> <div class="workspace-layer-cell-file-top"> <div class="workspace-layer-cell-file-top-line"></div> <div class="workspace-layer-cell-file-top-line"></div> <div class="workspace-layer-cell-file-top-line"></div> <div class="workspace-layer-cell-file-top-line"></div> <div class="workspace-layer-cell-file-top-line"></div> <div class="workspace-layer-cell-file-top-line"></div> <div class="workspace-layer-cell-file-top-line"></div> </div> <div class="workspace-layer-cell-file-bottom"> <div class="workspace-layer-cell-file-bottom-circle"></div> </div> </div> <div class="workspace-layer-cell-book1"> <div class="workspace-layer-cell-book-middle"></div> </div> <div class="workspace-layer-cell-book2"> <div class="workspace-layer-cell-book-middle"></div> </div> <div class="workspace-layer-cell-book3"> <div class="workspace-layer-cell-book-middle"></div> </div> <div class="workspace-layer-cell-book4"> <div class="workspace-layer-cell-book-middle"></div> </div> <div class="workspace-digital-clock">00:00</div> </div> <div class="workspace-layer-cell-line"></div> </div> <div class="workspace-layer-cell"> <div class="workspace-layer-cell-map"> <div class="workspace-layer-cell-map-layer"> <div class="workspace-layer-cell-map-layer-column"> <div class="workspace-layer-cell-map-rivet"></div> <div class="workspace-layer-cell-map-rivet"></div> </div> <div class="workspace-layer-cell-map-layer-column"> <div class="workspace-layer-cell-map-rivet"></div> <div class="workspace-layer-cell-map-rivet"></div> </div> </div> <div class="workspace-layer-cell-map-layer"></div> </div> </div> </div> <div class="workspace-layer-row"> <div class="workspace-layer-cell"></div> <div class="workspace-layer-cell"> <div class="workspace-layer-data"> <div class="workspace-layer-cell-smartphone"> <div class="workspace-layer-cell-smartphone-diff-cam"> <div class="workspace-layer-cell-smartphone-diff"></div> <div class="workspace-layer-cell-smartphone-cam"></div> </div> <div class="workspace-layer-cell-smartphone-screen"> <div class="workspace-layer-cell-smartphone-screen-login"> <div class="workspace-layer-cell-smartphone-screen-login-lock"> 🔐 </div> <div class="workspace-layer-cell-smartphone-screen-login-input"></div> <div class="workspace-layer-cell-smartphone-screen-login-input"></div> <div class="workspace-layer-cell-smartphone-screen-login-btn"></div> </div> </div> <div class="workspace-layer-cell-smartphone-btn"></div> </div> <div class="workspace-books"> <div class="workspace-book1"></div> <div class="workspace-book2"></div> <div class="workspace-book3"></div> <div class="workspace-book4"> <div class="workspace-book-sign"></div> </div> </div> <div class="workspace-camera"> <div class="workspace-camera-head"> <div class="workspace-camera-head-btn1"></div> <div class="workspace-camera-head-btn2"></div> </div> <div class="workspace-camera-body"> <div class="workspace-camera-body-row"> <div class="workspace-camera-body-row-circle-small-rectangle"> <div class="workspace-camera-body-row-circle"></div> <div class="workspace-camera-body-row-small-rectangle"></div> </div> </div> <div class="workspace-camera-body-row"> <div class="workspace-camera-body-lenses-area"> <div class="workspace-camera-body-lenses"> <div class="workspace-camera-body-lens"> <div class="workspace-camera-body-lens-light1"></div> <div class="workspace-camera-body-lens-light2"></div> </div> </div> </div> </div> </div> </div> </div> <div class="workspace-layer-cell-line"></div> </div> </div> <div class="workspace-layer-row"> <div class="workspace-layer-row-abs"> <div class="workspace-layer-row-abs-wallclock"> <div class="workspace-layer-row-abs-wallclock12"></div> <div class="workspace-layer-row-abs-wallclock3"></div> <div class="workspace-layer-row-abs-wallclock6"></div> <div class="workspace-layer-row-abs-wallclock9"></div> <div class="workspace-layer-row-abs-wallclock-middle-dot"></div> <div class="workspace-layer-row-abs-wallclock-line-h"></div> <div class="workspace-layer-row-abs-wallclock-line-m"></div> <div class="workspace-layer-row-abs-wallclock-line-s"></div> </div> <div class="workspace-layer-row-abs-lamp"> <div class="workspace-layer-row-abs-lamp-bottom"></div> <div class="workspace-layer-row-abs-lamp-line-space-bottom"> <div class="workspace-layer-row-abs-lamp-line-bottom"></div> <div class="workspace-layer-row-abs-lamp-line-bottom"></div> </div> <div class="workspace-layer-row-abs-lamp-dot"></div> <div class="workspace-layer-row-abs-lamp-line-space-top"> <div class="workspace-layer-row-abs-lamp-line-top"></div> <div class="workspace-layer-row-abs-lamp-line-top"></div> </div> <div class="workspace-layer-row-abs-lamp-head"> <div class="workspace-layer-row-abs-lamp-head-top"></div> <div class="workspace-layer-row-abs-lamp-head-head"></div> <div class="workspace-layer-row-abs-lamp-middle"></div> <div class="workspace-layer-row-abs-lamp-bulb"></div> </div> </div> </div> <div class="workspace-layer-row-abs"> <div class="workspace-layer-row-abs-laptop-area"> <div class="workspace-layer-row-abs-laptop-screen"> <div class="workspace-layer-row-abs-laptop-screen-msgs-area"> <div class="workspace-layer-row-abs-laptop-screen-msg-alert">🔔</div> <div class="workspace-layer-row-abs-laptop-screen-msgs"> <div class="workspace-layer-row-abs-laptop-screen-msg"></div> <div class="workspace-layer-row-abs-laptop-screen-msg"></div> <div class="workspace-layer-row-abs-laptop-screen-msg"></div> </div> </div> <div class="workspace-layer-row-abs-laptop-screen-smile-area"> <div class="workspace-layer-row-abs-laptop-screen-smile-eyes"> <div class="workspace-layer-row-abs-laptop-screen-smile-eye"></div> <div class="workspace-layer-row-abs-laptop-screen-smile-eye"></div> </div> <div class="workspace-layer-row-abs-laptop-screen-smile"></div> </div> </div> <div class="workspace-layer-row-abs-laptop-core"></div> </div> </div> <div class="workspace-layer-row-abs"></div> <div class="workspace-layer-cell-line"></div> </div> </div> </div> <div class="workspace-layers"> <div class="workspace-layer"></div> <div class="workspace-layer"> <div class="workspace-build"> <div class="workspace-build-stage"> <div class="workspace-build-stage-top"> <div class="workspace-build-stage-layer"> <div class="workspace-build-stage-sun"></div> <div class="workspace-build-stage-cloud"> <div class="workspace-build-stage-cloud1"></div> <div class="workspace-build-stage-cloud2"></div> </div> </div> <div class="workspace-build-stage-layer"> <div class="workspace-build-stage-workspace-building"> <div class="workspace-build-stage-workspace-building-area"> <div class="workspace-build-stage-workspace-building-area-top-area"> <div class="workspace-build-stage-workspace-building-area-top-area1"></div> <div class="workspace-build-stage-workspace-building-area-top-area2"></div> </div> <div class="workspace-build-stage-workspace-building-area-body"> <div class="workspace-build-stage-workspace-building-area-body-left"> <div class="workspace-build-stage-workspace-building-area-body-left-window"> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-left-window"> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-left-window"> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-left-window"> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-left-window"> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-left-window"> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-left-window"> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-left-window"> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-left-window"> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-left-window"> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-left-window"> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> <div class="workspace-build-stage-workspace-building-area-body-left-window-line"></div> </div> </div> <div class="workspace-build-stage-workspace-building-area-body-middle"> <div class="workspace-build-stage-workspace-building-area-body-middle-window"> <div class="workspace-build-stage-workspace-building-area-body-middle-window1"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-middle-window"> <div class="workspace-build-stage-workspace-building-area-body-middle-window1"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-middle-window"> <div class="workspace-build-stage-workspace-building-area-body-middle-window1"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-middle-window"> <div class="workspace-build-stage-workspace-building-area-body-middle-window1"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-middle-window"> <div class="workspace-build-stage-workspace-building-area-body-middle-window1"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-middle-window"> <div class="workspace-build-stage-workspace-building-area-body-middle-window1"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-middle-window"> <div class="workspace-build-stage-workspace-building-area-body-middle-window1"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-middle-window"> <div class="workspace-build-stage-workspace-building-area-body-middle-window1"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-middle-window"> <div class="workspace-build-stage-workspace-building-area-body-middle-window1"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-middle-window"> <div class="workspace-build-stage-workspace-building-area-body-middle-window1"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-middle-window"> <div class="workspace-build-stage-workspace-building-area-body-middle-window1"></div> </div> </div> <div class="workspace-build-stage-workspace-building-area-body-right"> <div class="workspace-build-stage-workspace-building-area-body-right-area"> <div class="workspace-build-stage-workspace-building-area-body-right-area1"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-space"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> </div> </div> <div class="workspace-build-stage-workspace-building-area-body-right-area1"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-space"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> </div> </div> <div class="workspace-build-stage-workspace-building-area-body-right-area1"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-space"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> </div> </div> <div class="workspace-build-stage-workspace-building-area-body-right-area1"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-space"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> </div> </div> <div class="workspace-build-stage-workspace-building-area-body-right-area1"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-space"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> </div> </div> <div class="workspace-build-stage-workspace-building-area-body-right-area1"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-space"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> </div> </div> <div class="workspace-build-stage-workspace-building-area-body-right-area1"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-space"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> </div> </div> <div class="workspace-build-stage-workspace-building-area-body-right-area1"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-space"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> </div> </div> <div class="workspace-build-stage-workspace-building-area-body-right-area1"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-space"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> </div> </div> <div class="workspace-build-stage-workspace-building-area-body-right-area1"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-space"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-window"></div> </div> </div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-doors"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-doors-area"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-door1"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-door1-handle"></div> </div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-door2"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-door2-windows"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-door2-window"></div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-door2-window"></div> </div> </div> <div class="workspace-build-stage-workspace-building-area-body-right-area1-door1"> <div class="workspace-build-stage-workspace-building-area-body-right-area1-door1-handle"></div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="workspace-build-stage-top-crane-area"> <div class="workspace-build-stage-top-crane-area-v"> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> </div> <div class="workspace-build-stage-top-crane-area-h"> <div class="workspace-build-stage-top-crane-area-line workspace-build-stage-top-crane-area-line-cancel"> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-line"> <div class="workspace-build-stage-top-crane-area-line1"></div> <div class="workspace-build-stage-top-crane-area-line2"></div> </div> </div> <div class="workspace-build-stage-top-crane-area-base"> <div class="workspace-build-stage-top-crane-area-base1"></div> <div class="workspace-build-stage-top-crane-area-base2"></div> </div> <div class="workspace-build-stage-top-crane-area-squares"> <div class="workspace-build-stage-top-crane-area-squares1"></div> <div class="workspace-build-stage-top-crane-area-squares2"> <div class="workspace-build-stage-top-crane-area-squares2-sq"></div> </div> </div> <div class="workspace-build-stage-top-crane-area-move"> <div class="workspace-build-stage-top-crane-area-move-cable"></div> <div class="workspace-build-stage-top-crane-area-move-iron"></div> <div class="workspace-build-stage-top-crane-area-move-lines"> <div class="workspace-build-stage-top-crane-area-move-line1"></div> <div class="workspace-build-stage-top-crane-area-move-line2"></div> </div> <div class="workspace-build-stage-top-crane-area-move-weight">☢</div> </div> </div> </div> <div class="workspace-build-stage-layer"> <div class="workspace-build-stage-fog"></div> </div> </div> <div class="workspace-build-stage-bottom"></div> </div> </div> </div> <div class="workspace-layer"> <div class="workspace-window"> <div class="workspace-window-glass-area"> <div class="workspace-window-glass"> <div class="workspace-window-glass-top-line"></div> </div> <div class="workspace-window-glass-separator"> <div class="workspace-window-glass-separator-handle"></div> </div> <div class="workspace-window-glass"> <div class="workspace-window-glass-top-line"></div> </div> </div> </div> </div> </div> </div> </div>
.workspace-data,
.workspace-layer-row:nth-child(1),
.workspace-layer-row:nth-child(2),
.workspace-layer-row-abs,
.workspace-layer-data,
.workspace-layer-cell-map-layer,
.workspace-layer-cell-book1,
.workspace-layer-cell-book2,
.workspace-layer-cell-book3,
.workspace-layer-cell-book4,
.workspace-layer-cell-smartphone-diff-cam,
.workspace-layer-row-abs-laptop-screen-smile-eyes{
display: flex;
}
.workspace-layer-cell-book1,
.workspace-layer-cell-book2,
.workspace-layer-cell-book3,
.workspace-layer-cell-book4,
.workspace-layer-row-abs:nth-child(2){
justify-content: center;
}
.workspace-layer-cell-book1,
.workspace-layer-cell-book2,
.workspace-layer-cell-book3,
.workspace-layer-cell-book4{
align-items: center;
}
.workspace-layer-row-abs,
.workspace-layer-data{
align-items: flex-end;
}
.workspace-layer-cell-file,
.workspace-layer-cell-book1,
.workspace-layer-cell-book2,
.workspace-layer-cell-book3,
.workspace-layer-cell-book4{
margin-right: 2px;
}
.workspace-layer-cell-line,
.workspace-layer-cell-map,
.workspace-layer-row-abs-wallclock,
.workspace-window{
box-shadow: 0 3px 3px -3px black;
}
.workspace{
width: 100%;
min-width: 100px;
max-width: 1000px;
background: #ccc;
transition: 1s;
overflow: auto;
margin: auto;
}
.workspace:hover{
filter: invert(1);
}
.workspace:active{
filter: sepia(1);
}
.workspace-data{
height: 605px;
}
.workspace-layers{
min-width: 500px;
height: 100%;
position: relative;
z-index: 1;
}
.workspace-layer{
width: calc(100% - 20px);
height: calc(100% - 20px);
padding: 10px;
position: absolute;
top: 0;
left: 0;
}
.workspace-layer:first-of-type{
z-index: 20;
}
.workspace-layer:nth-child(2){
z-index: 30;
}
.workspace-layer:nth-child(3){
z-index: 40;
}
.workspace-layer-row{
margin-bottom: 20px;
position: relative;
}
.workspace-layer-row:nth-child(3){
height: 280px;
margin-bottom: 0;
}
.workspace-layer-row:nth-child(3) > .workspace-layer-cell-line{
position: absolute;
bottom: 0;
margin-bottom: 0;
}
.workspace-layer-row-abs{
width: 100%;
height: 255px;
position: absolute;
top: 0;
}
.workspace-layer-row-abs:first-of-type{
z-index: 31;
}
.workspace-layer-row-abs-wallclock{
width: 100px;
height: 100px;
border: 4px solid #565f71;
background: white;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
z-index: 31;
}
.workspace-layer-row-abs-wallclock3,
.workspace-layer-row-abs-wallclock6,
.workspace-layer-row-abs-wallclock9,
.workspace-layer-row-abs-wallclock12{
width: 6px;
height: 6px;
border-radius: 50%;
background: #55bfec;
position: absolute;
}
.workspace-layer-row-abs-wallclock12,
.workspace-layer-row-abs-wallclock6{
left: calc(50% - 3px);
}
.workspace-layer-row-abs-wallclock3,
.workspace-layer-row-abs-wallclock9{
top: calc(50% - 3px);
}
.workspace-layer-row-abs-wallclock3{
right: 5px;
}
.workspace-layer-row-abs-wallclock6{
bottom: 5px;
}
.workspace-layer-row-abs-wallclock9{
left: 5px;
}
.workspace-layer-row-abs-wallclock12{
top: 5px;
}
.workspace-layer-row-abs-wallclock-middle-dot{
width: 10px;
height: 10px;
border-radius: 50%;
background: black;
position: absolute;
top: calc(50% - 5px);
left: calc(50% - 5px);
}
.workspace-layer-row-abs-wallclock-line-h,
.workspace-layer-row-abs-wallclock-line-m,
.workspace-layer-row-abs-wallclock-line-s{
background: black;
position: absolute;
}
.workspace-layer-row-abs-wallclock-line-h,
.workspace-layer-row-abs-wallclock-line-m{
height: 4px;
}
.workspace-layer-row-abs-wallclock-line-h{
width: 20%;
top: calc(43% - 2px);
left: 28px;
transform: rotate(27deg);
}
.workspace-layer-row-abs-wallclock-line-m{
width: 30%;
top: calc(43% - 2px);
right: 20px;
transform: rotate(-26deg);
}
.workspace-layer-row-abs-wallclock-line-s{
width: 40%;
height: 2px;
background: rgba(0,0,0,.7);
top: calc(70% - 2px);
right: 21px;
transform: rotate(66deg);
}
.workspace-layer-row-abs-lamp{
position: relative;
}
.workspace-layer-row-abs-lamp > *{
position: absolute;
}
.workspace-layer-row-abs-lamp-line-bottom,
.workspace-layer-row-abs-lamp-line-top{
background: rgba(0,0,0,.3);
}
.workspace-layer-row-abs-lamp-head-top,
.workspace-layer-row-abs-lamp-head-head,
.workspace-layer-row-abs-lamp-bulb{
margin: auto;
}
.workspace-layer-row-abs-lamp-line-bottom,
.workspace-layer-row-abs-lamp-line-top{
width: 35%;
height: 100%;
}
.workspace-layer-row-abs-lamp-line-bottom:first-child,
.workspace-layer-row-abs-lamp-line-top:first-child{
float: left;
left: 5%;
}
.workspace-layer-row-abs-lamp-line-bottom:last-child,
.workspace-layer-row-abs-lamp-line-top:last-child{
float: right;
right: 5%;
}
.workspace-layer-row-abs-lamp-head-head:before,
.workspace-layer-row-abs-lamp-head-head:after{
content: '';
}
.workspace-layer-row-abs-lamp{
width: 205px;
height: 235px;
z-index: 32;
}
.workspace-layer-row-abs-lamp-bottom{
width: 60px;
height: 30px;
bottom: 0;
background: #576272;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
z-index: 33;
}
.workspace-layer-row-abs-lamp-line-space-bottom{
width: 15px;
height: 115px;
bottom: 25px;
left: 33px;
transform: rotate(10deg);
}
.workspace-layer-row-abs-lamp-line-bottom{}
.workspace-layer-row-abs-lamp-line-bottom:first-child{}
.workspace-layer-row-abs-lamp-line-bottom:last-child{}
.workspace-layer-row-abs-lamp-dot{
width: 20px;
height: 20px;
background: #576272;
border: 3px solid #f99700;
border-radius: 50%;
top: 75px;
left: 40px;
z-index: 33;
}
.workspace-layer-row-abs-lamp-line-space-top{
width: 15px;
height: 115px;
top: 8px;
left: 100px;
transform: rotate(70deg);
}
.workspace-layer-row-abs-lamp-line-top{}
.workspace-layer-row-abs-lamp-line-top:first-child{}
.workspace-layer-row-abs-lamp-line-top:last-child{}
.workspace-layer-row-abs-lamp-head{
width: 40px;
left: 153px;
top: 5px;
transform: rotate(-24deg);
z-index: 33;
}
.workspace-layer-row-abs-lamp-head-top{
width: 7px;
height: 4px;
background: #576272;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.workspace-layer-row-abs-lamp-head-head{
width: 50%;
height: 15px;
background: white;
}
.workspace-layer-row-abs-lamp-head-head:before{
float: left;
border-top: 14px solid #9abbc2;
border-right: 3px solid transparent;
border-bottom: 12px solid transparent;
}
.workspace-layer-row-abs-lamp-head-head:after{
float: right;
border-top: 14px solid #9abbc2;
border-left: 3px solid transparent;
border-bottom: 12px solid transparent;
}
.workspace-layer-row-abs-lamp-middle{
width: 100%;
height: 25px;
background: white;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-top: 2px solid #f9b200;
}
.workspace-layer-row-abs-lamp-bulb{
width: 25px;
height: 8px;
background: #eeb800;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 0 30px #d0491c;
}
.workspace-layer-row-abs:nth-child(2){
z-index: 34;
}
.workspace-layer-row-abs-laptop-area{
width: 250px;
}
.workspace-layer-row-abs-laptop-screen{
width: 200px;
height: 120px;
border: 5px solid #1c3f4a;
border-bottom-width: 3px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #8a8d8f;
margin: auto;
position: relative;
}
.workspace-layer-row-abs-laptop-screen-msgs-area{
padding: 10px;
background: white;
border: 2px solid #1c3e4a;
border-radius: 5px;
margin: 15px;
}
.workspace-layer-row-abs-laptop-screen-msgs{
position: relative;
}
.workspace-layer-row-abs-laptop-screen-msgs:after{
content: "";
width: 12px;
height: 12px;
background: white;
border-left: 2px solid #1c3e4a;
border-bottom: 2px solid #1c3e4a;
position: absolute;
right: -2px;
bottom: -18px;
transform: rotate(-45deg);
}
.workspace-layer-row-abs-laptop-screen-msg-alert{
width: 25px;
padding: 5px;
background: #79cdce;
border: 2px solid #1c3e4a;
border-radius: 50%;
color: #1c3e4a;
font-size: 20px;
position: absolute;
top: 2px;
right: 2px;
}
.workspace-layer-row-abs-laptop-screen-msg{
height: 5px;
background: #1c3e4a;
margin-bottom: 5px;
}
.workspace-layer-row-abs-laptop-screen-msg:first-of-type,
.workspace-layer-row-abs-laptop-screen-msg:nth-child(2){
width: calc(100% - 20px);
}
.workspace-layer-row-abs-laptop-screen-msg:last-of-type{
margin-bottom: 0;
}
.workspace-layer-row-abs-laptop-screen-smile-area{
width: 30px;
height: 30px;
background: white;
border: 2px solid #1c3e4a;
border-radius: 5px;
position: absolute;
bottom: 10px;
right: 15px;
}
.workspace-layer-row-abs-laptop-screen-smile-eyes{
margin-top: 8px;
justify-content: space-around;
}
.workspace-layer-row-abs-laptop-screen-smile-eye{
width: 5px;
height: 5px;
background: #1c3e4a;
border-radius: 50%;
}
.workspace-layer-row-abs-laptop-screen-smile{
width: 80%;
height: 20px;
margin: -13px auto;
border-bottom: 5px solid #1c3e4a;
border-radius: 10px;
}
.workspace-layer-row-abs-laptop-core{
width: calc(100% - 4px);
height: 10px;
border: 2px solid #1c3f4a;
background: #d5dfe4;
}
.workspace-layer-row-abs:nth-child(3){
z-index: 6;
}
.workspace-layer-cell{
width: 50%;
position: relative;
}
.workspace-layer-data{
width: 100%;
}
.workspace-layer-cell-file{
width: 20px;
height: 120px;
background: #444d56;
padding: 5px;
}
.workspace-layer-cell-file-top{
width: calc(100% - 6px);
height: 50%;
padding: 3px;
background: white;
}
.workspace-layer-cell-file-top-line{
width: 100%;
height: 3px;
background: #ccc;
margin-bottom: 5px;
}
.workspace-layer-cell-file-top-line:first-of-type,
.workspace-layer-cell-file-top-line:last-of-type{
height: 7px;
}
.workspace-layer-cell-file-top-line:last-of-type{
margin-bottom: 0;
}
.workspace-layer-cell-file-bottom{}
.workspace-layer-cell-file-bottom-circle{
width: 8px;
height: 8px;
border: 2px solid white;
border-radius: 50%;
background: #444d56;
margin: 30px auto;
}
.workspace-layer-cell-book1,
.workspace-layer-cell-book2,
.workspace-layer-cell-book4{
width: 10px;
}
.workspace-layer-cell-book1,
.workspace-layer-cell-book3{
height: 80px;
}
.workspace-layer-cell-book2,
.workspace-layer-cell-book4{
height: 60px;
}
.workspace-layer-cell-book1{
background: #f28754;
}
.workspace-layer-cell-book2{
background: #2aaae1;
}
.workspace-layer-cell-book3{
width: 8px;
background: #545c67;
}
.workspace-layer-cell-book4{
background: #e5cd4c;
}
.workspace-layer-cell-book-middle{
width: 2px;
height: 50%;
background: white;
}
.workspace-digital-clock{
width: 40px;
padding: 0 2px;
color: #8fb8b2;
text-align: center;
background: #1d1f1e;
border: 4px solid white;
margin-left: 25px;
font-family: monospace;
font-size: 12px;
animation: workspace-digital-clock 1.5s infinite;
}
@keyframes workspace-digital-clock{
to{
color: black;
}
}
.workspace-layer-cell-line{
width: 100%;
height: 25px;
background: white;
}
.workspace-layer-cell-map{
width: calc(100% - 10px - 10px);
min-width: 100px;
max-width: 300px;
height: calc(100% - 10px);
background: white;
border: 5px solid #999;
position: absolute;
right: 0;
}
.workspace-layer-cell-map-layer{
width: calc(100% - 30px);
height: calc(100% - 30px);
padding: 15px;
}
.workspace-layer-cell-map-layer:first-of-type{
width: 100%;
height: 100%;
padding: 0;
justify-content: space-between;
position: absolute;
top: 0;
}
.workspace-layer-cell-map-layer-column{
width: 7px;
height: 100%;
padding: 0 5px;
position: relative;
}
.workspace-layer-cell-map-rivet{
width: 5px;
height: 5px;
border: 2px solid #ddd;
border-radius: 50%;
position: absolute;
}
.workspace-layer-cell-map-rivet:first-of-type{
top: 5px;
}
.workspace-layer-cell-map-rivet:last-of-type{
bottom: 5px;
}
.workspace-layer-cell-smartphone{
min-width: 40px;
max-width: 45px;
height: 70px;
padding: 5px;
background: #576272;
border-radius: 5px;
margin-left: 5%;
}
.workspace-layer-cell-smartphone-diff-cam{
height: 6px;
justify-content: center;
}
.workspace-layer-cell-smartphone-diff,
.workspace-layer-cell-smartphone-cam{
height: 2px;
background: white;
}
.workspace-layer-cell-smartphone-diff{
width: 10px;
margin-right: 5px;
}
.workspace-layer-cell-smartphone-cam{
width: 5px;
border-radius: 50%;
}
.workspace-layer-cell-smartphone-screen{
width: calc(100% - 4px);
height: 50px;
padding: 2px;
background: #55bfec;
}
.workspace-layer-cell-smartphone-screen-login{
width: 100%;
height: 30px;
}
.workspace-layer-cell-smartphone-screen-login-input,
.workspace-layer-cell-smartphone-screen-login-btn{
width: 100%;
height: 5px;
margin-top: 2px;
}
.workspace-layer-cell-smartphone-screen-login-lock{
padding: 5px 0;
text-align: center;
}
.workspace-layer-cell-smartphone-screen-login-input{
background: white;
}
.workspace-layer-cell-smartphone-screen-login-btn{
background: #586472;
}
.workspace-layer-cell-smartphone-btn{
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
margin: 2px auto;
}
.workspace-books{
padding: 0 5%;
}
.workspace-book1,
.workspace-book2,
.workspace-book3,
.workspace-book4{
background: white;
border-radius: 2px;
box-sizing: border-box;
}
.workspace-book1,
.workspace-book4{
width: 70px;
padding: 7px 0px;
}
.workspace-book2,
.workspace-book3{
width: 55px;
padding: 4px 0px;
}
.workspace-book1{
margin-left: -5px;
border-top: 2px solid #ffb713;
border-bottom: 2px solid #ffb713;
border-right: 2px solid #ffb713;
}
.workspace-book2{
margin-left: -2px;
border-top: 2px solid #417ca8;
border-bottom: 2px solid #417ca8;
border-left: 2px solid #417ca8;
}
.workspace-book3{
margin-left: 3px;
border-top: 2px solid #24b493;
border-bottom: 2px solid #24b493;
border-right: 2px solid #24b493;
}
.workspace-book4{
margin-left: -1px;
border-top: 2px solid #fe713c;
border-bottom: 2px solid #fe713c;
border-left: 2px solid #fe713c;
position: relative;
}
.workspace-book-sign{
width: 10px;
height: 10px;
background: #fe713c;
bottom: 4px;
position: absolute;
top: 3px;
right: 10px;
}
.workspace-book-sign:after{
content: '';
width: 0;
height: 0;
position: absolute;
bottom: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid white;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.workspace-camera{
width: 50px;
height: 40px;
padding: 5px 5px 0 5px;
}
.workspace-camera-head{
width: 6px;
margin-left: 5px;
}
.workspace-camera-head-btn1{
width: 3px;
height: 2px;
margin: auto;
background: #e7e7e9;
}
.workspace-camera-head-btn2{
height: 3px;
background: #933c21;
}
.workspace-camera-body{
height: 35px;
background: #e7e7e9;
}
.workspace-camera-body-row{
padding-top: 2px;
}
.workspace-camera-body-row-circle-small-rectangle{
width: calc(100% - 7px);
height: 5px;
padding: 0 2px 0 5px;
display: flex;
justify-content: space-between;
}
.workspace-camera-body-row-circle,
.workspace-camera-body-row-small-rectangle{
height: 100%;
background: #933c21;
}
.workspace-camera-body-row-circle{
width: 5px;
border-radius: 50%;
}
.workspace-camera-body-row-small-rectangle{
width: 15px;
}
.workspace-camera-body-lenses-area{
padding: 2px 0;
background: #ed5552;
}
.workspace-camera-body-lenses{
width: 20px;
height: 20px;
background: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
margin-left: 25px;
}
.workspace-camera-body-lens{
width: 14px;
height: 14px;
background: #fdd1b6;
border: 1px solid #ed5552;
border-radius: 50%;
position: relative;
}
.workspace-camera-body-lens-light1,
.workspace-camera-body-lens-light2{
background: rgba(255,255,255,.5);
border-radius: 50%;
position: absolute;
}
.workspace-camera-body-lens-light1{
width: 6px;
height: 6px;
top: 15%;
left: 20%;
}
.workspace-camera-body-lens-light2{
width: 3px;
height: 3px;
top: 30%;
left: 40%;
}
.workspace-build{
width: 100%;
min-width: 100px;
max-width: 500px;
margin-top: 20px;
overflow: auto;
}
.workspace-build-stage{
/*width: 500px;*/
height: 300px;
background: #83c6d5;
transition: 1s;
animation: workspace-build-stage 10s alternate infinite;
}
@keyframes workspace-build-stage{
100%{
filter: sepia(100%);
}
}
.workspace-build-stage-top{
height: 276px;
position: relative;
overflow: hidden;
z-index: 1;
}
.workspace-build-stage-layer{
width: 100%;
height: 100%;
display: flex;
position: absolute;
top: 0;
left: 0;
}
.workspace-build-stage-layer:first-of-type{
display: block;
z-index: 2;
}
.workspace-build-stage-sun{
width: 50px;
height: 50px;
background: yellow;
border-radius: 50%;
box-shadow: 0 0 50px yellow;
margin-top: 15px;
margin-left: 172px;
}
.workspace-build-stage-cloud{
width: 60px;
height: 30px;
overflow: hidden;
position: absolute;
top: 15px;
left: -60px;
animation: workspace-build-stage-cloud 100s infinite;
}
.workspace-build-stage-cloud *{
background: white;
border-radius: 50%;
position: relative;
}
@keyframes workspace-build-stage-cloud{
100%{
left: 100%;
}
}
.workspace-build-stage-cloud1{
width: 20px;
height: 20px;
top: 17px;
}
.workspace-build-stage-cloud2{
width: 45px;
height: 50px;
top: -15px;
left: 15px;
}
.workspace-build-stage-layer:nth-child(2){
z-index: 3;
}
.workspace-build-stage-workspace-building{
width: calc(100% - 250px);
}
.workspace-build-stage-workspace-building-area{
width: 100px;
margin: 10px auto;
}
.workspace-build-stage-workspace-building-area-top-area{}
.workspace-build-stage-workspace-building-area-top-area1{
height: 7px;
background: #5a5b58;
}
.workspace-build-stage-workspace-building-area-top-area2{
height: 7px;
background: #f0f0e6;
border-bottom: 2px solid #585855;
}
.workspace-build-stage-workspace-building-area-body{
height: calc(100% - 10px - 14px - 10px);
border-bottom: 8px solid #363739;
display: flex;
}
.workspace-build-stage-workspace-building-area-body-left{
width: 25px;
background: #cacccc;
}
.workspace-build-stage-workspace-building-area-body-left-window{
width: 10px;
padding: 2px;
margin: 7px auto;
background: #fff;
}
.workspace-build-stage-workspace-building-area-body-left-window-line{
height: 4px;
background: #302f34;
}
.workspace-build-stage-workspace-building-area-body-left-window-line:last-of-type{
margin-top: 2px;
}
.workspace-build-stage-workspace-building-area-body-middle{
width: 20px;
background: #ce874b;
}
.workspace-build-stage-workspace-building-area-body-middle-window{
width: 10px;
padding: 2px;
background: #ebe3d7;
margin: 7px auto;
}
.workspace-build-stage-workspace-building-area-body-middle-window1{
height: 10px;
background: #2f2e31;
}
.workspace-build-stage-workspace-building-area-body-right{
width: calc(100% - 15px - 10px);
background: #cacdcc;
}
.workspace-build-stage-workspace-building-area-body-right-area{
width: calc(100% - 12px);
height: calc(100% - 2px - 7px);
padding: 2px;
margin: 5px auto;
background: #f1f1e7;
}
.workspace-build-stage-workspace-building-area-body-right-area1{
height: 12px;
background: #5c5c5a;
margin: auto;
margin-bottom: 9px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.workspace-build-stage-workspace-building-area-body-right-area1-space{
width: calc(100% - 2px - 6px);
padding: 2px 2px 0 2px;
background: #e4e2d9;
display: flex;
justify-content: space-between;
}
.workspace-build-stage-workspace-building-area-body-right-area1-window{
width: calc(100% / 3 - 1px);
height: 8px;
background: #2e2e35;
}
.workspace-build-stage-workspace-building-area-body-right-area1-doors{
width: calc(100% - 4px);
height: 20px;
padding: 2px 2px 0 2px;
background: #5c5d5a;
}
.workspace-build-stage-workspace-building-area-body-right-area1-doors-area{
width: calc(100% - 4px);
height: calc(100% - 2px);
padding: 2px 2px 0 2px;
background: #e9e7e5;
display: flex;
justify-content: space-between;
}
.workspace-build-stage-workspace-building-area-body-right-area1-door1,
.workspace-build-stage-workspace-building-area-body-right-area1-door2{
width: calc(100% / 3 - 4px - 2px);
height: calc(100% - 4px - 1px);
padding: 2px;
}
.workspace-build-stage-workspace-building-area-body-right-area1-door1{
background: #2e2e32;
display: flex;
align-items: center;
}
.workspace-build-stage-workspace-building-area-body-right-area1-door1-handle{
width: 2px;
height: 4px;
background: #5e5e5e;
}
.workspace-build-stage-workspace-building-area-body-right-area1-door2{
background: #5c5d5a;
}
.workspace-build-stage-workspace-building-area-body-right-area1-door2-windows{
width: 4px;
height: calc(100% - 4px);
padding: 1px 2px;
}
.workspace-build-stage-workspace-building-area-body-right-area1-door2-window{
width: calc(100% - 2px);
height: calc(100% / 2 - 2px);
border: 1px solid #d0d0cc;
background: #312f31;
margin-bottom: 2px;
}
.workspace-build-stage-workspace-building-area-body-right-area1-door2-window:last-of-type{
margin-bottom: 0;
}
.workspace-build-stage-layer:nth-child(3){}
.workspace-build-stage-top-crane-area{
width: 250px;
position: relative;
}
.workspace-build-stage-top-crane-area-v{
width: 20px;
height: calc(100% - 20px);
position: absolute;
right: 40px;
top: 2px;
}
.workspace-build-stage-top-crane-area-line{
width: 16px;
height: 16px;
border: 2px solid black;
position: relative;
}
.workspace-build-stage-top-crane-area-line-cancel{
width: 18px;
height: 18px;
border-top: 0px solid black;
border-left: 0px solid black;
}
.workspace-build-stage-top-crane-area-line-cancel > .workspace-build-stage-top-crane-area-line2{
height: 26px;
top: -3px;
}
.workspace-build-stage-top-crane-area-line1,
.workspace-build-stage-top-crane-area-line2{
width: 2px;
height: 24px;
background: black;
position: absolute;
top: -4px;
right: 7px;
}
.workspace-build-stage-top-crane-area-line1{
transform: rotate(-45deg);
}
.workspace-build-stage-top-crane-area-line2{
transform: rotate(45deg);
}
.workspace-build-stage-top-crane-area-h{
width: 200px;
height: 20px;
margin-top: 22px;
display: flex;
position: absolute;
right: 0;
}
.workspace-build-stage-top-crane-area-base{
width: 40px;
height: 14px;
position: absolute;
right: 30px;
bottom: 0;
}
.workspace-build-stage-top-crane-area-base1,
.workspace-build-stage-top-crane-area-base2{
height: 3px;
border: 2px solid black;
background: #414141;
}
.workspace-build-stage-top-crane-area-base1{
width: 30px;
margin: auto;
}
.workspace-build-stage-top-crane-area-base2{
width: calc(100% - 4px);
}
.workspace-build-stage-top-crane-area-squares{
width: 130px;
height: 16px;
display: flex;
position: absolute;
top: 42px;
right: 60px;
}
.workspace-build-stage-top-crane-area-squares1,
.workspace-build-stage-top-crane-area-squares2,
.workspace-build-stage-top-crane-area-squares2-sq{
border: 2px solid black;
}
.workspace-build-stage-top-crane-area-squares1{
width: calc(100% - 4px - 16px);
height: 4px;
background: #414141;
}
.workspace-build-stage-top-crane-area-squares2{
width: 12px;
height: 12px;
background: #ee9219;
display: flex;
justify-content: center;
align-items: center;
}
.workspace-build-stage-top-crane-area-squares2-sq{
width: 4px;
height: 4px;
background: white;
}
.workspace-build-stage-top-crane-area-move{
width: 60px;
position: absolute;
top: 50px;
right: 80px;
animation: workspace-build-move-h 20s infinite;
}
@keyframes workspace-build-move-h{
10%{right:80px;}
20%{right:80px;}
30%{right:150px;}
40%{right:150px;}
50%{right:150px;}
60%{right:150px;}
70%{right:150px;}
80%{right:80px;}
90%{right:80px;}
100%{right:80px;}
}
.workspace-build-stage-top-crane-area-move-cable{
width: 2px;
height: 163px;
background: #414141;
margin: auto;
animation: workspace-build-move-v 20s infinite;
}
@keyframes workspace-build-move-v{
10%{height:163px;}
20%{height:100px;}
30%{height:100px;}
40%{height:100px;}
50%{height:163px;}
60%{height:163px;}
70%{height:100px;}
80%{height:100px;}
90%{height:100px;}
100%{height:163px;}
}
.workspace-build-stage-top-crane-area-move-iron,
.workspace-build-stage-top-crane-area-move-weight{
border: 2px solid #414141;
}
.workspace-build-stage-top-crane-area-move-iron{
width: 10px;
height: 15px;
background: #4f4c52;
margin: auto;
}
.workspace-build-stage-top-crane-area-move-lines{
height: 20px;
position: relative;
}
.workspace-build-stage-top-crane-area-move-line1,
.workspace-build-stage-top-crane-area-move-line2{
width: 2px;
height: 30px;
background: #414141;
position: absolute;
top: -5px;
}
.workspace-build-stage-top-crane-area-move-line1{
transform: rotate(45deg);
left: 12px;
}
.workspace-build-stage-top-crane-area-move-line2{
transform: rotate(-45deg);
right: 12px;
}
.workspace-build-stage-top-crane-area-move-weight{
width: calc(100% - 4px);
height: 20px;
background: #ee9219;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
}
.workspace-build-stage-layer:last-of-type{
align-items: flex-end;
z-index: 4;
}
.workspace-build-stage-fog{
width: 100%;
height: 0;
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.5));
filter: blur(2px);
animation: workspace-build-stage-fog 10s alternate infinite;
}
@keyframes workspace-build-stage-fog{
100%{
height: 70px;
}
}
.workspace-build-stage-bottom{
width: calc(100% - 4px);
height: 20px;
border: 2px solid black;
background: #ee9219;
}
.workspace-layer:nth-child(3){}
.workspace-window{
width: calc(100% - 20px);
min-width: 300px;
max-width: 480px;
height: 310px;
border: 10px solid white;
}
.workspace-window-glass-area{
height: 100%;
display: flex;
}
.workspace-window-glass{
width: calc(50% - (25px / 2));
height: 100%;
background: rgba(212,235,239,.3);
overflow: hidden;
position: relative;
}
.workspace-window-glass:hover .workspace-window-glass-top-line{
height: calc(100% - 2px);
transition: 1.5s;
}
.workspace-window-glass:before{
content: "";
position: absolute;
top: 0;
left: 0;
border-top: 310px solid rgba(255,255,255,.1);
border-bottom: 100px solid transparent;
border-left: 0px solid transparent;
border-right: 218px solid transparent;
z-index: 2;
}
.workspace-window-glass-top-line{
height: 10px;
background: #0181c4;
border-bottom: 2px solid #1db3e7;
}
.workspace-window-glass-separator{
width: 25px;
height: 100%;
background: white;
display: flex;
justify-content: center;
align-items: center;
}
.workspace-window-glass-separator-handle{
width: 5px;
height: 20px;
background: rgba(0, 0, 0, .5);
}