123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- @import "ui-variables";
- @title-bar-height: 22px;
- @traffic-lights-width: 68px;
- @inset-title-bar-height: 38px;
- @inset-traffic-lights-width: 78px;
- @title-bar-text-size: 13px;
- @title-bar-background-color: @base-background-color;
- @title-bar-border-color: @base-border-color;
- // Title Bar -------------------------------
- .title-bar {
- display: flex;
- flex-shrink: 0;
- align-items: center;
- justify-content: center;
- overflow: hidden;
- box-sizing: content-box;
- font-size: @title-bar-text-size;
- background-color: @title-bar-background-color;
- border-bottom: 1px solid @title-bar-border-color;
- transition: margin-top 160ms;
- -webkit-user-select: none;
- -webkit-app-region: drag;
- .title {
- flex: 0 1 auto;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .is-blurred & {
- color: @text-color-subtle;
- }
- }
- // Custom -------------------------------
- .custom-title-bar {
- .title-bar {
- height: @title-bar-height;
- padding-left: @traffic-lights-width;
- padding-right: @traffic-lights-width;
- }
- &.fullscreen .title-bar {
- margin-top: -@title-bar-height; // hide title bar in fullscreen mode
- }
- atom-panel.modal {
- top: @title-bar-height; // Move modals down
- }
- }
- // Custom Inset -------------------------------
- .custom-inset-title-bar {
- .title-bar {
- height: @inset-title-bar-height;
- padding-left: @inset-traffic-lights-width;
- padding-right: @inset-traffic-lights-width;
- }
- &.fullscreen .title-bar {
- margin-top: -@inset-title-bar-height; // hide title bar in fullscreen mode
- }
- atom-panel.modal {
- top: @inset-title-bar-height; // Move modals down
- }
- }
- // Hidden -------------------------------
- .hidden-title-bar {
- .status-bar {
- -webkit-app-region: drag; // Enable dragging
- }
- }
|