.header { width: 100%; height: 80px; overflow: hidden; margin-left: 190px; } .header-sort-container { position: absolute; left: 455px; top: 29px; cursor: pointer; transition: 0.1s; width: 48px; height: 27px; padding-left: 8px; transition: 0.1s; } .header-sort-container:hover, .setting-icon-container:hover { background-color: rgba(75, 75, 75, 0.035); border-radius: 8px; } .header-sort-text, .download-demo-book { float: left; width: 32px; height: 16px; font-size: 16px; line-height: 27px; color: rgba(75, 75, 75, 1); opacity: 1; } .header-sort-icon { float: left; margin-top: 8px; font-size: 12px; } .only-local-container { position: absolute; left: 540px; margin-top: 29px; } .only-local-text { float: left; font-size: 16px; line-height: 27px; color: rgba(75, 75, 75, 1); opacity: 1; } .only-local-icon { float: left; margin-top: 6px; margin-left: 6px; width: 30px; height: 16px; border-radius: 10px; background-color: black; cursor: pointer; } .only-local-slider { float: left; margin-top: 2px; margin-left: 2px; width: 12px; height: 12px; border-radius: 50%; background-color: white; } .import-from-cloud { margin-right: 20px; margin-top: 20px; min-width: 138px; height: 42px; border: 2px solid #4b4b4b; background: white; padding: 0px 10px; opacity: 1; border-radius: 25px; line-height: 38px; text-align: center; color: #4b4b4b; box-sizing: border-box; cursor: pointer; transition: 0.2s; position: fixed; right: 0px; top: 0px; } .import-from-cloud:hover .animation-mask { transform: scaleX(1); } .import-from-local:hover .animation-mask-local { transform: scaleX(1); } @media screen and (max-width: 950px) { .import-from-cloud { position: fixed; left: 20px; top: calc(100vh - 80px); width: 158px; } .import-from-local { position: fixed !important; left: 20px; top: calc(100vh - 140px) !important; width: 138px !important; } } .download-demo-book { text-decoration: underline; width: 200px; position: absolute; left: 690px; top: 29px; cursor: pointer; color: blue; } @media screen and (max-width: 1250px) { .download-demo-book { display: none; } } .animation-mask, .animation-mask-local { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-color: rgba(75, 75, 75, 0.05); transition: 0.1s; transform: scaleX(0); transform-origin: left; border-radius: 19px; } .header-search-container { position: absolute; top: 23px; left: 210px; width: 209px; height: 40px; } .setting-icon { font-size: 25px; } .setting-icon-container { width: 30px; height: 35px; font-size: 25px; line-height: 37px; position: absolute; left: 525px; top: 25px; color: rgba(75, 75, 75, 1); cursor: pointer; transition: 0.1s; padding-left: 5px; }