@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 5.77 kB
CSS
.f-weather-background{border-radius:6px;max-width:800px;min-width:400px}.f-weather-container{height:355px;display:flex;padding:10px;flex-direction:column}.f-weather-detail{height:530px;overflow:hidden;padding:0;border-top-left-radius:0;border-top-right-radius:0}.f-weather-header{display:flex;flex-direction:row}.f-weather-button{color:#000;font-size:11px;background-color:#fff;border-radius:15px;transition:.3s}.f-weather-button:hover{border-color:#fff;background-color:#ffffff80}.f-weather-button:focus{outline:none}.f-weather-button-detail{height:28px;width:102px;position:relative;z-index:2;margin:auto 0 auto auto}.f-weather-button-city{margin-top:5px}.f-weather-button-report{height:28px;width:76px;margin:10px 10px 10px auto}.f-weather-button-proindex{height:28px;width:76px;margin:10px}.f-weather-city{position:relative;top:10px;color:#fff;font-size:13px;z-index:1}.f-weather-city-icon{width:20px;margin-top:-2px;opacity:.7}.f-weather-city-icon:hover{opacity:1;cursor:pointer}.f-weather-city-select{height:40px;width:230px;position:absolute;text-align:center;background-color:#fff;border-radius:10px}.f-weather-city-title{margin-left:6px}.f-weather-sunset-container{max-width:380px;margin:5px auto auto;padding:0 10px}.f-weather-sunset-progress{display:flex}.f-weather-sunset-progress>div{margin:0 auto}.f-weather-sunrise-img{width:30px}.f-weather-sunrise-text{font-size:14px;color:#fff;font-weight:400}.f-weather-sunset-img{width:30px;float:right}.f-weather-sunset-text{float:right;font-size:14px;color:#fff;font-weight:400}.f-weather-information-container{min-width:380px;position:relative;top:-170px;display:flex;flex-direction:column}.f-weather-information{position:relative;text-align:center;color:#fff;display:flex;height:100px;flex-direction:column}.f-weather-information-row1{display:flex;justify-content:center}.f-weather-temperature{font-size:60px;font-weight:500}.f-weather-weather{margin-left:-20px;font-size:16px;font-weight:500;padding:15px 0;display:flex;align-items:flex-end}.f-weather-information-row2{display:flex}.f-weather-warning-container{display:flex;width:100%;margin-top:-10px;justify-content:center}.f-weather-warning{display:flex;backdrop-filter:blur(2px) saturate(163%);-webkit-backdrop-filter:blur(2px) saturate(163%);background-color:#ffffff59;border-radius:5px;border:1px solid rgba(209,213,219,.3)}.f-weather-warning-icon{width:20px;margin-left:5px}@keyframes icon{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.f-weather-warning-text{margin:1px 5px}.f-weather-information-text{position:relative;text-align:center;color:#fff;margin-bottom:10px}.f-weather-maxmin{font-size:16px;font-weight:500}.f-weather-advice-container{font-size:12px}.f-weather-advice{margin-left:10px;margin-right:10px;font-size:14px;font-weight:400}.f-weather-advice-line{position:absolute;height:14px;width:1px;top:3px;margin-left:10px;margin-right:10px;background-color:#fff}.f-weather-advice-text{display:none;width:130px;position:absolute;color:#000;background-color:#fff;border:1px solid;text-align:left;z-index:1}.f-weather-advice:hover{cursor:pointer}.f-weather-advice:hover .f-weather-advice-text{display:inline}.f-weather-air{height:60px;position:relative;top:30px;color:#fff;background-color:#00000013;border-radius:5px}.f-weather-air-title{position:relative;top:11px;left:12px;font-size:14px}.f-weather-air-progress{margin-top:10px;margin-left:12px;margin-right:-40px}.f-weather-air-point{width:20px;position:relative;margin-top:-40px}.f-weather-lrbutton-container{position:absolute;width:100%;display:flex}.f-weather-lrbutton-l{margin-left:6px;margin-right:auto;cursor:pointer}.f-weather-lrbutton-r{margin-right:6px;margin-left:auto;cursor:pointer}.f-weather-24h-container{position:relative}.f-weather-24h-title{margin-left:20px;margin-bottom:25px;padding-top:9px;font-size:15px;color:#ffffffd9;letter-spacing:0;line-height:16px;font-weight:500}.f-weather-24h-content-scroll{margin-left:35px;margin-right:35px;overflow:hidden}#f-weather-24h-content{margin-left:-32px;transition:.7s}.f-weather-24h-tr{display:flex}.f-weather-24h-td{padding-left:32px;text-align:center;color:#fff;flex:1}.f-weather-24h-img{width:30px;margin-top:20px;margin-bottom:20px}.f-weather-chart24h{margin-left:-172px}.f-weather-7d-title{margin-left:20px;margin-bottom:15px;padding-top:17px;font-size:15px;color:#000000d9;letter-spacing:0;line-height:16px;font-weight:500}.f-weather-7d-container{height:290px;background:#fff;box-shadow:0 2px 8px #0133640d;border-radius:6px}.f-weather-7d-tr{display:flex}.f-weather-7d-td{height:200px;text-align:center;border-radius:10px;flex:1}.f-weather-7d-td:hover{background-color:#00000006;cursor:pointer}.f-weather-7d-td-title{font-size:13px;color:#000000ba;font-weight:400}.f-weather-7d-td-date{font-size:13px;color:#00000078;font-weight:400}.f-weather-7d-td-img{width:30px;margin-top:20px;margin-bottom:20px}.f-weather-7d-td-margin{margin-bottom:47px}.f-weather-chart7d{position:relative;top:-93px}.f-weather-proindex-tr{display:flex;margin-top:8px}.f-weather-proindex-td{color:#fff;background-color:#00000013;border-radius:6px;margin:10px;padding:20px 15px;flex:1}.f-weather-proindex-content-scroll{height:90px;overflow:hidden}.f-weather-proindex-content{float:left;transition:.5s}.f-weather-proindex-td:hover .f-weather-proindex-content{margin-top:-110px}.f-weather-proindex-icon{width:45px;float:left}.f-weather-proindex-line{position:relative;height:40px;width:1px;top:-40px;left:55px;margin-bottom:-50px;background-color:#fff}.f-weather-proindex-text{margin-top:5px;margin-left:70px}.f-weather-proindex-title{font-size:15px;line-height:15px;font-weight:400}.f-weather-proindex-value{font-size:20px;line-height:24px;font-weight:500}.f-weather-proindex-info{margin-top:20px;font-size:14px;letter-spacing:.1px;font-weight:200}