:host { .app-layout-native-title-bar { -webkit-user-select: none; -webkit-app-region: drag; position: fixed; right: 0; top: 0; display: flex; padding: 0 10px; cursor: pointer; height: 30px; color:#ffffff; //background: rgba(37, 27, 30, 0.9); //border-bottom: 1px solid #d5dadb; .app-layout-native-title-bar-logo { width: 16px; height: 16px; } .app-layout-native-title-bar-title { padding-left: 8px; font-size: 12px; } .app-layout-native-title-bar-spacer { flex: 1 1 auto; } .app-layout-native-title-bar-actions { position: relative; .button { -webkit-app-region: no-drag; outline: 0; cursor: pointer; border: none; height: 30px; min-width: 30px; max-width: 30px; padding: 5px; line-height: 10px; border-radius: 0; background: transparent; transition: background 0.2s linear, color 0.2s linear; text-align: center; font-size: 10px; vertical-align: middle; margin-left:6px; transform: translateY(-2px); .mat-icon { //transform: translateY(-2px); width: 16px; height: 16px; min-height:16px; min-width:16px; font-size: 16px; } &.app-layout-native-title-bar-close, &.app-layout-native-title-bar-maximize, &.app-layout-native-title-bar-minimize { color: darken(white, 20%); font-weight: lighter; } // &.app-layout-native-title-bar-minimize .mat-icon { // transform: translateY(-43%); // } &:hover { &.app-layout-native-title-bar-close { background: darken(#000000, 10%); color: darken(white, 0); } &.app-layout-native-title-bar-minimize { background: darken(#000000, 10%); color: darken(white,0); } &.app-layout-native-title-bar-maximize { background: darken(#000000, 10%); color: darken(white, 0); } } } } } }