mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-06-02 11:32:02 +00:00
dca01e6817
Fixes: https://github.com/woodpecker-ci/woodpecker/issues/1079 What do you think about using a consistent `woodpecker` color scheme? Right now, the `lime` color scheme from windicss is used that does not really fit the primary color used for the documentation website. I have used the primary color `#4CAF50` from the docs and created a color palette with https://palettte.app/: <details> <summary>JSON source</summary> ```Json [ { "paletteName": "New Palette", "swatches": [ { "name": "New Swatch", "color": "166E30" }, { "name": "New Swatch", "color": "248438" }, { "name": "New Swatch", "color": "369943" }, { "name": "New Swatch", "color": "4CAF50" }, { "name": "New Swatch", "color": "68C464" }, { "name": "New Swatch", "color": "8AD97F" } ] } ] ``` </details>  I have added this color scheme to the windicss config and replaced the use of `lime` in the UI. While `woodpecker-300` would be the primary color that is used for the docs, I currently use `woodpecke-400` as primary color for the UI to fix some contrast issues.   What do you think? If you would like to stay with the current colors, that's fine for me, I can just use the custom CSS feature in this case. --------- Co-authored-by: 6543 <6543@obermui.de>
151 lines
5.1 KiB
CSS
151 lines
5.1 KiB
CSS
:root,
|
|
:root[data-theme='light'] {
|
|
--wp-background-100: theme('colors.white');
|
|
--wp-background-200: theme('colors.gray.100');
|
|
--wp-background-300: theme('colors.gray.200');
|
|
--wp-background-400: theme('colors.gray.300');
|
|
|
|
--wp-text-100: theme('colors.gray.600');
|
|
--wp-text-200: theme('colors.gray.700');
|
|
--wp-text-alt-100: theme('colors.gray.500');
|
|
|
|
--wp-primary-100: theme('colors.int-wp-primary.300');
|
|
--wp-primary-200: theme('colors.int-wp-primary.400');
|
|
--wp-primary-300: theme('colors.int-wp-primary.500');
|
|
--wp-primary-text-100: theme('colors.white');
|
|
|
|
--wp-control-neutral-100: theme('colors.white');
|
|
--wp-control-neutral-200: theme('colors.gray.300');
|
|
--wp-control-neutral-300: theme('colors.gray.400');
|
|
|
|
--wp-control-info-100: theme('colors.int-wp-control-info.100');
|
|
--wp-control-info-200: theme('colors.int-wp-control-info.200');
|
|
--wp-control-info-300: theme('colors.int-wp-control-info.300');
|
|
|
|
--wp-control-ok-100: theme('colors.int-wp-control-ok.100');
|
|
--wp-control-ok-200: theme('colors.int-wp-control-ok.200');
|
|
--wp-control-ok-300: theme('colors.int-wp-control-ok.300');
|
|
|
|
--wp-control-error-100: theme('colors.int-wp-control-error.100');
|
|
--wp-control-error-200: theme('colors.int-wp-control-error.200');
|
|
--wp-control-error-300: theme('colors.int-wp-control-error.300');
|
|
|
|
--wp-state-error-100: theme('colors.int-wp-state-error.100');
|
|
--wp-state-neutral-100: theme('colors.int-wp-state-neutral.100');
|
|
--wp-state-ok-100: theme('colors.int-wp-state-ok.100');
|
|
--wp-state-info-100: theme('colors.int-wp-state-info.100');
|
|
--wp-state-warn-100: theme('colors.int-wp-state-warn.100');
|
|
|
|
--wp-hint-warn-100: theme('colors.int-wp-hint-warn.100');
|
|
--wp-hint-warn-200: theme('colors.int-wp-hint-warn.200');
|
|
|
|
--wp-code-100: theme('colors.int-wp-secondary.300');
|
|
--wp-code-200: theme('colors.int-wp-secondary.600');
|
|
--wp-code-text-100: theme('colors.gray.200');
|
|
|
|
--wp-link-100: theme('colors.blue.600');
|
|
--wp-link-200: theme('colors.blue.700');
|
|
}
|
|
|
|
:root[data-theme='dark'] {
|
|
--wp-background-100: theme('colors.int-wp-secondary.300');
|
|
--wp-background-200: theme('colors.int-wp-secondary.400');
|
|
--wp-background-300: theme('colors.int-wp-secondary.500');
|
|
--wp-background-400: theme('colors.int-wp-secondary.600');
|
|
|
|
--wp-text-100: theme('colors.gray.300');
|
|
--wp-text-200: theme('colors.gray.200');
|
|
--wp-text-alt-100: theme('colors.gray.400');
|
|
|
|
--wp-primary-100: theme('colors.int-wp-secondary.300');
|
|
--wp-primary-200: theme('colors.int-wp-secondary.400');
|
|
--wp-primary-300: theme('colors.int-wp-secondary.600');
|
|
--wp-primary-text-100: theme('colors.gray.300');
|
|
|
|
--wp-control-neutral-100: theme('colors.int-wp-secondary.300');
|
|
--wp-control-neutral-200: theme('colors.int-wp-secondary.600');
|
|
--wp-control-neutral-300: theme('colors.int-wp-secondary.700');
|
|
|
|
--wp-control-info-100: theme('colors.int-wp-control-info-dark.100');
|
|
--wp-control-info-200: theme('colors.int-wp-control-info-dark.200');
|
|
--wp-control-info-300: theme('colors.int-wp-control-info-dark.300');
|
|
|
|
--wp-control-ok-100: theme('colors.int-wp-control-ok-dark.100');
|
|
--wp-control-ok-200: theme('colors.int-wp-control-ok-dark.200');
|
|
--wp-control-ok-300: theme('colors.int-wp-control-ok-dark.300');
|
|
|
|
--wp-control-error-100: theme('colors.int-wp-control-error-dark.100');
|
|
--wp-control-error-200: theme('colors.int-wp-control-error-dark.200');
|
|
--wp-control-error-300: theme('colors.int-wp-control-error-dark.300');
|
|
|
|
--wp-state-error-100: theme('colors.int-wp-state-error-dark.100');
|
|
--wp-state-neutral-100: theme('colors.int-wp-state-neutral.100');
|
|
--wp-state-ok-100: theme('colors.int-wp-state-ok-dark.100');
|
|
--wp-state-info-100: theme('colors.int-wp-state-info-dark.100');
|
|
--wp-state-warn-100: theme('colors.int-wp-state-warn-dark.100');
|
|
|
|
--wp-hint-warn-100: theme('colors.int-wp-hint-warn-dark.100');
|
|
--wp-hint-warn-200: theme('colors.int-wp-hint-warn-dark.200');
|
|
|
|
--wp-code-100: theme('colors.int-wp-secondary.700');
|
|
--wp-code-200: theme('colors.int-wp-secondary.800');
|
|
--wp-code-text-100: theme('colors.gray.300');
|
|
|
|
--wp-link-100: theme('colors.blue.400');
|
|
--wp-link-200: theme('colors.blue.500');
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#app {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.vue-notification {
|
|
@apply rounded-md text-base border-l-6;
|
|
}
|
|
|
|
.vue-notification .notification-title {
|
|
@apply font-normal text-base;
|
|
}
|
|
|
|
.vue-notification.success {
|
|
@apply !bg-wp-control-ok-100 !border-l-wp-control-ok-300;
|
|
}
|
|
|
|
.vue-notification.error {
|
|
@apply !bg-wp-control-error-100 !border-l-wp-control-error-300;
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
@apply bg-transparent w-12px h-12px;
|
|
}
|
|
|
|
* {
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
transition: background 0.2s ease-in-out;
|
|
border: 3px solid transparent;
|
|
@apply bg-cool-gray-200 dark:bg-dark-200 rounded-full bg-clip-content;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-cool-gray-300 dark:bg-dark-100;
|
|
}
|
|
|
|
*::-webkit-scrollbar-corner {
|
|
@apply bg-transparent;
|
|
}
|
|
|
|
.code-box {
|
|
@apply bg-wp-code-200 p-4 rounded-md text-wp-code-text-100 text-sm break-words;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.code-box-inline {
|
|
@apply bg-wp-code-200 rounded-md text-wp-code-text-100;
|
|
}
|