/* @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&display=swap'); */ body { /* background-color: rgb(51, 11, 116); */ background: url(../../images/pomo_ocean.jpg) no-repeat; background-image: "../../"; /* color: white; */ font-family: 'Fira Sans', sans-serif; margin: 0; padding: 0; width: 280px; height: 500px; } #timer { /* background-color: rgb(77, 25, 161); */ padding: 10px 0 20px; } .buttons { width: fit-content; margin: auto; font-size: 20px; color: rgb(169, 172, 172); } .buttons .slider{ color: rgb(247, 226, 230); } .button { float: left; margin: 5px; cursor: pointer; padding: 8px; } /*计数部分*/ #countdown { clear: both; width: fit-content; margin: auto; font-size: 60px; font-weight: 500; padding: 20px; color: aliceblue; } #countdown span{ opacity: 0; } #start-btn ,#end-btn{ width: 40px; margin: 10px auto 0; padding: 10px 30px; text-align: center; background-color: rgb(0, 179, 12); cursor: pointer; } #reset-btn { width: 40px; margin: 10px auto 0; padding: 10px 30px; text-align: center; background-color: rgb(187, 0, 0); cursor: pointer; } #end-btn{ background-color: rgb(0, 128, 187); display: none; } /*选中的按钮*/ .selected { background-color: rgb(244, 242, 248); } #current-task-display { width: 100%; padding-top: 30px; margin: auto; text-align: center; } #tasks-container { margin: auto; } ul { padding: 0; } li { list-style-type: none; padding: 20px 10px; margin-bottom: 5px; background-color: white; color: black; } .right { float: right; } .delete-btn { padding: 10px; background-color: rgb(33, 10, 70); color: white; margin-left: 10px; cursor: pointer; } #add-task-btn { width: 200px; margin: 0 auto 10px; /* background-color: rgb(33, 10, 70); */ padding: 8px; cursor: pointer; text-align: center; } #task-form { clear: both; background-color: white; color: black; height: 100px; padding: 15px; } #text { border: none; width: 95%; font-size: 18px; margin-bottom: 5px; } #est-pomodoro { margin: 10px 10px 0; width: 50px; padding: 5px; } #save, #cancel { border: none; width: 60px; padding: 8px; margin-left: 5px; cursor: pointer; float: right; } .hide { display: none; } footer .settings{ position: absolute; bottom: 5px; right: 5px; }