ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-12 23:35:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add background color definitions

Browse Source 
Add background ribbon colors

Co-authored-by: Tirokk <wolle.huss@pjannto.com>
Co-authored-by: entermex <max@infinity.labs.ooo>
This commit is contained in:
elweyn 2023-06-05 12:57:15 +02:00
parent 1626b06948
commit 93a679c17a
2 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
webapp/assets/_new/styles/tokens.scss
View File

@ -11,7 +11,6 @@ $color-primary-inverse: rgb(241, 253, 244);
$color-secondary: rgb(0, 142, 230);
$color-secondary-active: rgb(10, 161, 255);
$color-secondary-inverse: rgb(240, 249, 255);
$color-third: rgb(160,103,255);
$color-success: rgb(23, 181, 63);
$color-success-active: rgb(26, 203, 71);
$color-success-inverse: rgb(241, 253, 244);
@ -91,6 +90,9 @@ $background-color-primary-inverse: rgb(241, 253, 244);
$background-color-secondary: rgb(0, 142, 230);
$background-color-secondary-active: rgb(10, 161, 255);
$background-color-secondary-inverse: rgb(240, 249, 255);
$background-color-third: rgb(126, 82, 204);
$background-color-third-active: rgb(160, 103, 255);
$background-color-third-inverse: rgb(239, 230, 255);
$background-color-success: rgb(23, 181, 63);
$background-color-success-active: rgb(26, 203, 71);
$background-color-success-inverse: rgb(241, 253, 244);
@ -396,3 +398,12 @@ $color-toast-orange: $color-warning;
$color-toast-yellow: $color-yellow;
$color-toast-blue: $color-secondary;
$color-toast-green: $color-success;
/**
* @tokens Ribbon Color
*/
$color-ribbon-event: $background-color-third;
$color-ribbon-event-active: $background-color-third-active;
$color-ribbon-article: $background-color-secondary;
$color-ribbon-article-active: $background-color-secondary-active;

8
webapp/components/Ribbon/index.vue
View File

@ -25,7 +25,7 @@ export default {
padding: $size-ribbon $size-ribbon;
border-radius: $border-radius-small 0 0 $border-radius-small;
color: $color-neutral-100;
background-color: $background-color-secondary-active;
background-color: $color-ribbon-article-active;
font-size: $font-size-x-small;
font-weight: $font-weight-bold;
@ -36,7 +36,7 @@ export default {
bottom: -$size-ribbon;
border-width: $border-size-large 4px $border-size-large $border-size-large;
border-style: solid;
border-color: $background-color-secondary transparent transparent $background-color-secondary;
border-color: $color-ribbon-article transparent transparent $color-ribbon-article;
}
&.--pinned {
@ -48,10 +48,10 @@ export default {
}
}
.eventBg {
background-color: $color-third;
background-color: $color-ribbon-event-active;
&::before {
border-color: $color-third transparent transparent $color-third;
border-color: $color-ribbon-event transparent transparent $color-ribbon-event;
}
}
</style>