extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2024-11-22 16:13:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

style download buttons

Browse Source
This commit is contained in:
Kenneth Bingham 2023-11-23 13:02:02 -05:00
parent b481863999
commit 73ee3e6e1b
No known key found for this signature in database
GPG Key ID: 31709281860130B6
1 changed files with 20 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
website/src/css/download-card.module.css
View File

@ -1,11 +1,13 @@
:root { :root {
--contrasting-background: #c4b7f5; --contrasting-background: #c4b7f5;
--container-border: 1px solid #adadad; /* Light gray border */ --container-border: 1px solid #adadad; /* Light gray border */
--button-background-hover: #9c84f9;
} }
[data-theme="dark"] { [data-theme="dark"] {
--contrasting-background: #4b359f; --contrasting-background: #4b359f;
--container-border: 1px solid #6d6d6d; /* Light gray border */ --container-border: 1px solid #6d6d6d; /* Light gray border */
--button-background-hover: #251463;
} }
.downloadContainer { .downloadContainer {
@ -54,6 +56,24 @@
margin-bottom: 20px; /* Add some space between the list and the footer */ margin-bottom: 20px; /* Add some space between the list and the footer */
} }
.downloadCard li {
display: inline-block; /* Allows width and height to be set */
margin: 5px; /* Spacing between buttons */
padding: 10px 15px; /* Size of the button */
text-align: center; /* Centers text within the button */
text-decoration: none; /* Removes the underline from links */
background-color: var(--contrasting-background); /* Background color - Bootstrap primary button color */
border: 1px var(--container-border); /* Border color - same as background for a solid button */
border-radius: 18px; /* Rounded corners */
transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}
.downloadCard li:hover, .downloadCard li:focus {
background-color: var(--button-background-hover);
text-decoration: none; /* Ensures the text remains with no underline on hover/focus */
outline: none; /* Removes the outline on focus for a clean look */
}
.downloadCard h3 { .downloadCard h3 {
margin-top: 10px; margin-top: 10px;
} }