: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: 50px; 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-link { align-items: center; position: relative; .stroke-bar { width: 1px; height: 20px; background-color: rgba(256, 256, 256, 0.3); margin: 0 10px 0 20px; display: inline-flex; } .button { -webkit-app-region: no-drag; outline: 0; cursor: pointer; border: none; height: 28px; min-width: 28px; max-width: 28px; 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: 10px; transform: translateY(-2px); &.app-layout-native-title-bar-logout, &.app-layout-native-title-bar-setting { background-color: #efefef; border-radius: 50%; } &:hover { opacity: 0.7; } } } .app-layout-native-title-bar-actions { align-items: center; 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 { border-radius: 4px; &.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); } } } } } }