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:06 +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 committed by mahula
parent dcd5e5629b
commit d711f90fc1
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: rgb(0, 142, 230);
$color-secondary-active: rgb(10, 161, 255); $color-secondary-active: rgb(10, 161, 255);
$color-secondary-inverse: rgb(240, 249, 255); $color-secondary-inverse: rgb(240, 249, 255);
$color-third: rgb(160,103,255);
$color-success: rgb(23, 181, 63); $color-success: rgb(23, 181, 63);
$color-success-active: rgb(26, 203, 71); $color-success-active: rgb(26, 203, 71);
$color-success-inverse: rgb(241, 253, 244); $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: rgb(0, 142, 230);
$background-color-secondary-active: rgb(10, 161, 255); $background-color-secondary-active: rgb(10, 161, 255);
$background-color-secondary-inverse: rgb(240, 249, 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: rgb(23, 181, 63);
$background-color-success-active: rgb(26, 203, 71); $background-color-success-active: rgb(26, 203, 71);
$background-color-success-inverse: rgb(241, 253, 244); $background-color-success-inverse: rgb(241, 253, 244);
@ -396,3 +398,12 @@ $color-toast-orange: $color-warning;
$color-toast-yellow: $color-yellow; $color-toast-yellow: $color-yellow;
$color-toast-blue: $color-secondary; $color-toast-blue: $color-secondary;
$color-toast-green: $color-success; $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; padding: $size-ribbon $size-ribbon;
border-radius: $border-radius-small 0 0 $border-radius-small; border-radius: $border-radius-small 0 0 $border-radius-small;
color: $color-neutral-100; color: $color-neutral-100;
background-color: $background-color-secondary-active; background-color: $color-ribbon-article-active;
font-size: $font-size-x-small; font-size: $font-size-x-small;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
@ -36,7 +36,7 @@ export default {
bottom: -$size-ribbon; bottom: -$size-ribbon;
border-width: $border-size-large 4px $border-size-large $border-size-large; border-width: $border-size-large 4px $border-size-large $border-size-large;
border-style: solid; border-style: solid;
border-color: $background-color-secondary transparent transparent $background-color-secondary; border-color: $color-ribbon-article transparent transparent $color-ribbon-article;
} }
&.--pinned { &.--pinned {
@ -48,10 +48,10 @@ export default {
} }
} }
.eventBg { .eventBg {
background-color: $color-third; background-color: $color-ribbon-event-active;
&::before { &::before {
border-color: $color-third transparent transparent $color-third; border-color: $color-ribbon-event transparent transparent $color-ribbon-event;
} }
} }
</style> </style>