ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-05-28 21:14:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Change primary color for dark on backgrounds

Browse Source
This commit is contained in:
ziajka 2017-11-02 09:17:15 +01:00
parent 8be2317c69
commit 52dc273489
5 changed files with 69 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/default-layout/default-layout.component.css
View File

@ -19,7 +19,7 @@ app-default-layout {
.footer {
flex-shrink: 0;
padding: 20px;
background-color: #0097a7;
/*background-color: #0097a7;*/
color: white;
}
@ -49,7 +49,7 @@ main {
.default-header {
padding-left: 20px;
background-color: #0097a7;
/*background-color: #0097a7;*/
}
.buttons-bar {

4
src/app/default-layout/default-layout.component.html
View File

@ -4,7 +4,7 @@
<mat-icon svgIcon="gns3"></mat-icon>
</button>
<a mat-button routerLink="/servers" >Servers</a>
<button mat-button routerLink="/servers" >Servers</button>
</mat-toolbar>
</header>
@ -12,7 +12,7 @@
<router-outlet></router-outlet>
</main>
<footer class="footer primary-light-bg">
<footer class="footer mat-app-background">
GNS3 Web UI demo &copy; 2017
</footer>

22
src/app/project-map/project-map.component.html
View File

@ -3,21 +3,21 @@
<div class="project-toolbar">
<mat-toolbar color="primary" class="project-toolbar">
<button mat-icon-button>
<button mat-icon-button [routerLink]="['/server', server.id, 'projects']">
<mat-icon svgIcon="gns3"></mat-icon>
</button>
<mat-toolbar-row>
<button mat-icon-button>
<mat-icon>verified_user</mat-icon>
</button>
</mat-toolbar-row>
<!--<mat-toolbar-row>-->
<!--<button mat-icon-button>-->
<!--<mat-icon>verified_user</mat-icon>-->
<!--</button>-->
<!--</mat-toolbar-row>-->
<mat-toolbar-row>
<button mat-icon-button>
<mat-icon>delete</mat-icon>
</button>
</mat-toolbar-row>
<!--<mat-toolbar-row>-->
<!--<button mat-icon-button>-->
<!--<mat-icon>delete</mat-icon>-->
<!--</button>-->
<!--</mat-toolbar-row>-->
</mat-toolbar>
</div>

2
src/app/projects/projects.component.html
View File

@ -1,5 +1,5 @@
<div class="content">
<div class="default-header">
<div class="default-header mat-app-background">
<h1>Projects</h1>
</div>
<div class="default-content">

56
src/theme.scss
View File

@ -5,9 +5,59 @@
// Define a theme.
$primary: mat-palette($mat-cyan, 700, 500, 900);
$accent: mat-palette($mat-blue-grey, A200, A100, A400);
$accent: mat-palette($mat-blue-grey, A200, A100, A700);
$theme: mat-dark-theme($primary, $accent);
// Include all theme styles for the components.
@include angular-material-theme($theme);
$dark-palette: mat-palette($mat-blue-grey, 900, A100, A400);
$dark-background: mat-dark-theme($dark-palette, $primary);
$mat-dark-theme-background: (
status-bar: black,
app-bar: map_get($mat-blue-grey, 900),
background: map_get($mat-blue-grey, 900),
hover: rgba(white, 0.04),
card: map_get($mat-blue-grey, 900),
dialog: map_get($mat-blue-grey, 900),
disabled-button: $white-12-opacity,
raised-button: map-get($mat-grey, 800),
focused-button: $white-6-opacity,
selected-button: map_get($mat-grey, 900),
selected-disabled-button: map_get($mat-grey, 800),
disabled-button-toggle: black,
unselected-chip: map_get($mat-grey, 700),
disabled-list-option: black,
);
$theme: map-merge($theme, (background: $mat-dark-theme-background));
@include mat-core-theme($theme);
@include mat-autocomplete-theme($theme);
@include mat-button-theme($theme);
@include mat-button-toggle-theme($theme);
@include mat-card-theme($theme);
@include mat-checkbox-theme($theme);
@include mat-chips-theme($theme);
@include mat-table-theme($theme);
@include mat-datepicker-theme($theme);
@include mat-dialog-theme($theme);
@include mat-expansion-panel-theme($theme);
@include mat-form-field-theme($theme);
@include mat-grid-list-theme($theme);
@include mat-icon-theme($theme);
@include mat-input-theme($theme);
@include mat-list-theme($theme);
@include mat-menu-theme($theme);
@include mat-paginator-theme($theme);
@include mat-progress-bar-theme($theme);
@include mat-progress-spinner-theme($theme);
@include mat-radio-theme($theme);
@include mat-select-theme($theme);
@include mat-sidenav-theme($theme);
@include mat-slide-toggle-theme($theme);
@include mat-slider-theme($theme);
@include mat-stepper-theme($theme);
@include mat-tabs-theme($theme);
@include mat-toolbar-theme($dark-background);
@include mat-tooltip-theme($theme);
@include mat-snack-bar-theme($theme);