ocelot-Social-Community/ocelot.social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/ocelot.social.git synced 2025-12-13 07:46:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix button border-colors and hover

Browse Source
This commit is contained in:
Wolfgang Huß 2024-05-14 11:31:56 +02:00
parent 357771c92e
commit 3b8580edb8
2 changed files with 38 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
docs/.vuepress/styles/palette.scss
View File

@ -1,3 +1,6 @@
// Style config: https://theme-hope.vuejs.press/config/style.html
// Customize color: https://theme-hope.vuejs.press/guide/customize/color.html
@font-face { @font-face {
font-family: 'Noto Sans'; font-family: 'Noto Sans';
font-style: normal; font-style: normal;
@ -14,10 +17,10 @@
$font-family: '"Noto Sans", sans-serif' !default; $font-family: '"Noto Sans", sans-serif' !default;
$font-family-heading: '"Noto Sans Bold", sans-serif' !default; $font-family-heading: '"Noto Sans Bold", sans-serif' !default;
$theme-color: #17b53f; $theme-color: #17b53f;
$text-color: (
html[data-theme="dark"] body { light: #2c3e50,
color: #b3b3b3; dark: #b3b3b3,
} );
body { body {
font-family: 'Noto Sans'; font-family: 'Noto Sans';
@ -27,46 +30,56 @@ h1, h2, h3, h4 {
font-family: 'Noto Sans Bold'; font-family: 'Noto Sans Bold';
}; };
Button { .theme-hope-content Button {
font-size: 1.1em; font-size: 1.1em;
color: rgba(0, 0, 0, 0.85); color: var(--text-color);
border-color: rgba(0, 0, 0, 0.85); background-color: rgba(0, 0, 0, 0);
border-color: #e5e4e6;
transition: 0.3s; transition: 0.3s;
border-width: 2px !important; border-width: 2px !important;
border-style: solid; border-style: solid;
border-radius: 5px; border-radius: 5px;
padding: 12px 16px; padding: 12px 16px;
cursor: grab; cursor: grab;
html[data-theme="dark"] & {
background-color: rgba(0, 0, 0, 0);
}
} }
html[data-theme="dark"] Button { .theme-hope-content Button:hover {
color: rgba(255, 255, 255, 0.85); color: black;
background-color: rgba(0, 0, 0, 0); background-color: #f5f4f6;
border-color: rgba(255, 255, 255, 0.66); border-color: #e5e4e6;
html[data-theme="dark"] & {
color: white !important;
background-color: rgba(255, 255, 255, 0.15) !important;
border-color: white !important;
}
} }
.hero-button { .hero-button {
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85) !important;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
border-color: rgba(255, 255, 255, 0.66); border-color: rgba(255, 255, 255, 0.66);
} }
.hero-button:hover { .hero-button:hover {
color: white; color: white !important;
background-color: rgba(255, 225, 255, 0.15); background-color: rgba(255, 255, 255, 0.15) !important;
border-color: white; border-color: white !important;
} }
.donate-button { .theme-hope-content Button.donate-button {
background-color: $theme-color; background-color: $theme-color !important;
opacity: 0.85; opacity: 0.85 !important;
border: 0; border: 0 !important;
color: white; color: white !important;
// margin-bottom: 20px;
}; };
.donate-button:hover { .theme-hope-content Button.donate-button:hover {
opacity: 1.0; opacity: 1.0 !important;
}; };
.image-grid { .image-grid {
@ -111,7 +124,7 @@ html[data-theme="dark"] Button {
.hero-button:hover { .hero-button:hover {
color: white; color: white;
background-color: rgba(255, 225, 255, 0.15); background-color: rgba(255, 255, 255, 0.15);
border-color: white; border-color: white;
cursor: grab; cursor: grab;
} }

2
docs/de/README.md
View File

@ -20,7 +20,7 @@ tagLine:
<span id="slogan-1" class="slogan">Freie Open-Source-Software</span> <span id="slogan-1" class="slogan">Freie Open-Source-Software</span>
<span id="slogan-2" class="slogan">für dein soziales Netzwerk</span> <span id="slogan-2" class="slogan">für dein soziales Netzwerk</span>
</div> </div>
<a id="hero-button" href="#benefits"> <a href="#benefits">
<Button class="hero-button"> <Button class="hero-button">
Entdecke mehr Entdecke mehr
</Button> </Button>