From c65cc82c6710c80ff73a2aeb15a7a5ac202c709a Mon Sep 17 00:00:00 2001 From: brooke Date: Sun, 3 Nov 2024 09:50:31 -0500 Subject: [PATCH] add donate modal --- public/index.html | 25 ++++++++- public/style.css | 134 +++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 151 insertions(+), 8 deletions(-) diff --git a/public/index.html b/public/index.html index f638566..be7e24b 100755 --- a/public/index.html +++ b/public/index.html @@ -39,8 +39,8 @@
    • -
  • Uptime @@ -56,6 +56,27 @@ If you're interested in getting our help or just want to chat, send us a message through our contact email on the next tab.

    ദ്ദി { ˉ͈̀꒳ˉ͈́ }✧

    +
    + donate +
    +
    diff --git a/public/style.css b/public/style.css index eb3e259..10501a2 100755 --- a/public/style.css +++ b/public/style.css @@ -63,7 +63,7 @@ body, gap: 25px; display: flex; flex-direction: column; - border: 4px solid #f3bbae92; + border: 4px solid #9a756c; text-align: left; z-index: 10; background-color: #241917; @@ -99,8 +99,8 @@ body, cursor: pointer; border-width: 0 4px 4px 0; border-style: solid; - border-color: #f3bbae92; - font-size: var(--primary-text-size); + border-color: #9a756c; + font-size: 10px; } .tab-link { @@ -156,10 +156,18 @@ ul.custom-bullet li::before { transition: all 0.3s; } +.tab:hover a, +.tab:hover svg { + color: #241917 !important; + fill: #241917 !important; + transition: all 0.3s; +} + .tab:hover label { - background-color: #f3bbae92; + background-color: #9a756c; color: #241917; font-weight: 700; + transition: all 0.3s; } .tab-content { @@ -172,7 +180,7 @@ ul.custom-bullet li::before { .tabbed [type="radio"]:nth-of-type(3):checked~.tabs .tab:nth-of-type(3) label, .tabbed [type="radio"]:nth-of-type(4):checked~.tabs .tab:nth-of-type(4) label, .tabbed [type="radio"]:nth-of-type(5):checked~.tabs .tab:nth-of-type(5) label { - background-color: #f3bbae92; + background-color: #9a756c; color: #241917; font-weight: 700; } @@ -190,7 +198,7 @@ ul.custom-bullet li::before { font-size: var(--primary-text-size); background-color: #241917; color: #fff !important; - border: 4px solid #f3bbae92; + border: 4px solid #9a756c; padding: 5px; } @@ -267,4 +275,118 @@ a { display: flex; justify-content: center; align-items: center; +} + +.modal-window { + position: fixed; + background-color: rgba(0, 0, 0, 0.45); + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 999; + visibility: hidden; + opacity: 0; + pointer-events: none; + transition: all 0.3s; + + &:target { + visibility: visible; + opacity: 1; + pointer-events: auto; + } + + &>div { + width: 400px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 2em; + background: #241917; + } + + header { + font-weight: bold; + } + + h1 { + font-size: 150%; + margin: 0 0 15px; + } +} + +.modal-close { + line-height: 14px; + font-size: 18px; + text-decoration: none; + position: absolute; + right: 0; + top: 0; + border-bottom: 4px solid #9a756c; + border-left: 4px solid #9a756c; + padding: 0.25rem 0.35rem; + + &:hover { + color: #241917 !important; + background-color: #9a756c; + } +} + +.modal-window { + &>div { + border: 4px solid #9a756c; + padding: 1rem; + } +} + +.modal-window div:not(:last-of-type) { + margin-bottom: 15px; +} + +.logo { + max-width: 150px; + display: block; +} + +.btn { + background-color: #241917; + padding: 0.1rem 0.5rem; + border: 4px solid #9a756c; + text-decoration: none; + font-size: var(--primary-text-size); + margin-top: 0.75rem; + width: 4rem; +} + +.btn:hover { + background-color: #9a756c; + color: #241917 !important; + font-weight: 700; + transition: all 0.3s; +} + +.modal-text { + line-height: 1.6; + margin: 0; + font-size: var(--primary-text-size); +} + +.modal-body { + padding-right: 1rem; +} + +.crypto-address { + word-wrap: break-word; + display: block; + font-size: 12px !important; + background-color: #241917; + color: #fff; + border: 4px solid #9a756c; + padding: 5px; +} + +.crypto-name { + font-size: 10px; + font-weight: 400; } \ No newline at end of file