@import url("http://fonts.googleapis.com/css?family=Droid+Sans:400,700"); // Base @import "base/orbitbar-override"; @import "base/sitemap-override"; @import "base/global"; @import "base/unity"; @import "base/utilities"; @import "base/pagination"; @import "base/accesskey"; @import "base/go_back_top"; @import "base/ckeditor-reset"; // Layout @import "layout/*"; // Modules @import "modules/*"; // Widget @import "widget/*"; .black-screen{ position: fixed; width: 100%; height: 100%; opacity: 0; top: -20000px; background: rgba(0,0,0,.7); z-index: 1100; left: 0; transition:opacity .3s ,top 0s .3s; &.active{ opacity: 1; top:0; transition:opacity .3s; .content{ transform:translate(-50%,-50%); opacity: 1; top:50%; left: 50%; // box-shadow: #dcabff 0px 0px 150px; transition:opacity 1s .8s,top .5s .7s ; } } .content{ background: #fff; color:#666; font-family: '微軟正黑體','sans-serif'; position: absolute; opacity: 0; left:-20000px; top:60%; transform:translate(-50%,-50%); transform-origin:center; width: 90%; font-weight: bold; transition:opacity .5s ,top .5s, left 0s .5s; padding: 2px; @media (min-width: 768px){ width: 40%; padding: 30px; } @media (max-width: 767px){ padding: 30px 10px; } .close-btn{ position: absolute; right: 0; top:0; padding: 5px 10px; background: $theme-color-main; color:#fff; font-size: 18px; transition:.3s; &:hover{ background: $theme-color-second; } } } } /*