CSS

语言：

CSSSCSS

确定

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

height: 800px;

width: 100vw;

background-color: #9c00ff;

}

.window {

height: 700px;

width: 900px;

box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.43);

border-top-right-radius: 12px;

border-top-left-radius: 12px;

border: 1px solid #3c3b37;

background-color: #f2f1f0;

-webkit-transition: 1s;

transition: 1s;

}

.window .topbar {

height: 40px;

width: 100%;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

background-image: -webkit-linear-gradient(#65645e, #3c3b37);

background-image: linear-gradient(#65645e, #3c3b37);

border-top-right-radius: 10px;

border-top-left-radius: 10px;

border-bottom: 1px solid #302f2c;

}

.window .topbar p {

color: #dfdbd0;

margin-left: 20px;

}

.window .topbar .icons {

background-image: -webkit-linear-gradient(#363632, #4e4d48);

background-image: linear-gradient(#363632, #4e4d48);

margin-left: 15px;

border-radius: 500px;

padding-top: 2px;

padding-bottom: 1px;

padding-left: 3px;

padding-right: 3px;

}

.window .topbar .icons .close {

width: 20px;

height: 20px;

border-radius: 50%;

background-image: -webkit-linear-gradient(#f79674, #df5106);

background-image: linear-gradient(#f79674, #df5106);

display: inline-block;

}

.window .topbar .icons .close:hover {

background-image: -webkit-linear-gradient(#f8a082, #f85c09);

background-image: linear-gradient(#f8a082, #f85c09);

}

.window .topbar .icons .hide,

.window .topbar .icons .maximize {

width: 20px;

height: 20px;

border-radius: 50%;

margin-left: 5px;

background-image: -webkit-linear-gradient(#989792, #5a5a55);

background-image: linear-gradient(#989792, #5a5a55);

display: inline-block;

}

.window .topbar .icons .hide:hover,

.window .topbar .icons .maximize:hover {

background-image: -webkit-linear-gradient(#a2a19d, #6b6b65);

background-image: linear-gradient(#a2a19d, #6b6b65);

}

.window .tools {

height: 30px;

width: 100%;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

background-color: #3c3b37;

color: #dfdbd0;

}

.window .folder-info {

height: 30px;

width: 100%;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

background-color: #f2f1f0;

border-top: 1px solid #c5c1bc;

position: relative;

bottom: -598px;

}

.window .folder-info p.right {

position: relative;

right: -500px;

}

.window .folder-info p.left {

margin-left: 15px;

}

.window .folder-info p {

color: #5f4c53;

}

.button {

position: fixed;

top: 15px;

left: 15px;

text-decoration: none;

background-color: #fff;

color: #9c00ff;

padding: 15px 30px;

box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.43);

}

.button:hover {

background-color: #e6e6e6;

}