mirror of
https://github.com/Viren070/guides.git
synced 2025-12-01 23:16:16 +01:00
Viren070
2d306fe377
Adjust styling to increase font size and weight. set a larger consistent height and use flex-grow to make the buttons fill the available space. Also removed padding as with the available space, it shouldn't be necessary adjust the button text to make it as small as possible. Removing 'addon' as it isn't needed due to context. Renamed Install to web to Install (Web)
137 lines
3.8 KiB
CSS
137 lines
3.8 KiB
CSS
/**
|
|
* Any CSS included here will be global. The classic template
|
|
* bundles Infima by default. Infima is a CSS framework designed to
|
|
* work well for content-centric websites.
|
|
*/
|
|
|
|
/* You can override the default Infima variables here. */
|
|
:root {
|
|
--ifm-color-primary: #635b25;
|
|
--ifm-color-primary-dark: #595221;
|
|
--ifm-color-primary-darker: #544d1f;
|
|
--ifm-color-primary-darkest: #45401a;
|
|
--ifm-color-primary-light: #6d6429;
|
|
--ifm-color-primary-lighter: #72692b;
|
|
--ifm-color-primary-lightest: #817630;
|
|
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* For readability concerns, you should choose a lighter palette in dark mode. */
|
|
[data-theme='dark'] {
|
|
--ifm-color-primary: #ccc178;
|
|
--ifm-color-primary-dark: #c3b660;
|
|
--ifm-color-primary-darker: #bfb155;
|
|
--ifm-color-primary-darkest: #a5973e;
|
|
--ifm-color-primary-light: #d5cc90;
|
|
--ifm-color-primary-lighter: #d9d19b;
|
|
--ifm-color-primary-lightest: #e7e1bf;
|
|
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.header-github-link::before {
|
|
content: '';
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
background-color: var(--ifm-navbar-link-color);
|
|
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
|
|
transition: background-color var(--ifm-transition-fast)
|
|
var(--ifm-transition-timing-default);
|
|
}
|
|
|
|
.header-github-link:hover::before {
|
|
background-color: var(--ifm-navbar-link-hover-color);
|
|
}
|
|
|
|
|
|
.custom-tabs .tabs__item {
|
|
line-height: 16px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.custom-tabs .tabs__item--active {
|
|
border: 0;
|
|
color: #fff;
|
|
border-radius: var(--ifm-global-radius);
|
|
background-color: var(--ifm-tabs-color-active);
|
|
}
|
|
|
|
.hidden-tabs {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.addon-links-button-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.addon-links-row {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
gap: 10px; /* Add gap between buttons */
|
|
}
|
|
|
|
.addon-links-button {
|
|
border: none;
|
|
color: white;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border-radius: var(--ifm-global-radius);
|
|
transition: background-color 0.3s ease;
|
|
height: 75px;
|
|
flex-grow: 1; /* Allow buttons to grow and fill the available space */
|
|
flex-basis: 0; /* Ensure buttons start with zero width */
|
|
}
|
|
|
|
.addon-links-button a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: block;
|
|
}
|
|
|
|
/* Specific button colors */
|
|
.install-button {
|
|
background-color: #28a745; /* Green */
|
|
}
|
|
|
|
.install-button:hover {
|
|
background-color: #218838; /* Darker green */
|
|
}
|
|
|
|
.install-web-button {
|
|
background-color: #6f42c1; /* Purple */
|
|
}
|
|
|
|
.install-web-button:hover {
|
|
background-color: #5a32a3; /* Darker purple */
|
|
}
|
|
|
|
.configure-button {
|
|
background-color: #007bff; /* Blue */
|
|
}
|
|
|
|
.configure-button:hover {
|
|
background-color: #0056b3; /* Darker blue */
|
|
}
|
|
|
|
.source-code-button {
|
|
background-color: #ffc107; /* Yellow */
|
|
}
|
|
|
|
.source-code-button:hover {
|
|
background-color: #e0a800; /* Darker yellow */
|
|
}
|
|
|
|
.guide-link-button {
|
|
background-color: #6c757d; /* Gray */
|
|
}
|
|
|
|
.guide-link-button:hover {
|
|
background-color: #5a6268; /* Darker gray */
|
|
} |