Design Weekdays
Fri Sep 16 2022 19:28:55 GMT+0000 (Coordinated Universal Time)
Saved by @yanik_lutziger #css
/* .weekday--content { border-top: 1px solid var(--lightgray); border-left: 2px solid var(--lightgray); display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; min-height: 70px; } */ .weekviews--container { display: grid; } .weekday--content:hover { cursor: pointer; border-top: 1px solid rgba(116, 171, 168, 0.8); border-left: 2px solid rgba(116, 171, 168, 0.8); } .weekday--content:hover .block--left { background-color: rgba(116, 171, 168, 0.8); } .weekday--content:active { cursor: pointer; border-top: 1px solid rgba(116, 171, 168, 1); border-left: 2px solid rgba(116, 171, 168, 1); } .weekday--content:active .block--left { background-color: rgba(116, 171, 168, 1); } .block--left { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } /* .block--left{ display: flex; flex-direction: column-reverse; background-color: var(--lightgray); height: 100%; } */ .block--week { margin-top: 40px; padding: 0px; display: inline; color: white; /* transform: rotate(270deg); */ white-space: nowrap; width: 100%; } .block--event { margin: 0px; padding-top: 5px; padding-left: 5px; } /* today */ .day--block { border-top: 1px solid white; border-left: 2px solid white; } .day--block:hover{ border-top: 1px solid white; border-left: 2px solid white; } .day--block > .weekview--block > .block--left{ color: black; background-color: white; } .day--block > .weekview--block > .block--left > p{ color: black; } .day--block:hover{ border-top: 1px solid rgba(255, 255, 255, 0.8); border-left: 2px solid rgba(255, 255, 255, 0.8); } .day--block:hover > .weekview--block > .block--left{ color: white; background-color: rgba(255, 255, 255, 0.8); } .day--block:hover > .weekview--block > .block--left > p{ color: black; } .day--block:active{ border-top: 1px solid black; border-left: 2px solid black; } .day--block:active > .weekview--block > .block--left{ background-color: black; } .day--block:active > .weekview--block > .block--left > p{ color: white; } /* clicked */ .weekday--clicked:not(.day--block) { border-top: 1px solid var(--blue); border-left: 2px solid var(--blue); } .weekday--clicked:not(.day--block) >.weekview--block > .block--left { background-color: var(--blue); } .weekday--clicked:hover:not(.day--block) { border-top: 1px solid rgba(116, 171, 168, 0.6); border-left: 2px solid rgba(116, 171, 168, 0.6); } .weekday--clicked:hover:not(.day--block) >.weekview--block > .block--left { background-color: rgba(116, 171, 168, 0.6); }
Comments