Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-10 07:25:44 +01:00
Code Issues Packages Projects Releases Activity

Introduce darkmode theme (#1969)

Browse Source 
This commit introduces a new more relaxed theme, the dark theme!
In addition, the theme can now be selected according to the system defaults.
And the other themes, as well as the general structure were unified/simplified.

Co-authored-by: Philipp Ahrendt <philipp.ahrendt@cloudogu.com>
Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>
Co-authored-by: Matthias Thieroff <matthias.thieroff@cloudogu.com>
This commit is contained in:
Florian Scholdei
2022-03-08 09:47:36 +01:00
committed by GitHub
parent 1dad31168b
commit 9c3e9cd76d
37 changed files with 922 additions and 553 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
gradle/changelog/introduce_darkmode.yaml Normal file
View File

@@ -0,0 +1,4 @@
- type: added
description: Introduce darkmode theme ([#1969](https://github.com/scm-manager/scm-manager/pull/1969))
- type: changed
description: Default theme is selected according to system defaults ([#1969](https://github.com/scm-manager/scm-manager/pull/1969))

3
scm-ui/ui-components/.storybook/preview.js
View File

@@ -87,7 +87,8 @@ export const parameters = {
default: "light",
list: [
{ name: "light", color: "#fff" },
{ name: "highcontrast", color: "#000" },
{ name: "highcontrast", color: "#050514" },
{ name: "dark", color: "#121212" },
],
},
options: {

3
scm-ui/ui-components/src/DangerZone.tsx
View File

@@ -41,10 +41,9 @@ export const DangerZone = styled.div`
}
}
// TODO ersetzen?
> *:not(:last-child) {
padding-bottom: 1.5rem;
border-bottom: solid 2px whitesmoke;
border-bottom: solid 2px var(--scm-border-color);
}
@media screen and (max-width: ${devices.tablet.width}px) {
.button {

7
scm-ui/ui-components/src/SyntaxHighlighter.tsx
View File

@@ -34,10 +34,12 @@ import useScrollToElement from "./useScrollToElement";
import styled from "styled-components";
import { useTranslation } from "react-i18next";
import copyToClipboard from "./CopyToClipboard";
import { Button } from "./buttons";
const LINE_NUMBER_URL_HASH_REGEX = /^#line-(.*)$/;
const TopRightButton = styled.button`
const TopRightButton = styled(Button)`
height: inherit;
position: absolute;
display: none;
top: 0;
@@ -90,7 +92,6 @@ const SyntaxHighlighter: FC<Props> = ({ language = defaultLanguage, showLineNumb
if (value && value.length > 1 && value.endsWith("\n")) {
valueWithoutTrailingLineBreak = value.substr(0, value.length - 1);
}
return (
<Container ref={setContentRef} className="is-relative">
<ReactSyntaxHighlighter
@@ -101,7 +102,7 @@ const SyntaxHighlighter: FC<Props> = ({ language = defaultLanguage, showLineNumb
>
{valueWithoutTrailingLineBreak}
</ReactSyntaxHighlighter>
<TopRightButton className="is-clickable" title={t("syntaxHighlighting.copyButton")} onClick={copy}>
<TopRightButton className="is-small" title={t("syntaxHighlighting.copyButton")} action={copy}>
<i className={copied ? "fa fa-clipboard-check" : "fa fa-clipboard"} />
</TopRightButton>
</Container>

405
scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

2
scm-ui/ui-components/src/buttons/CreateButton.tsx
View File

@@ -27,7 +27,7 @@ import Button, { ButtonProps } from "./Button";
import classNames from "classnames";
const Wrapper = styled.div`
border: 2px solid #e9f7fd;
border: 2px solid var(--scm-border-color);
`;
export default class CreateButton extends React.Component<ButtonProps> {

2
scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
View File

@@ -37,7 +37,7 @@ type Props = {
const Button = styled.button`
width: 50px;
&:hover {
color: #33b2e8;
color: var(--scm-info-color);
}
`;

4
scm-ui/ui-components/src/popover/Popover.tsx
View File

@@ -56,8 +56,8 @@ const PopoverContainer = styled.div<ContainerProps>`
top: 100%;
left: ${props => props.width / 2}px;
border-color: transparent;
border-bottom-color: white;
border-left-color: white;
border-bottom-color: var(--scm-popover-border-color);
border-left-color: var(--scm-popover-border-color);
border-width: 0.4rem;
margin-left: -0.4rem;
margin-top: -0.4rem;

2
scm-ui/ui-components/src/repos/DiffButton.tsx
View File

@@ -28,7 +28,7 @@ import Tooltip from "../Tooltip";
const Button = styled.button`
width: 50px;
&:hover {
color: #33b2e8;
color: var(--scm-info-color);
}
`;

2
scm-ui/ui-components/src/repos/JumpToFileButton.tsx
View File

@@ -30,7 +30,7 @@ import Icon from "../Icon";
const Button = styled(Link)`
width: 50px;
&:hover {
color: #33b2e8;
color: var(--scm-info-color);
}
`;

4
scm-ui/ui-components/src/repos/annotate/AnnotatePopover.tsx
View File

@@ -50,8 +50,8 @@ const PopoverContainer = styled.div`
top: 100%;
left: 5.5em;
border-color: transparent;
border-bottom-color: white;
border-left-color: white;
border-bottom-color: var(--scm-popover-border-color);
border-left-color: var(--scm-popover-border-color);
border-width: 0.4rem;
margin-left: -0.4rem;
margin-top: -0.4rem;

2
scm-ui/ui-components/src/table/Table.stories.tsx
View File

@@ -62,7 +62,7 @@ storiesOf("Table", module)
};
}}
>
{(row: any) => <b style={{ color: "red" }}>{row.lastname}</b>}
{(row: any) => <b className="has-text-danger">{row.lastname}</b>}
</Column>
<Column header={"E-Mail"}>{(row: any) => <span>{row.email}</span>}</Column>
</Table>

60
scm-ui/ui-styles/public/_styleguide.html
View File

@@ -373,7 +373,7 @@
<section class="section container">
<div class="columns is-size-7">
<section class="column is-one-third">
<div style="font-weight: bold; margin-bottom: 0.5rem;">
<div class="has-text-weight-bold mb-2">
<span
class="image is-rounded"
style="float: left; margin-right: 0.3em; padding-top: 0.2em; width: 1em; height: 1em;"
@@ -395,7 +395,7 @@
</ul>
</section>
<section class="column is-one-third">
<div style="font-weight: bold; margin-bottom: 0.5rem;">
<div class="has-text-weight-bold mb-2">
<i class="fas fa-info-circle fa-fw"></i>
Information
</div>
@@ -405,7 +405,7 @@
</ul>
</section>
<section class="column is-one-third">
<div style="font-weight: bold; margin-bottom: 0.5rem;">
<div class="has-text-weight-bold mb-2">
<i class="fas fa-life-ring fa-fw"></i>
Support
</div>
@@ -424,7 +424,7 @@
<h3 class="subtitle is-4">Headlines</h3>
<div class="notification">Subheadlines should only be used if there is reasonable content for them.</div>
<div class="container">
<div class="box" style="box-shadow: none; border: 1px solid #dbdbdb;">
<div class="box" style="box-shadow: none; border: 1px solid var(--scm-border-color);">
<h1 class="title">Users</h1>
<h2 class="subtitle">Create, read, update and delete users</h2>
</div>
@@ -1094,6 +1094,7 @@
<p class="control"><a class="button is-success">Success</a></p>
<p class="control"><a class="button is-warning">Warning</a></p>
<p class="control"><a class="button is-danger">Danger</a></p>
<p class="control"><a class="button">Default</a></p>
</div>
</div>
</div>
@@ -1113,6 +1114,7 @@
<p class="control"><a class="button is-success" disabled="">Success</a></p>
<p class="control"><a class="button is-warning" disabled="">Warning</a></p>
<p class="control"><a class="button is-danger" disabled="">Danger</a></p>
<p class="control"><a class="button" disabled="">Default</a></p>
</div>
</div>
</div>
@@ -1132,6 +1134,7 @@
<p class="control"><a class="button is-success is-hovered">Success</a></p>
<p class="control"><a class="button is-warning is-hovered">Warning</a></p>
<p class="control"><a class="button is-danger is-hovered">Danger</a></p>
<p class="control"><a class="button is-hovered">Default</a></p>
</div>
</div>
</div>
@@ -1152,6 +1155,7 @@
<p class="control"><a class="button is-success is-active">Success</a></p>
<p class="control"><a class="button is-warning is-active">Warning</a></p>
<p class="control"><a class="button is-danger is-active">Danger</a></p>
<p class="control"><a class="button is-active">Default</a></p>
</div>
</div>
</div>
@@ -1176,6 +1180,7 @@
<p class="control"><a class="button is-success is-loading">Success</a></p>
<p class="control"><a class="button is-warning is-loading">Warning</a></p>
<p class="control"><a class="button is-danger is-loading">Danger</a></p>
<p class="control"><a class="button is-loading">Default</a></p>
</div>
</div>
</div>
@@ -1197,6 +1202,7 @@
<p class="control"><a class="button is-success is-outlined">Success</a></p>
<p class="control"><a class="button is-warning is-outlined">Warning</a></p>
<p class="control"><a class="button is-danger is-outlined">Danger</a></p>
<p class="control"><a class="button is-outlined">Default</a></p>
</div>
</div>
</div>
@@ -1362,7 +1368,7 @@
<div class="has-text-right">
<button class="button is-primary" type="submit">Create Repository</button>
</div>
<div class="has-text-centered" style="margin-top: 2em; padding: 1em; border: 2px solid rgb(233, 247, 253);">
<div class="has-text-centered" style="margin-top: 2em; padding: 1em; border: 2px solid var(--scm-border-color);">
<button class="button is-primary" type="submit">Create Repository</button>
</div>
</div>
@@ -1699,7 +1705,6 @@
<span
class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
data-tooltip="Unique name of the group"
style=""
>
<i class="fas fa-question-circle has-text-info"></i>
</span>
@@ -1717,7 +1722,6 @@
<span
class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
data-tooltip="A short description of the group"
style=""
>
<i class="fas fa-question-circle has-text-info"></i>
</span>
@@ -1738,7 +1742,6 @@
<span
class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
data-tooltip="The api key will be restricted to permissions of this role"
style=""
>
<i class="fas fa-question-circle has-text-info"></i>
</span>
@@ -1753,15 +1756,15 @@
</select>
</div>
</div>
<div class="field is-horizontal" style="margin-top: 2rem;">
<div class="field is-horizontal mt-4">
<div class="field-label is-normal" style="flex-basis: inherit; flex-grow: 0;">
<label class="label is-size-6" for="selectBranch">Select branch</label>
</div>
<div class="field-body">
<div class="field is-narrow" style="margin-bottom: 0 !important;">
<div class="field is-narrow mb-0">
<div class="control" style="min-width: 10rem;">
<div class="is-fullwidth select">
<select style="" id="selectBranch">
<select id="selectBranch">
<option value="main">main</option>
<option value="develop">develop</option>
</select>
@@ -1781,7 +1784,6 @@
<span
class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
data-tooltip="This user is managed by an external system."
style=""
>
<i class="fas fa-question-circle has-text-info"></i>
</span>
@@ -1812,7 +1814,7 @@
<form>
<div class="field is-grouped">
<div class="control">
<label class="hbseve radio" style="margin-right: 0.5em;">
<label class="hbseve radio mr-2">
<input checked="" name="permission_scope" type="radio" value="USER_PERMISSION" />
User Permission
</label>
@@ -1936,7 +1938,7 @@
<div class="is-flex is-align-items-center">
<div style="width: 16px; height: 16px; font-size: 13px;">
<span class="tooltip has-tooltip-right" data-tooltip="Copy Permalink to Clipboard">
<i class="fas fa-link has-text-inherit" style="color: #dbdbdb; opacity: 0.75;"></i>
<i class="fas fa-link has-text-inherit" style="color: var(--scm-border-color); opacity: 0.75;"></i>
</span>
</div>
<nav
@@ -1977,7 +1979,7 @@
<div class="content" style="overflow: hidden; margin-bottom: 0 !important;">
<p class="shorten-text is-marginless"><strong>Git</strong></p>
</div>
<div style="">
<div>
<div class="is-flex" style="margin-left: auto;"></div>
</div>
</div>
@@ -2019,15 +2021,15 @@
<div class="is-flex">
<span
class="level-item"
style="padding: 0.5rem; border: 1px solid rgb(205, 205, 205); border-radius: 4px; cursor: pointer; pointer-events: all; margin-bottom: 0 !important;"
style="padding: 0.5rem; border: 1px solid var(--scm-border-color); border-radius: 4px; cursor: pointer; pointer-events: all; margin-bottom: 0 !important;"
>
<i class="fas fa-fw fa-trash has-text-info" title="Uninstall"></i>
</span>
</div>
</div>
</div>
<div class="level is-flex" style="padding-bottom: 1rem;">
<div class="level-left is-hidden-mobile" style="margin-right: 0.5rem;">
<div class="level is-flex pb-4">
<div class="level-left is-hidden-mobile mr-2">
<small>1.1.0-SNAPSHOT</small>
</div>
<div
@@ -2060,22 +2062,22 @@
<div style="margin-left: auto;">
<div class="is-flex">
<span
class="level-item"
style="padding: 0.5rem; border: 1px solid rgb(205, 205, 205); border-radius: 4px; cursor: pointer; pointer-events: all; margin-bottom: 0 !important;"
class="level-item p-2"
style="border: 1px solid var(--scm-border-color); border-radius: 4px; cursor: pointer; pointer-events: all; margin-bottom: 0 !important;"
>
<i class="fas fa-fw fa-trash has-text-info" title="Uninstall"></i>
</span>
<span
class="level-item"
style="padding: 0.5rem; border: 1px solid rgb(205, 205, 205); border-radius: 4px; cursor: pointer; pointer-events: all; margin-bottom: 0 !important; margin-left: 0.5rem;"
class="level-item p-2 ml-2"
style="border: 1px solid var(--scm-border-color); border-radius: 4px; cursor: pointer; pointer-events: all; margin-bottom: 0 !important;"
>
<i class="fas fa-fw fa-sync-alt has-text-info" title="Update"></i>
</span>
</div>
</div>
</div>
<div class="level is-flex" style="padding-bottom: 1rem;">
<div class="level-left is-hidden-mobile" style="margin-right: 0.5rem;">
<div class="level is-flex pb-4">
<div class="level-left is-hidden-mobile mr-2">
<small>2.6.0</small>
</div>
<div
@@ -2120,31 +2122,31 @@
<ul class="Details__StyledMemberList-sc-1uy93gc-0 cmCFmV">
<li
class=""
style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid rgb(238, 238, 238); border-radius: 4px;"
style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--scm-border-color); border-radius: 4px;"
>
<a><i class="fas fa-user has-text-inherit"></i> mmuster</a>
</li>
<li
class=""
style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid rgb(238, 238, 238); border-radius: 4px;"
style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--scm-border-color); border-radius: 4px;"
>
<a><i class="fas fa-user has-text-inherit"></i> belefant</a>
</li>
<li
class=""
style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid rgb(238, 238, 238); border-radius: 4px;"
style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--scm-border-color); border-radius: 4px;"
>
<a><i class="fas fa-user has-text-inherit"></i> aschultz</a>
</li>
<li
class=""
style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid rgb(238, 238, 238); border-radius: 4px;"
style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--scm-border-color); border-radius: 4px;"
>
<a><i class="fas fa-user has-text-inherit"></i> zgummi</a>
</li>
<li
class=""
style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid rgb(238, 238, 238); border-radius: 4px;"
style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--scm-border-color); border-radius: 4px;"
>
<a><i class="fas fa-user has-text-inherit"></i> nobody</a>
</li>

135
scm-ui/ui-styles/src/components/_main.scss
View File

@@ -21,6 +21,30 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
:root {
--scm-white-color: #{$white};
--scm-light-color: #{$light};
--scm-dark-color: #{$dark};
--scm-primary-color: #{$primary};
--scm-link-color: #{$link};
--scm-info-color: #{$info};
--scm-success-color: #{$success};
--scm-warning-color: #{$warning};
--scm-danger-color: #{$danger};
--scm-secondary-least-color: #{$secondary-least};
--scm-secondary-less-color: #{$secondary-less};
--scm-secondary-color: #{$secondary};
--scm-secondary-more-color: #{$secondary-more};
--scm-secondary-most-color: #{$secondary-most};
--scm-border-color: #{$border};
--scm-border: #{$border-width} solid #{$border};
--scm-popover-border-color: #{$white};
}
// TODO split into multiple files
.is-ellipsis-overflow {
@@ -84,15 +108,6 @@ hr.header-with-actions {
}
}
footer.footer {
background-color: $white-ter;
padding: inherit;
a {
color: darken($info, 15%);
}
}
.has-hover-background-blue:hover {
background-color: scale-color($blue, $alpha: -90%);
}
@@ -113,6 +128,61 @@ footer.footer {
background-color: $blue-light;
}
.has-text-secondary-least {
color: $secondary-least !important;
}
a.has-text-secondary-least:hover,
a.has-text-secondary-least:focus {
color: lighten($secondary-least, 10%) !important;
}
.has-background-secondary-least {
background-color: $secondary-least !important;
}
.has-text-secondary-less {
color: $secondary-less !important;
}
a.has-text-secondary-less:hover,
a.has-text-secondary-less:focus {
color: lighten($secondary-less, 10%) !important;
}
.has-background-secondary-less {
background-color: $secondary-less !important;
}
.has-text-secondary {
color: $secondary !important;
}
a.has-text-secondary:hover,
a.has-text-secondary:focus {
color: lighten($secondary, 10%) !important;
}
.has-background-secondary {
background-color: $secondary !important;
}
.has-text-secondary-more {
color: $secondary-more !important;
}
a.has-text-secondary-more:hover,
a.has-text-secondary-more:focus {
color: lighten($secondary-more, 10%) !important;
}
.has-background-secondary-more {
background-color: $secondary-more !important;
}
.has-text-secondary-most {
color: $secondary-most !important;
}
a.has-text-secondary-most:hover,
a.has-text-secondary-most:focus {
color: lighten($secondary-most, 10%) !important;
}
.has-background-secondary-most {
background-color: $secondary-most !important;
}
// border and background colors
.has-background-dark-75 {
background-color: $dark-75;
@@ -181,7 +251,7 @@ footer.footer {
// tags
.tag:not(body) {
border: 1px solid transparent;
background-color: $white;
background-color: $scheme-main;
&.is-delete {
background-color: $light;
@@ -193,7 +263,7 @@ footer.footer {
}
&.is-outlined {
background-color: $white;
background-color: $scheme-main;
}
&.is-black.is-outlined {
color: $black;
@@ -237,6 +307,13 @@ footer.footer {
}
}
.popover {
&:before {
border-bottom-color: $popover-background-color;
border-left-color: $popover-background-color;
}
}
// buttons
.button {
padding-left: 1.5em;
@@ -251,7 +328,7 @@ footer.footer {
&.is-warning,
&.is-danger {
&.is-outlined {
background-color: $white;
background-color: inherit;
}
}
@@ -347,8 +424,14 @@ footer.footer {
}
}
.notifications .dropdown-menu:before {
.notifications .dropdown-menu {
border: 1px solid $border;
&:before {
border: 0.4rem solid transparent;
border-bottom-color: $border;
border-left-color: $border;
}
}
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@@ -480,7 +563,7 @@ ul.is-separated {
tr {
a {
color: #363636;
color: $grey-darker;
}
&.border-is-green td:first-child {
border-left-color: $green;
@@ -510,7 +593,7 @@ ul.is-separated {
&:hover {
td {
background-color: whitesmoke;
background-color: $white-ter;
&.is-darker {
background-color: #e1e1e1;
@@ -531,15 +614,15 @@ ul.is-separated {
}
td {
padding: 1em 1.25em;
background-color: #fafafa;
border-bottom: 1px solid whitesmoke;
background-color: $white-bis;
border-bottom: 1px solid $white-ter;
border-left-color: $grey;
&:first-child {
border-left: 3px solid;
}
&.is-darker {
background-color: whitesmoke;
background-color: $white-ter;
}
// Explicitly "remove" styles from td element to use it as an empty table column header, which is necessary for
// a11y because an empty th element is not allowed.
@@ -550,7 +633,7 @@ ul.is-separated {
}
}
&.is-hoverable tbody tr:not(.is-selected):hover {
background-color: whitesmoke;
background-color: $white-ter;
}
thead th {
background-color: transparent;
@@ -579,8 +662,8 @@ ul.is-separated {
}
.panel-footer {
background-color: whitesmoke;
color: #363636;
background-color: $panel-heading-background-color;
color: $panel-heading-color;
font-size: 1.25em;
font-weight: 300;
line-height: 1.25;
@@ -667,7 +750,7 @@ form .field:not(.is-grouped) {
.tabs.is-toggle li.is-active a:hover {
background-color: #28b1e8;
border-color: #28b1e8;
color: #fff;
color: $white;
}
}
@@ -678,7 +761,7 @@ form .field:not(.is-grouped) {
position: absolute;
right: 0;
top: 0;
background-color: whitesmoke;
background-color: $white-ter;
}
// menu
@@ -692,7 +775,6 @@ form .field:not(.is-grouped) {
display: flex;
height: 3.2rem;
align-items: center;
color: #fff;
font-size: 1em;
font-weight: 600;
background-color: $blue;
@@ -707,12 +789,11 @@ form .field:not(.is-grouped) {
}
.menu-list {
a {
color: #333;
padding: 1rem;
&.is-active {
color: $info;
background-color: #fff;
color: $link;
background-color: $scheme-main;
}
}

308
scm-ui/ui-styles/src/dark.scss Normal file
View File

@@ -0,0 +1,308 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
@import "utils/_pre.scss";
$turquoise: #55abad;
$blue: #599dad;
$cyan: $blue;
$green: #419374;
$yellow: #ccad5e;
$red: #ae4e6b;
$white: $grey-lighter;
$light: $grey-dark;
$primary-invert: $white;
$link-invert: $white;
$info-invert: $white;
$success-invert: $white;
$warning-invert: #583708;
$danger-invert: $white;
$light-invert: $white;
$dark-invert: $white;
$scheme-main: #121212;
$background: $grey-dark;
$border: $grey-dark;
$border-width: 1px;
$text: $grey-lighter;
$text-strong: $grey-lighter;
$code: lighten($red, 10%);
$code-background: lighten($scheme-main, 10%);
$link-hover: $grey;
$link-focus: $grey;
$link-active: $grey;
$secondary-least: $scheme-main;
$secondary-less: $black-ter;
$secondary: $grey;
$secondary-more: $grey-light;
$secondary-most: $white-ter;
// layout
$footer-background-color: $black-ter;
$footer-color: $text;
// element
$box-background-color: lighten($scheme-main, 2.5%);
$button-hover-color: lighten($text-strong, 2.5%);
$button-active-color: lighten($text-strong, 2.5%);
// component
$card-background-color: $box-background-color;
$menu-label-color: $text;
$menu-item-color: $text;
$menu-item-hover-background-color: $grey-dark;
$modal-card-head-background-color: $black-ter;
$modal-card-body-background-color: #17181c;
$navbar-item-color: $grey-lighter;
$navbar-item-hover-color: $navbar-item-color;
$navbar-item-active-color: $navbar-item-color;
$panel-heading-background-color: $black-ter;
// form
$input-placeholder-color: $grey-light;
$input-disabled-color: #7A7A7A;
// extension
$popover-background-color: $grey-dark;
$popover-border-color: $grey-dark;
$table-row-hover-background-color: $grey-darker;
@import "utils/_post.scss";
:root {
--scm-popover-border-color: #{$popover-border-color};
}
$dark-75: scale-color($dark, $lightness: -25%);
$dark-50: scale-color($dark, $lightness: -50%);
$dark-25: scale-color($dark, $lightness: -75%);
$info-75: scale-color($info, $lightness: -25%);
$info-50: scale-color($info, $lightness: -50%);
$info-25: scale-color($info, $lightness: -75%);
$link-75: scale-color($link, $lightness: -25%);
$link-50: scale-color($link, $lightness: -50%);
$link-25: scale-color($link, $lightness: -75%);
$primary-75: scale-color($primary, $lightness: -25%);
$primary-50: scale-color($primary, $lightness: -50%);
$primary-25: scale-color($primary, $lightness: -75%);
$success-75: scale-color($success, $lightness: -25%);
$success-50: scale-color($success, $lightness: -50%);
$success-25: scale-color($success, $lightness: -75%);
$warning-75: scale-color($warning, $lightness: -25%);
$warning-50: scale-color($warning, $lightness: -50%);
$warning-25: scale-color($warning, $lightness: -75%);
$danger-75: scale-color($danger, $lightness: -25%);
$danger-50: scale-color($danger, $lightness: -50%);
$danger-25: scale-color($danger, $lightness: -75%);
.has-background-dark-75 {
background-color: $dark-75;
}
.has-background-dark-50 {
background-color: $dark-50;
}
.has-background-dark-25 {
background-color: $dark-25;
}
.has-background-info-75 {
background-color: $info-75;
}
.has-background-info-50 {
background-color: $info-50;
}
.has-background-info-25 {
background-color: $info-25;
}
.has-background-link-75 {
background-color: $link-75;
}
.has-background-link-50 {
background-color: $link-50;
}
.has-background-link-25 {
background-color: $link-25;
}
.has-background-primary-75 {
background-color: $primary-75;
}
.has-background-primary-50 {
background-color: $primary-50;
}
.has-background-primary-25 {
background-color: $primary-25;
}
.has-background-success-75 {
background-color: $success-75;
}
.has-background-success-50 {
background-color: $success-50;
}
.has-background-success-25 {
background-color: $success-25;
}
.has-background-warning-75 {
background-color: $warning-75;
}
.has-background-warning-50 {
background-color: $warning-50;
}
.has-background-warning-25 {
background-color: $warning-25;
}
.has-background-danger-75 {
background-color: $danger-75;
}
.has-background-danger-50 {
background-color: $danger-50;
}
.has-background-danger-25 {
background-color: $danger-25;
}
:root {
--scm-secondary-background: #{$scheme-main};
--scm-secondary-text: #{$white};
--scm-border: 2px solid #{$white-ter};
--scm-hover-color: #{$grey};
--scm-column-selection: #{$link-dark};
--sh-base-color: #{$white};
--sh-font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
--sh-block-background: #{$scheme-main};
--sh-inline-code-color: #ff3860;
--sh-inline-code-background: #fbe7eb;
--sh-comment-color: #9a9a9a;
--sh-punctuation-color: #999999;
--sh-property-color: #2c99c7;
--sh-selector-color: #009dff;
--sh-operator-color: #999999;
--sh-operator-bg: inherit;
--sh-variable-color: #c386ca;
--sh-function-color: #ff6181;
--sh-keyword-color: #00a984;
--sh-selected-color: #{$warning-dark};
--sh-highlight-background: #f5f5f5;
--sh-highlight-accent: #99d8f3;
--diff-background-color: #{$scheme-main};
--diff-text-color: #{$white-bis};
--diff-font-family: Consolas, Courier, monospace;
--diff-selection-background-color: #{desaturate(#b3d7ff, 20%)};
--diff-gutter-insert-background-color: #{desaturate(#05c71d, 20%)};
--diff-gutter-delete-background-color: #{desaturate(#eb7a85, 20%)};
--diff-gutter-selected-background-color: #{desaturate(#fffce0, 20%)};
--diff-code-insert-background-color: #{desaturate(#05240b, 20%)};
--diff-code-delete-background-color: #{desaturate(#230608, 20%)};
--diff-code-insert-edit-background-color: #{desaturate(#c0dc91, 20%)};
--diff-code-delete-edit-background-color: #{desaturate(#000, 20%)};
--diff-code-selected-background-color: #{desaturate(#fffce0, 20%)};
--diff-omit-gutter-line-color: #cb2a1d;
}
.menu-list {
a {
> li {
border-color: $grey-light;
}
li:last-child {
border-color: $grey-light;
}
}
}
//popover
.popover {
border: 1px solid $popover-border-color;
}
.modal-card {
border: 1px solid $border;
& .modal-close,
& .delete {
background-color: $background;
}
}
.card-table {
tr {
a {
color: $grey-light;
}
&:hover {
td {
background-color: $grey-darker;
&.is-darker {
background-color: $black-ter;
}
}
}
}
td {
background-color: $black-ter;
border-bottom: none;
&.is-darker {
background-color: $grey-dark;
}
}
&.is-hoverable tbody tr:not(.is-selected):hover {
background-color: $grey-darker;
}
}
.diff-code-conflict {
background-color: #332900;
}
.diff-gutter-conflict {
background-color: #bc9f2a;
}
.diff-decoration-content div {
color: $scheme-main;
}
//Display darker version of background image
.has-scm-background {
background-image: url(images/scmManagerHeroDark.jpg) !important;
}
.has-hover-visible:hover {
color: $grey !important;
}

155
scm-ui/ui-styles/src/highcontrast.scss
View File

@@ -24,14 +24,20 @@
@import "utils/_pre.scss";
// $text: $white;
$red: #e63453;
$scheme-main: #050514;
$background: $grey-dark;
$text: $white-ter;
$text-strong: $white-bis;
$danger: #e63453;
$code: lighten($danger, 25%);
$secondary-least: $scheme-main;
$secondary-less: $black-ter;
$secondary: $white-bis;
$secondary-more: $white-ter;
$secondary-most: $white;
$code: lighten($red, 25%);
$primary-invert: #050514;
$info-invert: #050514;
$link-invert: #050514;
@@ -41,7 +47,7 @@ $danger-invert: #050514;
$light-gray: #f2f2f2;
$footer-background-color: $grey-dark;
$footer-background-color: $black-ter;
$footer-color: $white-ter;
//make horizontal lines pop more
@@ -50,6 +56,11 @@ $hr-background-color: $white-bis;
$box-background-color: scale-color($scheme-main, $lightness: 15%);
$box-background-color: $grey-darker;
$menu-label-color: $scheme-main;
$menu-item-color: $white-ter;
$panel-heading-background-color: $black-ter;
$modal-card-head-background-color: $black-ter;
$modal-card-body-background-color: $scheme-main;
@@ -64,13 +75,14 @@ $tooltip-background-color: $white-bis;
$tooltip-background-opacity: 0.9 !default;
$tooltip-color: $scheme-main;
$border-width: 2px;
$border: $white-ter;
@import "utils/_post.scss";
:root {
--scm-secondary-background: #{$scheme-main};
--scm-secondary-text: #{$white};
--scm-border: 2px solid #{$white-ter};
--scm-info-color: #{$info};
--scm-hover-color: #{$grey};
--scm-column-selection: #{$link-dark};
@@ -108,17 +120,6 @@ $tooltip-color: $scheme-main;
}
.button {
&.is-primary,
&.is-info,
&.is-link,
&.is-success,
&.is-warning,
&.is-danger {
&.is-outlined {
background-color: inherit;
}
}
&.is-primary:hover,
&.is-primary.is-hovered {
background-color: scale-color($primary, $lightness: -5%);
@@ -205,36 +206,21 @@ $tooltip-color: $scheme-main;
}
}
.menu-label {
color: $scheme-main;
}
.menu-list {
a {
color: $white-ter;
&.is-active {
background-color: $scheme-main;
}
}
}
//footer is overwritten in _main.scss
footer.footer {
background-color: $black-ter;
a {
color: scale-color($link, $lightness: 25%);
}
}
.card {
border: 1px solid $white-ter;
border: 1px solid $border;
box-shadow: none;
}
//card
.modal-card {
border: 1px solid $white-ter;
border: 1px solid $border;
& .modal-close,
& .delete {
@@ -257,9 +243,6 @@ footer.footer {
background-color: $grey-darker;
}
}
a {
color: $link;
}
}
}
td {
@@ -278,18 +261,8 @@ footer.footer {
}
}
// panels
.panel {
border-color: $white-bis;
.panel-heading {
background-color: $black-ter;
}
.panel-footer {
background-color: $black-ter;
color: $white-bis;
}
}
//diffs
@@ -338,9 +311,6 @@ td:first-child.diff-gutter-conflict:before {
//inline member tags
.tag:not(body) {
border: 1px solid transparent;
background-color: $white;
&.is-delete {
&::before,
&::after {
@@ -363,11 +333,6 @@ td:first-child.diff-gutter-conflict:before {
&.is-light .has-text-link {
color: scale-color($link, $lightness: -50%) !important;
}
//outline-tags
&.is-outlined {
background-color: $scheme-main;
}
}
//cards receive white border
@@ -376,21 +341,7 @@ td:first-child.diff-gutter-conflict:before {
}
.popover {
border: 1px solid $white-ter;
&:before {
border-bottom-color: $grey-dark;
border-left-color: $grey-dark;
}
}
.notifications .dropdown-menu {
border: 1px solid $white-ter;
&:before {
border-bottom-color: $white-ter;
border-left-color: $white-ter;
}
border: 1px solid $border;
}
//Display darker version of background image
@@ -398,61 +349,6 @@ td:first-child.diff-gutter-conflict:before {
background-image: url(images/scmManagerHeroDark.jpg) !important;
}
.has-text-secondary-least {
color: $scheme-main !important;
}
a.has-text-secondary-least:hover,
a.has-text-secondary-least:focus {
color: lighten($scheme-main, 10%) !important;
}
.has-background-secondary-least {
background-color: $scheme-main !important;
}
.has-text-secondary-less {
color: $black-ter !important;
}
a.has-text-secondary-less:hover,
a.has-text-secondary-less:focus {
color: lighten($black-ter, 10%) !important;
}
.has-background-secondary-less {
background-color: $black-ter !important;
}
.has-text-secondary {
color: $white-bis !important;
}
a.has-text-secondary:hover,
a.has-text-secondary:focus {
color: lighten($white-bis, 10%) !important;
}
.has-background-secondary {
background-color: $white-bis !important;
}
.has-text-secondary-more {
color: $white-ter !important;
}
a.has-text-secondary-more:hover,
a.has-text-secondary-more:focus {
color: lighten($white-ter, 10%) !important;
}
.has-background-secondary-more {
background-color: $white-ter !important;
}
.has-text-secondary-most {
color: $white !important;
}
a.has-text-secondary-most:hover,
a.has-text-secondary-most:focus {
color: lighten($white, 10%) !important;
}
.has-background-secondary-most {
background-color: $white !important;
}
.has-background-light {
color: $grey-dark;
}
@@ -461,15 +357,8 @@ a.has-text-secondary-most:focus {
color: $white-bis !important;
}
[disabled].textarea::placeholder,
[disabled].input::placeholder,
fieldset[disabled] .textarea::placeholder,
fieldset[disabled] .input::placeholder {
color: $white-bis;
}
.repository-export-info-box {
background-color: $high-contrast-info-25;
background-color: scale-color($info, $lightness: -75%);
border: 0.2rem solid;
}

107
scm-ui/ui-styles/src/light.scss
View File

@@ -23,18 +23,38 @@
*/
@import "utils/_pre.scss";
// colors defined in variables/commons.scss
$subtitle-color: #666;
$warning-invert: #88550d;
$border: $grey-lighter;
$border-width: 1px;
$secondary-least: $white;
$secondary-less: $white-ter;
$secondary: $grey-light;
$secondary-more: $grey-darker;
$secondary-most: $black;
// layout
$footer-background-color: $white-ter;
// element
$button-disabled-opacity: 0.25;
$subtitle-color: #666;
// component
$menu-label-color: $white;
$menu-item-color: #333;
// extension
$popover-background-color: $grey-light;
@import "utils/_post.scss";
:root {
--scm-secondary-background: #{$white};
--scm-secondary-text: #{$black};
--scm-border: 1px solid #dbdbdb;
--scm-info-color: #{$info};
--scm-hover-color: #{$black-ter};
--scm-column-selection: #{$link-25};
@@ -57,72 +77,31 @@ $button-disabled-opacity: 0.25;
--sh-highlight-accent: #99d8f3;
}
.button {
&.is-primary,
&.is-info,
&.is-link,
&.is-success,
&.is-warning,
&.is-danger {
&.is-outlined {
background-color: $white;
}
}
}
footer.footer {
a {
color: darken($info, 15%);
}
}
.popover:before {
border-bottom-color: white;
border-left-color: white;
box-shadow: -1px 1px 2px rgba(10, 10, 10, 0.2);
}
.notifications .dropdown-menu:before {
border-bottom-color: white;
border-left-color: white;
}
.has-text-secondary-least {
color: $white !important;
}
a.has-text-secondary-least:hover,
a.has-text-secondary-least:focus {
color: lighten($white, 10%) !important;
}
.has-background-secondary-least {
background-color: $white !important;
}
.has-text-secondary-less {
color: $white-ter !important;
}
a.has-text-secondary-less:hover,
a.has-text-secondary-less:focus {
color: lighten($white-ter, 10%) !important;
}
.has-background-secondary-less {
background-color: $white-ter !important;
}
.has-text-secondary {
color: $grey-light !important;
}
a.has-text-secondary:hover,
a.has-text-secondary:focus {
color: lighten($grey-light, 10%) !important;
}
.has-background-secondary {
background-color: $grey-light !important;
}
.has-text-secondary-more {
color: $grey-darker !important;
}
a.has-text-secondary-more:hover,
a.has-text-secondary-more:focus {
color: lighten($grey-darker, 10%) !important;
}
.has-background-secondary-more {
background-color: $grey-darker !important;
}
.has-text-secondary-most {
color: $black !important;
}
a.has-text-secondary-most:hover,
a.has-text-secondary-most:focus {
color: lighten($black, 10%) !important;
}
.has-background-secondary-most {
background-color: $black !important;
}
.has-hover-visible:hover {
color: $grey-darker !important;
}

18
scm-ui/ui-styles/src/variables/_commons.scss
View File

@@ -21,16 +21,26 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
//$link: #007EB0;
$info: #33b2e8;
$turquoise: #00d1df;
$blue: #33b2e8;
$cyan: $blue;
$green: #00c79b;
$warning: #ffdd57;
$yellow: #ffdd57;
$red: #ff3860;
$blue-light: #98d8f3;
$danger: #ff3860;
$family-monospace: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
$input-border-color: $blue-light;
$navbar-background-color: transparent;
$navbar-item-color: $white;
$navbar-item-hover-color: $navbar-item-color;
$navbar-item-active-color: $navbar-item-color;
$navbar-item-hover-background-color: rgba(10, 10, 10, 0.1);
$footer-padding: inherit;
$popover-border-color: $white;

21
scm-ui/ui-styles/src/variables/_derived.scss
View File

@@ -43,24 +43,3 @@ $danger-75: scale-color($danger, $lightness: 25%);
$danger-50: scale-color($danger, $lightness: 50%);
$danger-25: scale-color($danger, $lightness: 75%);
$high-contrast-dark-75: scale-color($dark, $lightness: -25%);
$high-contrast-dark-50: scale-color($dark, $lightness: -50%);
$high-contrast-dark-25: scale-color($dark, $lightness: -75%);
$high-contrast-info-75: scale-color($info, $lightness: -25%);
$high-contrast-info-50: scale-color($info, $lightness: -50%);
$high-contrast-info-25: scale-color($info, $lightness: -75%);
$high-contrast-link-75: scale-color($link, $lightness: -25%);
$high-contrast-link-50: scale-color($link, $lightness: -50%);
$high-contrast-link-25: scale-color($link, $lightness: -75%);
$high-contrast-primary-75: scale-color($primary, $lightness: -25%);
$high-contrast-primary-25: scale-color($primary, $lightness: -75%);
$high-contrast-primary-50: scale-color($primary, $lightness: -50%);
$high-contrast-success-75: scale-color($success, $lightness: -25%);
$high-contrast-success-50: scale-color($success, $lightness: -50%);
$high-contrast-success-25: scale-color($success, $lightness: -75%);
$high-contrast-warning-75: scale-color($warning, $lightness: -25%);
$high-contrast-warning-50: scale-color($warning, $lightness: -50%);
$high-contrast-warning-25: scale-color($warning, $lightness: -75%);
$high-contrast-danger-75: scale-color($danger, $lightness: -25%);
$high-contrast-danger-50: scale-color($danger, $lightness: -50%);
$high-contrast-danger-25: scale-color($danger, $lightness: -75%);

67
scm-ui/ui-webapp/public/images/blibSmallLightBackground.svg Normal file
View File

@@ -0,0 +1,67 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 337.33 291.79">
<defs>
<style>
.cls-1{fill:none;}.cls-2{fill:#c7c7c7;}.cls-3{clip-path:url(#clip-path);}.cls-4{fill:url(#uv5);}.cls-5{clip-path:url(#clip-path-2);}.cls-6{fill:url(#uv5-2);}.cls-7{clip-path:url(#clip-path-3);}.cls-8{fill:url(#uv5-3);}.cls-9{clip-path:url(#clip-path-4);}.cls-10{fill:url(#uv5-4);}.cls-11{clip-path:url(#clip-path-5);}.cls-12{fill:url(#uv5-5);}.cls-13{fill:#f5f4f5;}.cls-14{clip-path:url(#clip-path-6);}.cls-15{fill:url(#uv5-6);}.cls-16{clip-path:url(#clip-path-7);}.cls-17{fill:url(#uv5-7);}.cls-18{clip-path:url(#clip-path-8);}.cls-19{fill:url(#uv5-8);}.cls-20{clip-path:url(#clip-path-9);}.cls-21{fill:url(#uv5-9);}.cls-22{clip-path:url(#clip-path-10);}.cls-23{fill:url(#uv5-10);}.cls-24{clip-path:url(#clip-path-11);}.cls-25{fill:url(#uv5-11);}.cls-26{clip-path:url(#clip-path-12);}.cls-27{fill:url(#uv5-12);}.cls-28{clip-path:url(#clip-path-13);}.cls-29{fill:url(#uv5-13);}.cls-30{clip-path:url(#clip-path-14);}.cls-31{fill:url(#uv5-14);}.cls-32{clip-path:url(#clip-path-15);}.cls-33{fill:url(#uv5-15);}.cls-34{fill:url(#uv5-16);}.cls-35{fill:#48c0ec;}
</style>
<clipPath id="clip-path">
<path class="cls-1"
d="M123.75,284.91h0a37.64,37.64,0,0,1,5-11.66c37.45-93.06,145.64-135,203.65-145.07l0-.28a158.77,158.77,0,0,0-20.84-9.35C284.33,126,147.39,168.67,123.75,284.91"/>
</clipPath>
<linearGradient id="uv5" x1="-611.94" y1="244.82" x2="-607.72" y2="244.82"
gradientTransform="translate(30388.6 -11906.59) scale(49.46)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#47c0eb"/>
<stop offset="0.5" stop-color="#34aae1"/>
<stop offset="1" stop-color="#2c94d1"/>
</linearGradient>
<clipPath id="clip-path-2">
<path class="cls-1"
d="M126.64,264.88c-.72,4.83-1.46,9.68-2.16,14.5C142.86,174.89,250,128.47,295.2,113.38a209.53,209.53,0,0,0-23.88-4.86c-48.19,20.91-131.07,69-144.68,156.36"/>
</clipPath>
<linearGradient id="uv5-2" x1="-612.5" y1="247.75" x2="-608.28" y2="247.75"
gradientTransform="translate(24899.69 -9827.16) scale(40.45)" xlink:href="#uv5"/>
<clipPath id="clip-path-3">
<path class="cls-1"
d="M229.91,106.72C171,144.22,138.44,187.79,130.35,240l-2.17,14.52c4-22.83,16.25-92.3,125.74-147.71-4.18-.25-8.35-.37-12.48-.37q-5.82,0-11.53.32"/>
</clipPath>
<linearGradient id="uv5-3" x1="-613.54" y1="253.37" x2="-609.32" y2="253.37"
gradientTransform="translate(18409.91 -7369.32) scale(29.8)" xlink:href="#uv5"/>
<clipPath id="clip-path-4">
<path class="cls-1"
d="M188.92,114.12c-23.63,23.33-46.59,51.46-54.54,98.83-.71,4.83-1.45,9.66-2.17,14.51,3.64-20.66,12.15-69,78-118.59a145.93,145.93,0,0,0-21.29,5.25"/>
</clipPath>
<linearGradient id="uv5-4" x1="-615.95" y1="266.54" x2="-611.73" y2="266.54"
gradientTransform="translate(11517.07 -4758.34) scale(18.48)" xlink:href="#uv5"/>
<clipPath id="clip-path-5">
<path class="cls-1"
d="M169.44,122.74a72.54,72.54,0,0,0-10,6.87C148.85,148,142.32,162.81,138.11,188l-2.18,14.51c2.67-15.14,8.21-46.65,39.32-82.89-2,1-3.94,2-5.81,3.09"/>
</clipPath>
<linearGradient id="uv5-5" x1="-622.15" y1="300.88" x2="-617.93" y2="300.88"
gradientTransform="translate(5932.63 -2642.25) scale(9.32)" xlink:href="#uv5"/>
</defs>
<path class="cls-2"
d="M5,6.88l-.14.23C44.09,53.81,101.7,159.19,69,257.93a39.06,39.06,0,0,1-4.39,13.59c60.23-108.11-20.1-234-36.82-258.13A161.47,161.47,0,0,0,5,6.88"/>
<path class="cls-2"
d="M68.32,265.66C123.78,170.59,70,62.34,44.3,20.22A214.65,214.65,0,0,1,66.46,32.31C90.64,81,124.08,174.43,76.33,252.72q-4,6.48-8,12.94"/>
<path class="cls-2"
d="M82.08,243.43c12.11-20.76,49-84-.65-200.91a215.33,215.33,0,0,1,19.06,16c21.56,69,18.14,125.27-10.41,172Z"/>
<path class="cls-2"
d="M97,219.34c11-18.8,36.64-62.8,17.68-146A151.39,151.39,0,0,1,128,91.69c3.07,34.26,2.43,71.87-23,114.7l-8,13"/>
<path class="cls-2"
d="M110.75,197.11c8-13.78,24.75-42.45,24.39-91.91.94,2.11,1.78,4.22,2.54,6.33A76.46,76.46,0,0,1,141,123.65c-4,21.65-8.7,37.72-22.26,60.52Z"/>
<g class="cls-3">
<rect class="cls-4" x="123.75" y="118.55" width="208.71" height="166.36"/>
</g>
<g class="cls-5">
<rect class="cls-6" x="124.48" y="108.52" width="170.72" height="170.86"/>
</g>
<g class="cls-7">
<rect class="cls-8" x="128.18" y="106.4" width="125.73" height="148.07"/>
</g>
<g class="cls-9">
<rect class="cls-10" x="132.21" y="108.87" width="78" height="118.59"/>
</g>
<g class="cls-11">
<rect class="cls-12" x="135.93" y="119.65" width="39.31" height="82.88"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

10
scm-ui/ui-webapp/public/index.mustache
View File

@@ -29,11 +29,19 @@
linkElement.rel = 'stylesheet';
linkElement.type = 'text/css';
var theme = localStorage.getItem('scm.theme');
if (theme === 'highcontrast') {
if (theme === 'light') {
linkElement.href = "{{ contextPath }}/assets/ui-theme-light.css"
} else if (theme === 'dark') {
linkElement.href = "{{ contextPath }}/assets/ui-theme-dark.css"
} else if (theme === 'highcontrast') {
linkElement.href = "{{ contextPath }}/assets/ui-theme-highcontrast.css"
} else {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
linkElement.href = "{{ contextPath }}/assets/ui-theme-dark.css"
} else {
linkElement.href = "{{ contextPath }}/assets/ui-theme-light.css"
}
}
document.head.appendChild(linkElement);
</script>
</head>

12
scm-ui/ui-webapp/public/locales/de/commons.json
View File

@@ -105,11 +105,19 @@
"submit": "Anwenden",
"light": {
"displayName": "Hell",
"description": "'Hell' is das Standard-Design des SCM-Managers"
"description": "„Hell“ is das Standard-Design des SCM-Managers"
},
"highcontrast": {
"displayName": "Hoher Kontrast",
"description": "'Hoher Kontrast' ist ein dunkles Design mit einem hohen Kontrast"
"description": "„Hoher Kontrast“ ist ein dunkles Design mit einem hohen Kontrast"
},
"dark": {
"displayName": "Dunkel",
"description": "„Dunkel“ ist ein entspannteres, dunkles Design"
},
"systemdefault": {
"displayName": "Systemstandard",
"description": "Verwendet die Standardeinstellung des Systems"
}
}
},

8
scm-ui/ui-webapp/public/locales/en/commons.json
View File

@@ -111,6 +111,14 @@
"highcontrast": {
"displayName": "High contrast",
"description": "The high contrast mode is a dark theme with a high contrast between the colors"
},
"dark": {
"displayName": "Dark",
"description": "The dark mode is a more relaxed, dark theme"
},
"systemdefault": {
"displayName": "System default",
"description": "Use the default setting of the system"
}
}
},

2
scm-ui/ui-webapp/src/admin/plugins/components/PluginBottomActions.tsx
View File

@@ -30,7 +30,7 @@ type Props = {
};
const ActionWrapper = styled.div`
border: 2px solid #e9f7fd;
border: 2px solid var(--scm-border-color);
`;
export default class PluginBottomActions extends React.Component<Props> {

3
scm-ui/ui-webapp/src/components/HeaderButton.tsx
View File

@@ -26,9 +26,8 @@ import styled from "styled-components";
import { devices } from "@scm-manager/ui-components";
const HeaderButton = styled.div`
// TODO: ersetzen?
@media screen and (max-width: ${devices.desktop.width - 1}px) {
border-top: 1px solid white;
border-top: 1px solid var(--scm-white-color);
margin-top: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;

7
scm-ui/ui-webapp/src/components/HeaderButtonContent.tsx
View File

@@ -30,12 +30,13 @@ type Props = {
icon: string;
};
export const headerButtonContentClassName = "is-flex is-align-items-center is-justify-content-flex-start";
export const headerButtonContentClassName =
"is-flex is-align-items-center is-justify-content-flex-start has-text-inherit";
const HeaderButtonContent: FC<Props> = ({ burgerMode, icon, label }) => (
<>
<Icon title={label} name={icon} color="white" className={burgerMode ? "is-size-5" : "is-size-4"} />
<span className="has-text-white">{" " + label}</span>
<Icon title={label} name={icon} color="inherit" className={burgerMode ? "is-size-5" : "is-size-4"} />
<span>{" " + label}</span>
</>
);

6
scm-ui/ui-webapp/src/components/InfoBox.tsx
View File

@@ -86,9 +86,9 @@ class InfoBox extends React.Component<Props> {
"is-align-items-center"
)}
>
<Icon className="has-text-blue-light mb-2 fa-2x" name={icon} color="inherit" alt="" />
<div className="is-size-4">{t("login." + type)}</div>
<div className="is-size-4">{t("login.tip")}</div>
<Icon className="mb-2 fa-2x" name={icon} color="white" alt="" />
<div className="is-size-4 has-text-white">{t("login." + type)}</div>
<div className="is-size-4 has-text-white">{t("login.tip")}</div>
</FixedSizedIconWrapper>
</figure>
{this.renderBody()}

19
scm-ui/ui-webapp/src/components/LoginForm.tsx
View File

@@ -42,17 +42,20 @@ const TopMarginBox = styled.div`
`;
const AvatarWrapper = styled.figure`
margin-top: -70px;
padding-bottom: 20px;
display: flex;
justify-content: center;
margin: -70px auto 20px;
width: 128px;
height: 128px;
background: var(--scm-white-color);
border: 1px solid lightgray;
border-radius: 50%;
`;
const AvatarImage = styled(Image)`
width: 128px;
height: 128px;
width: 75%;
margin-left: 0.25rem;
padding: 5px;
background: white;
border: 1px solid lightgray;
border-radius: 50%;
`;
class LoginForm extends React.Component<Props, State> {
@@ -104,7 +107,7 @@ class LoginForm extends React.Component<Props, State> {
<p className="subtitle">{t("login.subtitle")}</p>
<TopMarginBox className="box">
<AvatarWrapper>
<AvatarImage src="/images/blib.jpg" alt={t("login.logo-alt")} />
<AvatarImage src="/images/blibSmallLightBackground.svg" alt={t("login.logo-alt")} />
</AvatarWrapper>
<ErrorNotification error={this.areCredentialsInvalid()} />
<form onSubmit={this.handleSubmit}>

2
scm-ui/ui-webapp/src/containers/Alerts.tsx
View File

@@ -86,7 +86,7 @@ const AlertsList: FC<Props> = ({ data }) => (
const ShieldNotificationIcon: FC = () => {
const [t] = useTranslation("commons");
return <Icon className="is-size-4" name="shield-alt" color="white" alt={t("alerts.shieldTitle")} />;
return <Icon className="is-size-4" name="shield-alt" color="inherit" alt={t("alerts.shieldTitle")} />;
};
type ComponentAlert = Alert & {

18
scm-ui/ui-webapp/src/containers/NavigationBar.tsx
View File

@@ -87,31 +87,15 @@ const StyledNavBar = styled.nav`
padding: 0;
}
//TODO Ersetzen?
.navbar-brand {
@media screen and (max-width: ${devices.desktop.width - 1}px) {
border-bottom: 1px solid white;
border-bottom: 1px solid var(--scm-white-color);
}
}
.navbar-menu.is-active .navbar-end .navbar-item {
border-left: solid 5px transparent;
}
.navbar-burger {
color: #fff !important;
}
.navbar-item {
:hover:not(.logo) {
background-color: rgba(10, 10, 10, 0.1) !important;
color: #fff;
}
color: #fff !important;
background-color: transparent !important;
}
color: #fff;
background-color: transparent !important;
`;
type Props = {

2
scm-ui/ui-webapp/src/containers/Notifications.tsx
View File

@@ -222,7 +222,7 @@ const BellNotificationIcon: FC<BellNotificationIconProps> = ({ data }) => {
className="is-size-4"
iconStyle={counter === 0 ? "far" : "fas"}
name="bell"
color="white"
color="inherit"
alt={t("notifications.bellTitle")}
/>
);

25
scm-ui/ui-webapp/src/containers/Theme.tsx
View File

@@ -23,15 +23,16 @@
*/
import React, { FC, useState } from "react";
import { createA11yId, Radio, SubmitButton, Subtitle } from "@scm-manager/ui-components";
import { ButtonGroup, createA11yId, Radio, SubmitButton, Subtitle } from "@scm-manager/ui-components";
import { useForm } from "react-hook-form";
import styled from "styled-components";
import { useTranslation } from "react-i18next";
import classNames from "classnames";
const LS_KEY = "scm.theme";
const useThemeState = () => {
const [theme] = useState(localStorage.getItem(LS_KEY) || "light");
const [theme] = useState(localStorage.getItem(LS_KEY) || "systemdefault");
const [isLoading, setLoading] = useState(false);
const setTheme = (name: string) => {
@@ -47,7 +48,7 @@ type ThemeForm = {
theme: string;
};
const themes = ["light", "highcontrast"];
const themes = ["light", "dark", "highcontrast", "systemdefault"];
const RadioColumn = styled.div`
flex: none;
@@ -60,7 +61,8 @@ const Theme: FC = () => {
register,
setValue,
handleSubmit,
formState: { isDirty }
formState: { isDirty },
watch
} = useForm<ThemeForm>({
mode: "onChange",
defaultValues: {
@@ -76,14 +78,23 @@ const Theme: FC = () => {
return (
<>
<Subtitle>{t("profile.theme.subtitle")}</Subtitle>
<form onSubmit={handleSubmit(onSubmit)}>
<form className="is-flex is-flex-direction-column" onSubmit={handleSubmit(onSubmit)}>
{themes.map(theme => {
const a11yId = createA11yId("theme");
return (
<div
key={theme}
onClick={() => setValue("theme", theme, { shouldDirty: true })}
className="card ml-1 mb-5 control columns is-vcentered has-cursor-pointer"
className={classNames(
"card",
"ml-1",
"mb-5",
"control",
"columns",
"is-vcentered",
"has-cursor-pointer",
{ "has-background-secondary-less": theme === watch().theme }
)}
>
<RadioColumn className="column">
<Radio {...register("theme")} value={theme} disabled={isLoading} ariaLabelledby={a11yId} />
@@ -95,7 +106,9 @@ const Theme: FC = () => {
</div>
);
})}
<ButtonGroup className="is-justify-content-flex-end">
<SubmitButton label={t("profile.theme.submit")} loading={isLoading} disabled={!isDirty} />
</ButtonGroup>
</form>
</>
);

2
scm-ui/ui-webapp/src/repos/codeSection/components/CodeActionBar.tsx
View File

@@ -30,7 +30,7 @@ import { useTranslation } from "react-i18next";
import { Branch } from "@scm-manager/ui-types";
const ActionBar = styled.div`
border: 1px solid #dbdbdb;
border: 1px solid var(--scm-border-color);
border-radius: 4px;
font-size: 1.25em;
font-weight: 300;

2
scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx
View File

@@ -45,7 +45,7 @@ const RepositoryFormButton: FC<RepositoryForm> = ({ path, icon, label }) => {
color={isSelected ? "link is-selected" : undefined}
link={!isSelected ? href : undefined}
>
<Icon className="pr-2" name={icon} color={isSelected ? "secondary-least" : "inherit"} alt="" />
<Icon className="pr-2" name={icon} color="inherit" alt="" />
<p className={classNames("is-hidden-mobile", "is-hidden-tablet-only")}>{t(`plugins:${label}`, label)}</p>
</Button>
);

2
scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx
View File

@@ -43,7 +43,7 @@ const InfoBox = styled.div`
white-space: pre-line;
border-radius: 2px;
border-left: 0.2rem solid;
border-color: #33b2e8;
border-color: var(--scm-info-color);
`;
type Props = {

4
scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
View File

@@ -42,7 +42,7 @@ type Props = {
};
const HeaderWrapper = styled.div`
border-bottom: solid 1px #dbdbdb;
border-bottom: 1px solid var(--scm-border-color);
font-size: 1.25em;
font-weight: 300;
line-height: 1.25;
@@ -50,7 +50,7 @@ const HeaderWrapper = styled.div`
`;
const BorderBottom = styled.div`
border-bottom: solid 1px #dbdbdb;
border-bottom: 1px solid var(--scm-border-color);
`;
const FullWidthTitleHeader = styled.div`

10
scm-ui/ui-webapp/src/search/Syntax.tsx
View File

@@ -184,6 +184,7 @@ const TimestampConverter: FC = () => {
<div className="is-flex">
<span className="is-flex mr-5">
<InputField
className="m-0"
value={datetime}
onChange={setDatetime}
placeholder={t("search.syntax.utilities.datetime.format")}
@@ -194,15 +195,13 @@ const TimestampConverter: FC = () => {
</span>
<span className="is-flex">
<InputField
className="mr-4"
className="m-0 mr-4"
value={timestamp}
readOnly={true}
placeholder={t("search.syntax.utilities.timestampPlaceholder")}
/>
<StyledTooltip
message={t("search.syntax.utilities.copyTimestampTooltip")}
className="is-flex is-align-items-center"
>
<div className="is-flex is-align-items-center">
<StyledTooltip message={t("search.syntax.utilities.copyTimestampTooltip")}>
{copying ? (
<span className="small-loading-spinner" />
) : (
@@ -215,6 +214,7 @@ const TimestampConverter: FC = () => {
/>
)}
</StyledTooltip>
</div>
</span>
</div>
);