From 35ea95aab3a4021a021c2a2b83caba610ff4a21e Mon Sep 17 00:00:00 2001 From: timotheegoguely Date: Thu, 23 Jan 2025 14:41:17 +0100 Subject: [PATCH] add 2.blocks.design-to-light.css --- src/assets/css/index.css | 1 + .../css/src/2.blocks.design-to-light.css | 74 +++++++++++++++++++ 2 files changed, 75 insertions(+) create mode 100644 src/assets/css/src/2.blocks.design-to-light.css diff --git a/src/assets/css/index.css b/src/assets/css/index.css index 4a2eba2..148a9cb 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -18,6 +18,7 @@ @import 'src/2.blocks.badge.css'; @import 'src/2.blocks.button.css'; @import 'src/2.blocks.card.css'; +@import 'src/2.blocks.design-to-light.css'; @import 'src/2.blocks.dialog.css'; @import 'src/2.blocks.header.css'; @import 'src/2.blocks.image.css'; diff --git a/src/assets/css/src/2.blocks.design-to-light.css b/src/assets/css/src/2.blocks.design-to-light.css new file mode 100644 index 0000000..258fba3 --- /dev/null +++ b/src/assets/css/src/2.blocks.design-to-light.css @@ -0,0 +1,74 @@ +/* DESIGN TO LIGHT BLOCK */ + +/* Button */ +#dtl-btn { + position: fixed; + bottom: 2rem; + right: 2rem; + width: 4.75rem; + height: 2.5rem; + color: var(--color-white); +} +#dtl-btn::before { + width: 1.5rem; + height: 1.5rem; + position: absolute; + left: .5rem; + top: .5rem; +} +#dtl-btn::after { + content: attr(data-grade); + color: transparent; + user-select: none; + width: 2rem; + height: 2rem; + border-radius: var(--rounded-sm); + background-repeat: no-repeat; + background-position: center; + position: absolute; + right: .25rem; + top: .25rem; +} +#dtl-btn[data-grade="A"]::after { + background-image: url("data:image/svg+xml,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.30393 3.96806L3.11993 16.1601C3.00793 16.4641 2.83193 16.7041 2.59193 16.8801C2.36793 17.0401 2.11993 17.1201 1.84793 17.1201C1.41593 17.1201 1.09593 17.0001 0.887928 16.7601C0.679928 16.5201 0.575928 16.2241 0.575928 15.8721C0.575928 15.7281 0.6 15.5761 0.647928 15.4161L6.62393 1.06406C6.75193 0.744065 6.94393 0.496065 7.2 0.320064C7.47193 0.144065 7.75993 0.0720646 8.06393 0.104064C8.35193 0.104064 8.61593 0.192064 8.85593 0.368065C9.11193 0.528065 9.29593 0.760065 9.40793 1.06406L15.3119 15.1281C15.3919 15.3361 15.4319 15.5281 15.4319 15.7041C15.4319 16.1361 15.2879 16.4801 14.9999 16.7361C14.7279 16.9921 14.4239 17.1201 14.0879 17.1201C13.7999 17.1201 13.5359 17.0321 13.2959 16.8561C13.0719 16.6801 12.8959 16.4401 12.7679 16.1361L7.60793 4.11207L8.30393 3.96806ZM3.86393 13.2321L5.18393 10.4721H11.6639L12.1199 13.2321H3.86393Z' fill='%2300945B'/%3E%3C/svg%3E%0A"); + background-color: rgba(0, 148, 91, .2); +} +#dtl-btn[data-grade="B"]::after { + background-image: url("data:image/svg+xml,%3Csvg width='14' height='18' viewBox='0 0 14 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.1121 0.600098C9.6481 0.600098 10.7921 0.960098 11.5441 1.6801C12.2961 2.4001 12.6721 3.4641 12.6721 4.8721C12.6721 5.6241 12.4881 6.2881 12.1201 6.8641C11.7521 7.4241 11.2081 7.8641 10.4881 8.1841C9.7681 8.4881 8.8801 8.6401 7.8241 8.6401L7.9201 7.5601C8.4161 7.5601 8.9841 7.6321 9.6241 7.7761C10.2641 7.9041 10.8801 8.1441 11.4721 8.4961C12.0801 8.8321 12.5761 9.3121 12.9601 9.9361C13.3601 10.5441 13.5601 11.3281 13.5601 12.2881C13.5601 13.3441 13.3841 14.2081 13.0321 14.8801C12.6961 15.5521 12.2481 16.0721 11.6881 16.4401C11.1281 16.8081 10.5281 17.0641 9.8881 17.2081C9.2481 17.3361 8.6321 17.4001 8.0401 17.4001H2.0641C1.6481 17.4001 1.2961 17.2641 1.0081 16.9921C0.736098 16.7041 0.600098 16.3521 0.600098 15.9361V2.0641C0.600098 1.6481 0.736098 1.3041 1.0081 1.0321C1.2961 0.744098 1.6481 0.600098 2.0641 0.600098H8.1121ZM7.6801 3.4321H3.4081L3.7201 3.0481V7.3921L3.4321 7.1761H7.7521C8.2161 7.1761 8.6321 7.0241 9.0001 6.7201C9.3681 6.4161 9.5521 5.9761 9.5521 5.4001C9.5521 4.7121 9.3761 4.2161 9.0241 3.9121C8.6881 3.5921 8.2401 3.4321 7.6801 3.4321ZM7.8721 10.0081H3.5041L3.7201 9.8161V14.8801L3.4801 14.6401H8.0401C8.7761 14.6401 9.3601 14.4481 9.7921 14.0641C10.2241 13.6641 10.4401 13.0721 10.4401 12.2881C10.4401 11.5681 10.2961 11.0481 10.0081 10.7281C9.7201 10.4081 9.3761 10.2081 8.9761 10.1281C8.5761 10.0481 8.2081 10.0081 7.8721 10.0081Z' fill='%235EAC0D'/%3E%3C/svg%3E%0A"); + background-color: rgba(94, 172, 13, .2); +} +#dtl-btn[data-grade="C"]::after { + background-image: url("data:image/svg+xml,%3Csvg width='14' height='18' viewBox='0 0 14 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.6 1.35592C13.016 1.56392 13.256 1.89192 13.32 2.33992C13.4 2.78792 13.288 3.19592 12.984 3.56392C12.776 3.85192 12.504 4.01192 12.168 4.04392C11.848 4.07592 11.52 4.01192 11.184 3.85192C10.8 3.67592 10.392 3.53992 9.96 3.44392C9.544 3.34792 9.104 3.3 8.64 3.3C7.776 3.3 7 3.43592 6.312 3.70792C5.64 3.97992 5.064 4.37192 4.584 4.88392C4.104 5.37992 3.736 5.97192 3.48 6.65992C3.24 7.34792 3.12 8.10792 3.12 8.93992C3.12 9.91592 3.256 10.7639 3.528 11.4839C3.816 12.2039 4.208 12.8039 4.704 13.2839C5.2 13.7639 5.784 14.1239 6.456 14.3639C7.128 14.5879 7.856 14.6999 8.64 14.6999C9.072 14.6999 9.504 14.6599 9.936 14.5799C10.368 14.4999 10.784 14.3559 11.184 14.1479C11.52 13.9879 11.848 13.9319 12.168 13.9799C12.504 14.0279 12.784 14.1959 13.008 14.4839C13.328 14.8839 13.44 15.2999 13.344 15.7319C13.264 16.1479 13.024 16.4519 12.624 16.6439C12.208 16.8519 11.776 17.0279 11.328 17.1719C10.896 17.2999 10.456 17.3959 10.008 17.4599C9.56 17.5399 9.104 17.5799 8.64 17.5799C7.488 17.5799 6.392 17.3959 5.352 17.0279C4.328 16.6599 3.408 16.1159 2.592 15.3959C1.792 14.6759 1.16 13.7799 0.696 12.7079C0.232 11.6199 0 10.3639 0 8.93992C0 7.70792 0.208 6.57192 0.624 5.53192C1.056 4.49192 1.656 3.59592 2.424 2.84392C3.208 2.07592 4.128 1.48392 5.184 1.06792C6.24 0.635922 7.392 0.419922 8.64 0.419922C9.344 0.419922 10.032 0.499922 10.704 0.659922C11.376 0.819921 12.008 1.05192 12.6 1.35592Z' fill='%23EEAF10'/%3E%3C/svg%3E%0A"); + background-color: rgba(238, 175, 16, .2); +} +#dtl-btn[data-grade="D"]::after { + background-image: url("data:image/svg+xml,%3Csvg width='15' height='18' viewBox='0 0 15 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.7 0.600098C8.852 0.600098 9.876 0.816098 10.772 1.2481C11.668 1.6801 12.42 2.2881 13.028 3.0721C13.652 3.8401 14.116 4.7361 14.42 5.7601C14.74 6.7681 14.9 7.8481 14.9 9.0001C14.9 10.5521 14.62 11.9681 14.06 13.2481C13.5 14.5121 12.684 15.5201 11.612 16.2721C10.556 17.0241 9.252 17.4001 7.7 17.4001H1.964C1.548 17.4001 1.196 17.2641 0.908 16.9921C0.636 16.7041 0.5 16.3521 0.5 15.9361V2.0641C0.5 1.6481 0.636 1.3041 0.908 1.0321C1.196 0.744098 1.548 0.600098 1.964 0.600098H7.7ZM7.46 14.6401C8.468 14.6401 9.292 14.3841 9.932 13.8721C10.572 13.3441 11.036 12.6561 11.324 11.8081C11.628 10.9441 11.78 10.0081 11.78 9.0001C11.78 8.2481 11.692 7.5361 11.516 6.8641C11.356 6.1761 11.1 5.5761 10.748 5.0641C10.396 4.5361 9.948 4.1201 9.404 3.8161C8.86 3.5121 8.212 3.3601 7.46 3.3601H3.26L3.5 3.1441V14.9041L3.356 14.6401H7.46Z' fill='%23F26A4F'/%3E%3C/svg%3E%0A"); + background-color: rgba(242, 106, 79, .2); +} +#dtl-btn[data-grade="E"]::after { + background-image: url("data:image/svg+xml,%3Csvg width='12' height='18' viewBox='0 0 12 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.964 0.600098H10.004C10.42 0.600098 10.764 0.736098 11.036 1.0081C11.324 1.2641 11.468 1.6001 11.468 2.0161C11.468 2.4161 11.324 2.7441 11.036 3.0001C10.764 3.2401 10.42 3.3601 10.004 3.3601H3.284L3.5 2.9521V7.6321L3.308 7.4401H8.924C9.34 7.4401 9.684 7.5761 9.956 7.8481C10.244 8.1041 10.388 8.4401 10.388 8.8561C10.388 9.2561 10.244 9.5841 9.956 9.8401C9.684 10.0801 9.34 10.2001 8.924 10.2001H3.38L3.5 10.0081V14.8561L3.308 14.6401H10.004C10.42 14.6401 10.764 14.7841 11.036 15.0721C11.324 15.3441 11.468 15.6641 11.468 16.0321C11.468 16.4321 11.324 16.7601 11.036 17.0161C10.764 17.2721 10.42 17.4001 10.004 17.4001H1.964C1.548 17.4001 1.196 17.2641 0.908 16.9921C0.636 16.7041 0.5 16.3521 0.5 15.9361V2.0641C0.5 1.6481 0.636 1.3041 0.908 1.0321C1.196 0.744098 1.548 0.600098 1.964 0.600098Z' fill='%23F32D2F'/%3E%3C/svg%3E%0A"); + background-color: rgba(243, 45, 47, .2); +} + +/* Panel */ +#dtl-panel { + --dtl-panel-w: 30rem; + width: var(--dtl-panel-w); + position: fixed; + right: 2rem; + top: 2rem; + bottom: 5.5rem; + color: var(--color-white); +} +#dtl-panel > header { + border-color: var(--color-white-10); +} +#dtl-panel button { + color: inherit; +} +#dtl-panel [data-icon="close"] { + --icon-size: 1.25rem; + width: 2.5rem; + height: 2.5rem; + padding: 0; +}