Initial Commit

indexes/user/process/show_item.css

@@ -0,0 +1,202 @@
+#grid{
+    position:absolute;
+    display: flex;
+    justify-content: left;
+    flex-wrap: wrap;
+    margin: none;
+    border: none;
+    width: 100%;
+    left:1.5%;
+    font-family: Arial, Helvetica, sans-serif;
+    user-select: none;
+    text-align: center;
+}
+#items{
+    display: block;
+    background-color: rgba(255, 255, 255, 0.4);
+    color: black; 
+    font-size: 200%;
+    border-radius: 12px;
+    backdrop-filter: blur(4px);
+    margin: 3%;
+    font-family: Arial, Helvetica, sans-serif;
+    font-style: rgb(10, 22, 44);
+    user-select: none;
+    text-align: center;
+    padding: 0.2%;
+    width: 26vw;
+    height: 30vw;
+    transition: 0.3s;
+}
+img{
+    border-radius: 12px;
+    margin-top: 2.5%;
+    width: 95%;
+    height: 60%;
+    overflow:hidden;
+    background-position: center;
+    background-repeat: no-repeat;
+    -webkit-background-size:cover;
+    -moz-background-size:cover;
+    background-size:cover;
+    cursor: hand;
+    transition: 0.5s;
+}
+.icon_1{
+    left: 40%;
+    position: absolute;
+    display: block;
+    text-align: right;
+    border-radius: 12%;
+    width: 9%;
+    height: 9%;
+    margin: 1%;
+    overflow:hidden;
+    cursor: hand;
+}
+.icon_1:hover{
+    width: 9%;
+    height: 9%;
+}
+.icon_2{
+    left: 50%;
+    position: absolute;
+    display: block;
+    text-align: right;
+    border-radius: 12%;
+    width: 9%;
+    height: 9%;
+    margin: 1%;
+    overflow:hidden;
+    cursor: hand;
+    transition: 0.5s;
+}
+.icon_2:hover{
+    width: 9%;
+    height: 9%;
+}
+#items:hover{
+    box-shadow: 0px 0px 10px rgb(106, 104, 104);
+}
+img:hover{
+    margin-top: 0%;
+    box-shadow: 0px 0px 10px rgb(106, 104, 104);
+    width: 100%;
+    height: 62%;
+}
+h5:hover{
+    cursor: hand;
+}
+#detail_window{
+    position: absolute;
+    text-align: center;
+    transform: scale(1.7);
+    /* 垂直居中 */
+    top: 10%;
+    bottom: 0;
+    height: 50%;
+    /* 水平居中 */
+    left: 0%;
+    right: 0%;
+    width: 57%;
+    margin: auto;
+
+    user-select: none;
+    background-color: rgba(239, 230, 230, 0.5); 
+    border: 0px;
+    border-radius: 12px;
+    box-shadow: 0px 0px 16px rgb(70, 69, 69); 
+    backdrop-filter: blur(20px);
+}
+#overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(109, 103, 103, 0.6);
+    backdrop-filter: blur(4px);
+    z-index: 10000;
+}
+body{
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+#closebutton{
+    position: absolute;
+    text-align: center;
+    transform: scale(1.4);
+    top: 14%;
+    height: 2.2%;
+    margin-left: 95%;
+    width: 2.2%;
+    font-size: 80%;
+    user-select: none;
+    border: 0px;
+    border-radius: 12px; 
+    box-shadow: 0px 0px 16px rgb(142, 142, 142); 
+}
+#closebutton:hover{
+    background-color: red;
+}
+.dialog{
+    background-color: rgba(255, 255, 255, 0.5);
+    color: black; 
+    font-size: 150%;
+    box-shadow: 0px 0px 10px rgb(106, 104, 104);
+    border-radius: 12px;
+    border: none;
+    backdrop-filter: blur(20px);
+    height: 20%;
+    width: 40%;
+    margin: auto;
+    font-family: Arial, Helvetica, sans-serif;
+    font-style: rgb(10, 22, 44);
+    user-select: none;
+    text-align: center;
+    overflow: hidden;
+    padding-top: 5%;
+}
+dialog::backdrop {
+    background-color: rgba(75, 75, 75, 0.598);
+}
+.dialogbutton{
+    height: 25%;
+    width: 40%;
+    font-size: medium;
+    border: solid white 0px;
+    background: linear-gradient(to right, rgb(26, 117, 172), rgb(26, 158, 144));
+    color: white;
+    cursor: hand;
+    box-shadow: 0px 0px 0px #424242;
+    transition: 0.3s;
+    border-radius: 5px;
+    margin-top: 5%;
+}
+.dialogbutton:hover {
+    box-shadow: 0px 0px 10px #424242;
+}
+input{
+    font-size: 100%;
+    text-align: center;
+    background-color: rgba(255, 255, 255, 0.5);
+    border-radius: 5px;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    outline: none;
+    border-bottom: 1px solid grey;
+    height: 20%;
+    width: 40%;
+    box-shadow: 0px 0px 0px #424242;
+    transition: 0.3s;
+    backdrop-filter: blur(20px);
+}
+input:focus{
+    background-color: rgb(234, 241, 254);
+    box-shadow: 0px 0px 10px #424242;
+}
+input:hover{
+    box-shadow: 0px 0px 10px #424242;
+}