diff --git a/src/Export-information.css b/src/Export-information.css new file mode 100644 index 0000000..8486fd2 --- /dev/null +++ b/src/Export-information.css @@ -0,0 +1,159 @@ + .button2 { + display: inline-block; + transition: all 0.2s ease-in; + position: relative; + overflow: hidden; + z-index: 1; + color: #090909; + padding: 0.7em 1.7em; + cursor: pointer; + font-size: 18px; + border-radius: 0.5em; + background: #e8e8e8; + border: 1px solid #e8e8e8; + box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff; + } + + .button2:active { + color: #666; + box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff; + } + + .button2:before { + content: ""; + position: absolute; + left: 50%; + transform: translateX(-50%) scaleY(1) scaleX(1.25); + top: 100%; + width: 140%; + height: 180%; + background-color: rgba(0, 0, 0, 0.05); + border-radius: 50%; + display: block; + transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1); + z-index: -1; + } + + .button2:after { + content: ""; + position: absolute; + left: 55%; + transform: translateX(-50%) scaleY(1) scaleX(1.45); + top: 180%; + width: 160%; + height: 190%; + background-color: #009087; + border-radius: 50%; + display: block; + transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1); + z-index: -1; + } + + .button2:hover { + color: #ffffff; + border: 1px solid #009087; + } + + .button2:hover:before { + top: -35%; + background-color: #009087; + transform: translateX(-50%) scaleY(1.3) scaleX(0.8); + } + + .button2:hover:after { + top: -45%; + background-color: #009087; + transform: translateX(-50%) scaleY(1.3) scaleX(0.8); + } + + .cookie-card { + max-width: 800px; + max-height: 400px; + padding: 1rem; + background-color: #eceaea; + border-radius: 10px; + box-shadow: 20px 20px 30px rgba(0, 0, 0, .05); + } + + .title { + font-weight: 600; + color: rgb(31 41 55); + } + + .description { + margin-top: 1rem; + font-size: 0.875rem; + line-height: 1.25rem; + color: rgb(75 85 99); + } + + .description1 { + margin-top: 1rem; + font-size: 0.875rem; + line-height: 1.25rem; + color: rgb(31 41 55); + } + + .description a { + --tw-text-opacity: 1; + color: rgb(59 130 246); + } + + .description a:hover { + -webkit-text-decoration-line: underline; + text-decoration-line: underline; + } + + .actions { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 1rem; + -moz-column-gap: 1rem; + column-gap: 1rem; + flex-shrink: 0; + } + + .pref { + font-size: 0.75rem; + line-height: 1rem; + color: rgb(31 41 55 ); + -webkit-text-decoration-line: underline; + text-decoration-line: underline; + transition: all .3s cubic-bezier(0.4, 0, 0.2, 1); + border: none; + background-color: transparent; + } + + .pref:hover { + color: rgb(156 163 175); + } + + .pref:focus { + outline: 2px solid transparent; + outline-offset: 2px; + } + + .accept { + font-size: 0.75rem; + line-height: 1rem; + background-color: rgb(17 24 39); + font-weight: 500; + border-radius: 0.5rem; + color: #fff; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + border: none; + transition: all .15s cubic-bezier(0.4, 0, 0.2, 1); + } + + .accept:hover { + background-color: rgb(55 65 81); + } + + .accept:focus { + outline: 2px solid transparent; + outline-offset: 2px; + }