ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-05-31 22:40:43 +00:00
Code Issues Actions 1 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 { .footer {
flex-shrink: 0; flex-shrink: 0;
padding: 20px; padding: 20px;
background-color: #0097a7; /*background-color: #0097a7;*/
color: white; color: white;
} }
@ -49,7 +49,7 @@ main {
.default-header { .default-header {
padding-left: 20px; padding-left: 20px;
background-color: #0097a7; /*background-color: #0097a7;*/
} }
.buttons-bar { .buttons-bar {

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

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

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

@ -3,21 +3,21 @@
<div class="project-toolbar"> <div class="project-toolbar">
<mat-toolbar color="primary" 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> <mat-icon svgIcon="gns3"></mat-icon>
</button> </button>
<mat-toolbar-row> <!--<mat-toolbar-row>-->
<button mat-icon-button> <!--<button mat-icon-button>-->
<mat-icon>verified_user</mat-icon> <!--<mat-icon>verified_user</mat-icon>-->
</button> <!--</button>-->
</mat-toolbar-row> <!--</mat-toolbar-row>-->
<mat-toolbar-row> <!--<mat-toolbar-row>-->
<button mat-icon-button> <!--<button mat-icon-button>-->
<mat-icon>delete</mat-icon> <!--<mat-icon>delete</mat-icon>-->
</button> <!--</button>-->
</mat-toolbar-row> <!--</mat-toolbar-row>-->
</mat-toolbar> </mat-toolbar>
</div> </div>

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

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

56
src/theme.scss
View File

@ -5,9 +5,59 @@
// Define a theme. // Define a theme.
$primary: mat-palette($mat-cyan, 700, 500, 900); $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); $theme: mat-dark-theme($primary, $accent);
// Include all theme styles for the components. $dark-palette: mat-palette($mat-blue-grey, 900, A100, A400);
@include angular-material-theme($theme); $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);