mycosystems/myco.systems
3
0
Fork 0
Code Pull requests Activity Actions

Merge pull request 'rework-tabs' (#4) from rework-tabs into main
All checks were successful
Static / build (push) Successful in -1s
Details

Browse source 
Reviewed-on: https://git.myco.systems/mycosystems/myco.systems/pulls/4
This commit is contained in:
brooke 2024-11-03 15:09:50 +00:00
commit 8047f1293c
2 changed files with 311 additions and 237 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

184
public/index.html
View file

@ -30,114 +30,104 @@
<body> <body>
<div class="center-text"> <div class="center-text">
<input type="radio" id="tab-links" name="tab" checked style="display: none" /> <div class="tabbed">
<input type="radio" id="tab-contact" name="tab" style="display: none" /> <input type="radio" id="tab1" name="css-tabs" checked>
<input type="radio" id="tab-dash" name="tab" style="display: none" /> <input type="radio" id="tab2" name="css-tabs">
<input type="radio" id="tab3" name="css-tabs">
<div class="tabs"> <ul class="tabs">
<label for="tab-links" class="tab">Home</label> <li class="tab"><label for="tab1">Home</label></li>
<label for="tab-contact" class="tab">Contact</label> <li class="tab"><label for="tab2">Contact</label></li>
<label for="tab-dash" class="tab">Dashboard</label> <li class="tab"><label for="tab3">Dashboard</label></li>
<a target="_blank" href="https://uptime.myco.systems/" class="tab-link">Uptime <svg class="tab-icon" <li class="tab"><label><a style="text-decoration: none;" target="_blank"
viewBox="0 0 512 512"> href="https://uptime.myco.systems/">Uptime<svg class="tab-icon" viewBox="0 0 512 512">
<path
d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" />
</svg></a>
</div>
<div id="linksTab" class="tab-content">
<p>Hi! It's good to see you \( ' o ' )/</p><br>
<p>We're a tech collective that's
trying to make open source hosted services more viable in a broad
variety of cases.<br /><br />We build deployments for companies,
non-profits, and individuals to expand the reach of open source
services.<br /><br />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.</p>
<p>ദ്ദി { ˉ͈̀꒳ˉ͈́ }✧</p>
<div class="bullet-text">
<ul class="links">
<li>
<a href="https://coop.myco.systems" target="_blank">Blog<svg class="text-icon" viewBox="0 0 512 512">
<path <path
d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" /> d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z">
</svg></a> </path>
</li> </svg></a></label></li>
<li> </ul>
<a href="https://web.myco.systems" target="_blank">Contract us!<svg class="text-icon" viewBox="0 0 512 512">
<path
d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" />
</svg></a>
</li>
<li>
<a href="https://git.myco.systems/explore/repos" target="_blank">Source<svg class="text-icon"
viewBox="0 0 512 512">
<path
d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" />
</svg></a>
</li>
</ul>
</div>
<details class="modal"> <div class="tab-content">
<summary class="modal__toggle"></summary> <p>Hi! It's good to see you \( ' o ' )/<br><br>
<div class="modal__background"> We're a tech collective that's trying to make open source hosted services more viable in a broad variety of
<div class="modal__body" tabindex="-1" role="dialog" aria-labelledby="modal__label" aria-live="assertive" cases.<br><br>
aria-modal="true"> We build deployments for companies, non-profits, and individuals to expand the reach of open source
<p id="modal__label" class="modal__text"> services.<br><br>
Donations go to making sure we can keep all of our free services If you're interested in getting our help or just want to chat, send us a message through our contact email
running ♡⸜(ˆᗜˆ˵ )⸝♡ on the next tab.<br><br>
<br /><br /> ദ്ദി { ˉ͈̀꒳ˉ͈́ }✧</p>
<b>The following cryptocurrencies are supported:</b> <div class="bullet-text">
<br /><br /> <a href="https://coop.myco.systems" target="_blank">Blog<svg class="text-icon" viewBox="0 0 512 512">
<b class="crypto-name">Monero (XMR):</b><span <path
class="crypto-address">49r2aeun8DtV5VqZpZSwRpS83WfUWEaLt4NG8HJwwVkbiT1vSsXTXrPFKkKTdc6MPX9iezbTidNPvhGZKCnM1338TfK6Hgi</span> d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" />
<br /> </svg></a>
<b class="crypto-name">Litecoin (LTC):</b><span <a href="https://web.myco.systems" target="_blank">Contract us!<svg class="text-icon" viewBox="0 0 512 512">
class="crypto-address">LRAm7h5XENknfYEpbdVsvyGY8D6MiXGTDV</span> <path
<br /> d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" />
<b class="crypto-name">Bitcoin (BTC):</b><span </svg></a>
class="crypto-address">bc1qkv97ajh7f0a72l9rsjd3fmmly5q5uywr06q3x0</span> <a href="https://git.myco.systems/explore/repos" target="_blank">Source<svg class="text-icon"
viewBox="0 0 512 512">
<path
d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" />
</svg></a>
</div>
<a class="btn" href="#open-modal">donate</a>
<div id="open-modal" class="modal-window">
<div>
<a href="#" title="Close" class="modal-close">×</a>
<p class="modal-text">
<p>
<p class="modal-body"> Donations go to making sure we can keep all of our free services
running ♡⸜(ˆᗜˆ˵ )⸝♡<br><br>
The following cryptocurrencies are supported:<br><br></p>
<b class="crypto-name">Monero (XMR):</b><span
class="crypto-address">49r2aeun8DtV5VqZpZSwRpS83WfUWEaLt4NG8HJwwVkbiT1vSsXTXrPFKkKTdc6MPX9iezbTidNPvhGZKCnM1338TfK6Hgi</span><br>
<b class="crypto-name">Litecoin (LTC):</b><span
class="crypto-address">LRAm7h5XENknfYEpbdVsvyGY8D6MiXGTDV</span><br>
<b class="crypto-name">Bitcoin (BTC):</b><span
class="crypto-address">bc1qkv97ajh7f0a72l9rsjd3fmmly5q5uywr06q3x0</span>
</p> </p>
</div> </div>
</div> </div>
</details> </div>
</div>
<div id="contactTab" class="tab-content">
<p>Send us a cool message and we'll get back to you<br>d-(´▽｀)-b</p><br>
<p class="code">contact @ myco (dot) systems</p>
<p style="font-size: 12px;">Encryption is not required, but we highly recommend it.</p>
<span class="code">-----BEGIN PGP PUBLIC KEY
BLOCK-----<br />mDMEZcQaFBYJKwYBBAHaRw8BAQdAKjok4wl0tBlYyTj6qw4nu6AqTdU+OGorGE5d8N7bLXW0Ik15Y29TeXN0ZW1zIDxjb250YWN0QG15Y28uc3lzdGVtcz6IkwQTFgoAOxYhBCw75FUiGzj0ZvOJhZ1ZZp3r0s3IBQJlxBoUAhsDBQsJCAcCAiICBhUKCQgLAgQWAgMBAh4HAheAAAoJEJ1ZZp3r0s3I38QA/3yK6QODeRsfoGimd1OX3BA/Y1OxKTl2GS7OiyTcRotyAQC905hPTwaAYFbru1W1S8p+zDrWjGJ7jXMevOZlsF9GD7g4BGXEGhQSCisGAQQBl1UBBQEBB0B2d2SSG7eCIrTKA9xO45414eS3THHwX63dkaqbexwHJwMBCAeIeAQYFgoAIBYhBCw75FUiGzj0ZvOJhZ1ZZp3r0s3IBQJlxBoUAhsMAAoJEJ1ZZp3r0s3INzMA/AoCN+h/eG+7ByTsZUAGY6gKsSfQgy86PjijfrusC/3TAQDMNrMjzq2sIZhUZSaK8Q5pzgSFPloqk4QG1FRi4x0zAA===Pg50<br />-----END
PGP PUBLIC KEY BLOCK-----</span>
</div>
<div id="dashTab" class="tab-content"> <div class="tab-content">
<p>Check out some of our free services and projects (⌐⊙_⊙)</p> <p>Send us a cool message and we'll get back to you d-(´▽｀)-b</p><br>
<div class="dashboard bullet-text"> <p class="code">contact @ myco (dot) systems</p>
<ul class="links"> <p style="font-size: 10px;">Encryption is not required, but we highly recommend it.</p>
<p>Free Services</p> <span class="code">-----BEGIN PGP PUBLIC KEY
<ul> BLOCK-----<br />mDMEZcQaFBYJKwYBBAHaRw8BAQdAKjok4wl0tBlYyTj6qw4nu6AqTdU+OGorGE5d8N7bLXW0Ik15Y29TeXN0ZW1zIDxjb250YWN0QG15Y28uc3lzdGVtcz6IkwQTFgoAOxYhBCw75FUiGzj0ZvOJhZ1ZZp3r0s3IBQJlxBoUAhsDBQsJCAcCAiICBhUKCQgLAgQWAgMBAh4HAheAAAoJEJ1ZZp3r0s3I38QA/3yK6QODeRsfoGimd1OX3BA/Y1OxKTl2GS7OiyTcRotyAQC905hPTwaAYFbru1W1S8p+zDrWjGJ7jXMevOZlsF9GD7g4BGXEGhQSCisGAQQBl1UBBQEBB0B2d2SSG7eCIrTKA9xO45414eS3THHwX63dkaqbexwHJwMBCAeIeAQYFgoAIBYhBCw75FUiGzj0ZvOJhZ1ZZp3r0s3IBQJlxBoUAhsMAAoJEJ1ZZp3r0s3INzMA/AoCN+h/eG+7ByTsZUAGY6gKsSfQgy86PjijfrusC/3TAQDMNrMjzq2sIZhUZSaK8Q5pzgSFPloqk4QG1FRi4x0zAA===Pg50<br />-----END
<li> PGP PUBLIC KEY BLOCK-----</span>
<a href="https://paste.myco.systems" target="_blank">PrivateBin</a> </div>
</li>
<li> <div class="tab-content">
<a href="https://collab.myco.systems" target="_blank">HedgeDoc</a> <p>Check out some of our free services and projects (⌐⊙_⊙)</p>
</li> <div class="dashboard bullet-text">
<ul class="links">
<p>Free Services</p>
<ul class="custom-bullet">
<li>
<a href="https://paste.myco.systems" target="_blank">PrivateBin</a>
</li>
<li>
<a href="https://collab.myco.systems" target="_blank">HedgeDoc</a>
</li>
</ul>
</ul> </ul>
</ul> <ul class="custom-bullet">
<ul> <p>Projects</p>
<p>Projects</p> <ul>
<ul> <li>
<li> <a href="https://squattheplanet.com" target="_blank">Squat The Planet</a>
<a href="https://squattheplanet.com" target="_blank">Squat The Planet</a> </li>
</li> </ul>
</ul> </ul>
</ul> </div>
</div> </div>
</div> </div>
</div> <script src="./simplex.js"></script>
<script src="./simplex.js"></script> <script src="./script.js"></script>
<script src="./script.js"></script>
</body> </body>
</html> </html>

364
public/style.css
View file

@ -1,5 +1,6 @@
:root { :root {
--size: calc(100vmin / 1.618033988749895); --size: calc(100vmin / 1.618033988749895);
--primary-text-size: 12px;
} }
html, html,
@ -29,7 +30,7 @@ body,
max-height: 100%; max-height: 100%;
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
font: 12px/12px "Iosevka Web", monospace; font: 10px/10px "Iosevka Web", monospace;
} }
.braille>* { .braille>* {
@ -62,11 +63,11 @@ body,
gap: 25px; gap: 25px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: 4px solid #f3bbae92; border: 4px solid #9a756c;
text-align: left; text-align: left;
z-index: 10; z-index: 10;
background-color: #241917; background-color: #241917;
max-width: 35rem; max-width: 30rem;
top: 30%; top: 30%;
left: 15%; left: 15%;
} }
@ -81,13 +82,6 @@ body,
} }
} }
.tabs {
display: flex;
overflow-x: auto;
white-space: nowrap;
padding-bottom: 2px;
}
::-webkit-scrollbar { ::-webkit-scrollbar {
height: 3px; height: 3px;
} }
@ -103,11 +97,10 @@ body,
.tab, .tab,
.tab-link { .tab-link {
cursor: pointer; cursor: pointer;
padding: 4px 15px;
border-width: 0 4px 4px 0; border-width: 0 4px 4px 0;
border-style: solid; border-style: solid;
border-color: #f3bbae92; border-color: #9a756c;
font-size: 12px; font-size: 10px;
} }
.tab-link { .tab-link {
@ -122,53 +115,101 @@ body,
width: 12px; width: 12px;
} }
.tab-content { a {
word-wrap: break-word; color: #f3bbae;
transition: all 0.3s;
}
p {
margin: 0;
font-size: var(--primary-text-size);
}
.tabbed {
overflow-x: hidden;
}
.tabbed [type="radio"] {
display: none; display: none;
padding: 20px 20px; }
padding-top: 0px;
ul.custom-bullet {
list-style-type: none;
}
ul.custom-bullet li {
position: relative;
}
ul.custom-bullet li::before {
content: "-";
position: absolute;
left: -15px;
}
.tab>label {
display: flex;
margin: 0;
padding: 0.35rem 0.75rem;
cursor: pointer;
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: #9a756c;
color: #241917;
font-weight: 700;
transition: all 0.3s;
}
.tab-content {
display: none;
padding: 1rem;
}
.tab-content:has(a.btn) {
padding-bottom: 2.5rem;
}
.tabbed [type="radio"]:nth-of-type(1):checked~.tabs .tab:nth-of-type(1) label,
.tabbed [type="radio"]:nth-of-type(2):checked~.tabs .tab:nth-of-type(2) label,
.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: #9a756c;
color: #241917;
font-weight: 700;
}
.tabbed [type="radio"]:nth-of-type(1):checked~.tab-content:nth-of-type(1),
.tabbed [type="radio"]:nth-of-type(2):checked~.tab-content:nth-of-type(2),
.tabbed [type="radio"]:nth-of-type(3):checked~.tab-content:nth-of-type(3),
.tabbed [type="radio"]:nth-of-type(4):checked~.tab-content:nth-of-type(4) {
display: block;
} }
.code { .code {
word-wrap: break-word; word-wrap: break-word;
display: block; display: block;
font-size: 12px !important; font-size: var(--primary-text-size);
background-color: #241917; background-color: #241917;
color: #fff !important; color: #fff !important;
border: 4px solid #f3bbae92; border: 4px solid #9a756c;
padding: 5px; padding: 5px;
} }
#linksTab,
#contactTab,
#dashTab {
display: none;
}
#tab-links:checked~#linksTab,
#tab-contact:checked~#contactTab,
#tab-about:checked~#aboutTab,
#tab-dash:checked~#dashTab {
display: block;
}
.bullet-text { .bullet-text {
font-size: 14px; font-size: var(--primary-text-size);
text-align: left; text-align: left;
z-index: 2;
position: relative; position: relative;
} padding-top: 1rem;
.tab-content p {
color: #f3bbae;
font-size: 14px;
margin: 0 !important;
}
.tab-content a {
color: #f3bbae;
transition: color 0.1s ease;
font-size: 14px;
} }
.tab-content a[href]:hover { .tab-content a[href]:hover {
@ -185,7 +226,15 @@ ul {
list-style-type: none; list-style-type: none;
} }
ul li::before { .tabs {
display: flex;
align-items: stretch;
list-style: none;
margin: 0;
padding: 0;
}
.bullet::before {
content: "-"; content: "-";
display: inline-block; display: inline-block;
width: 1em; width: 1em;
@ -195,86 +244,138 @@ ul li::before {
padding-left: 1rem !important; padding-left: 1rem !important;
} }
.modal[open] .modal__toggle { .dashboard {
left: calc(50vw + 200px);
top: calc(15vh - 5px);
position: fixed;
z-index: 11;
}
.modal[open] .modal__toggle:focus {
outline: 0px solid rgba(0, 0, 255, 0);
}
.modal__toggle::before {
content: "Donate";
cursor: pointer;
padding-left: 10px;
padding-right: 10px;
background-color: #241917;
color: #fff;
border: 4px solid #f3bbae92;
}
.modal[open] .modal__toggle::before {
content: "✖";
color: #fff !important;
font-size: 25px;
}
.modal__toggle {
position: relative;
list-style: none;
font-size: 14px;
font-family: Monaco, monospace;
text-align: left;
z-index: 4;
}
.modal__toggle::-webkit-details-marker {
display: none;
}
.modal__toggle:hover {
cursor: pointer;
opacity: 0.8;
}
.modal__background {
background-color: rgba(0, 0, 0, 0.65);
display: flex; display: flex;
height: 100vh; flex-direction: row;
justify-content: center;
left: 0;
position: fixed;
top: 0;
width: 100vw;
z-index: 3;
} }
.modal__body { .icon,
border: 4px solid #f3bbae92; .text-icon {
background: rgba(36, 25, 23, 1); fill: #f3bbae;
width: 12px;
}
.text-icon {
padding-left: 0.5rem;
}
.tab-icon {
width: var(--primary-text-size);
color: #f3bbae; color: #f3bbae;
font-size: 1.6rem; fill: #f3bbae;
font-weight: 600; padding-left: 0.25rem;
padding: 20px 20px;
position: fixed;
text-align: left;
top: 15vh;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 400px;
z-index: 10;
word-wrap: break-word;
font-family: Monaco, monospace;
} }
.modal__text { a {
display: flex;
justify-content: center;
align-items: center;
}
.bullet-text a {
justify-content: left;
align-items: left;
}
.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.35rem 0.75rem;
border-top: 4px solid #9a756c;
border-right: 4px solid #9a756c;
text-decoration: none;
font-size: 10px;
position: absolute;
bottom: 0;
left: 0;
}
.btn:hover {
background-color: #9a756c;
color: #241917 !important;
font-weight: 700;
transition: all 0.3s;
}
.modal-text {
line-height: 1.6; line-height: 1.6;
margin: 0; margin: 0;
font-size: 12px; font-size: var(--primary-text-size);
}
.modal-body {
padding-right: 1rem;
} }
.crypto-address { .crypto-address {
@ -283,28 +384,11 @@ ul li::before {
font-size: 12px !important; font-size: 12px !important;
background-color: #241917; background-color: #241917;
color: #fff; color: #fff;
border: 4px solid #f3bbae92; border: 4px solid #9a756c;
padding: 5px; padding: 5px;
} }
.links { .crypto-name {
padding-left: 0; font-size: 10px;
} font-weight: 400;
.links a {
text-decoration-skip: spaces;
}
.dashboard {
display: flex;
flex-direction: row;
}
.icon, .text-icon {
fill: #f3bbae;
width: 12px;
}
.text-icon {
padding-left: 0.5rem;
} }