diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 12:38:04 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 12:38:04 +0000 |
commit | 1ff5c35de5dbd70a782875a91dd2232fd01b002b (patch) | |
tree | 77d9ce5e1bf78b3e6ef79f8f6e7861e2ced3c09b /asset/css/variables.less | |
parent | Initial commit. (diff) | |
download | icinga-php-library-upstream.tar.xz icinga-php-library-upstream.zip |
Adding upstream version 0.10.1.upstream/0.10.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'asset/css/variables.less')
-rw-r--r-- | asset/css/variables.less | 166 |
1 files changed, 166 insertions, 0 deletions
diff --git a/asset/css/variables.less b/asset/css/variables.less new file mode 100644 index 0000000..1d6c895 --- /dev/null +++ b/asset/css/variables.less @@ -0,0 +1,166 @@ +/* + RECOMMENDATION: + Please do not use the base color variables directly, + define a new variable instead that assigns the value of this base variable. + Examples: + - @base-color: red; + - @my-new-var: @base-color; + - @my-second-new-var: @base-color; + + Do not use the same variable for different use cases, but define a new variable for each use case. + + NOTICE: + Color vars identification: + - Vars with `-bg` suffix are background-color vars. Please use only for setting bg-color. + - Vars with `-color` suffix are color vars. Please use only for setting fg-color. + + MODE SUPPORT: + The standard LESS variables represent the dark mode. The LESS detached ruleset `@iplWebLightRules` + contains CSS variables that represent the light mode. It must be used explicitly to have any effect. + If you use media queries to support modes, just call the ruleset inside your media query: + + @media (prefers-color-scheme: light) { + @iplWebLightRules(); + } +*/ + +@default-bg: #282E39; + +@base-gray: #c4c4c4; +@base-gray-light: #5c5c5c; +@base-gray-lighter: #4b4b4b; +@base-disabled: #9a9a9a; + +@base-primary-color: #00C3ED; +@base-primary-bg: #00C3ED; + +@default-text-color: #fff; +@default-text-color-light: fade(@default-text-color, 75%); +@default-text-color-inverted: @default-bg; + +@state-ok: #44bb77; +@state-up: @state-ok; +@state-warning: #ffaa44; +@state-critical: #ff5566; +@state-down: @state-critical; +@state-pending: #77aaff; +@state-unknown: #aa44ff; + +@primary-button-color: @default-text-color-inverted; +@primary-button-bg: @base-primary-bg; +@primary-button-hover-bg: #0081a6; + +@search-term-bg: @base-gray; +@search-term-color: @default-text-color-inverted; +@search-term-selected-bg: @base-disabled; +@search-term-invalid-bg: @state-critical; +@search-term-invalid-color: @default-text-color-inverted; +@search-term-disabled-bg: @base-disabled; +@search-term-selected-color: @base-gray-light; +@search-term-highlighted-bg: @base-primary-bg; +@search-term-highlighted-color: @default-text-color-inverted; + +@search-condition-remove-bg: @state-critical; +@search-condition-remove-color: @default-text-color-inverted; + +@search-logical-operator-bg: @base-gray-light; +@search-logical-operator-color: @default-text-color-light; + +@searchbar-bg: #404d72; +@searchbar-scrollbar-bg: @base-gray-light; + +@search-editor-control-color: @base-gray-light; +@search-editor-logical-op-bg: @base-gray-light; +@search-editor-context-menu-border-color: @base-gray-light; +@search-editor-context-menu-bg: @default-bg; +@search-editor-drag-outline-color: @base-gray; + +@control-color: @base-primary-color; +@control-hover-bg: @base-gray-lighter; +@control-disabled-color: @base-disabled; + +@cancel-button-bg: none; +@cancel-button-border-color: @state-critical; +@cancel-button-color: @state-critical; +@cancel-button-hover-bg: @state-critical; +@cancel-button-hover-color: @default-text-color-inverted; + +@suggestions-bg: @default-bg; +@suggestions-color: @default-text-color-light; +@suggestions-focus-bg: @base-primary-bg; +@suggestions-focus-color: @default-text-color-inverted; +@suggestions-default-opt-bg: fade(@base-primary-bg, 10%); +@suggestions-default-opt-color: @default-text-color-light; +@suggestions-hover-bg: fade(@base-primary-bg, 30%); +@suggestions-border-color: @base-gray-light; +@suggestions-separation-bg: @base-gray-lighter; +@suggestions-failure-message-color: @default-text-color-light; +@suggestions-relation-path-bg: @base-gray-light; +@suggestions-relation-path-focus-bg: @base-gray; + +@card-border-color: @base-gray-light; + +@iplWebLightRules: { + :root { + --base-gray: #819398; + --base-gray-light: #d0d3da; + --base-gray-lighter: #e8ecef; + --base-disabled: var(--base-gray-light); + + --base-remove-bg: @state-critical; + + --default-text-color: #535353; + --default-text-color-light: fade(#535353, 75%); // --default-text-color + --default-text-color-inverted: #F5F9FA; + + --primary-button-color: var(--default-text-color-inverted); + --primary-button-bg: @primary-button-bg; + --primary-button-hover-bg: @primary-button-hover-bg; + + --searchbar-bg: #DEECF1; + --searchbar-scrollbar-bg: var(--base-gray-light); + + --search-term-bg: var(--base-gray-light); + --search-term-color: var(--default-text-color); + --search-term-selected-bg: var(--base-disabled); + --search-term-invalid-bg: var(--base-remove-bg); + --search-term-invalid-color: var(--default-text-color-inverted); + --search-term-disabled-bg: var(--base-gray-light); + --search-term-selected-color: var(--base-gray); + --search-term-highlighted-bg: var(--primary-button-bg); + --search-term-highlighted-color: var(--default-text-color-inverted); + + --search-condition-remove-bg: var(--base-remove-bg); + --search-condition-remove-color: var(--default-text-color-inverted); + + --search-logical-operator-bg: fade(#819398, 50%); // --base-gray + --search-logical-operator-color: var(--default-text-color-light); + + --search-editor-control-color: var(--base-gray-light); + --search-editor-logical-op-bg: var(--base-gray-light); + --search-editor-context-menu-border-color: var(--base-gray-light); + --search-editor-context-menu-bg: var(--default-text-color-inverted); + --search-editor-drag-outline-color: var(--base-gray); + + --control-color: var(--primary-button-bg); + --control-hover-bg: var(--base-gray-lighter); + --control-disabled-color: var(--base-gray-light); + + --cancel-button-hover-color: var(--default-text-color-inverted); + + --suggestions-bg: var(--default-text-color-inverted); + --suggestions-color: var(--default-text-color-light); + --suggestions-focus-bg: var(--primary-button-bg); + --suggestions-focus-color: var(--default-text-color-inverted); + --suggestions-default-opt-bg: fade(@primary-button-bg, 10%); + --suggestions-default-opt-color: var(--default-text-color-light); + --suggestions-hover-bg: fade(@primary-button-bg, 30%); + --suggestions-border-color: var(--base-gray-light); + --suggestions-separation-bg: var(--base-gray-lighter); + --suggestions-failure-message-color: var(--default-text-color-light); + --suggestions-relation-path-bg: var(--base-gray-lighter); + --suggestions-relation-path-focus-bg: var(--base-gray); + + --card-border-color: var(--base-gray-light); + } +}; |