2016-05-25 16:19:51 +03:00
|
|
|
@import "ui-variables";
|
|
|
|
|
2017-01-14 10:06:50 +03:00
|
|
|
@title-bar-height: 22px;
|
|
|
|
@traffic-lights-width: 68px;
|
|
|
|
|
|
|
|
@inset-title-bar-height: 38px;
|
|
|
|
@inset-traffic-lights-width: 78px;
|
2016-10-15 13:12:53 +03:00
|
|
|
|
2016-05-25 16:19:51 +03:00
|
|
|
@title-bar-text-size: 13px;
|
|
|
|
@title-bar-background-color: @base-background-color;
|
|
|
|
@title-bar-border-color: @base-border-color;
|
2016-05-19 00:26:54 +03:00
|
|
|
|
2016-07-02 14:06:17 +03:00
|
|
|
|
2017-01-14 10:06:50 +03:00
|
|
|
// Title Bar -------------------------------
|
2016-05-19 00:26:54 +03:00
|
|
|
|
2017-01-14 10:06:50 +03:00
|
|
|
.title-bar {
|
2016-05-19 00:26:54 +03:00
|
|
|
display: flex;
|
2017-01-14 10:06:50 +03:00
|
|
|
flex-shrink: 0;
|
2016-05-19 00:26:54 +03:00
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
2017-01-14 10:06:50 +03:00
|
|
|
overflow: hidden;
|
|
|
|
box-sizing: content-box;
|
2016-05-19 00:26:54 +03:00
|
|
|
font-size: @title-bar-text-size;
|
2017-01-14 10:06:50 +03:00
|
|
|
background-color: @title-bar-background-color;
|
|
|
|
border-bottom: 1px solid @title-bar-border-color;
|
|
|
|
transition: margin-top 160ms;
|
2016-05-19 00:26:54 +03:00
|
|
|
-webkit-user-select: none;
|
2016-05-25 16:19:51 +03:00
|
|
|
-webkit-app-region: drag;
|
2016-05-19 00:26:54 +03:00
|
|
|
|
|
|
|
.title {
|
|
|
|
flex: 0 1 auto;
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
|
|
|
|
|
|
.is-blurred & {
|
2016-05-25 16:19:51 +03:00
|
|
|
color: @text-color-subtle;
|
2016-05-19 00:26:54 +03:00
|
|
|
}
|
|
|
|
}
|
2016-10-15 13:12:53 +03:00
|
|
|
|
|
|
|
|
2017-01-14 10:06:50 +03:00
|
|
|
// 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 -------------------------------
|
2016-10-15 13:12:53 +03:00
|
|
|
|
2017-01-14 10:06:50 +03:00
|
|
|
.custom-inset-title-bar {
|
|
|
|
.title-bar {
|
|
|
|
height: @inset-title-bar-height;
|
|
|
|
padding-left: @inset-traffic-lights-width;
|
|
|
|
padding-right: @inset-traffic-lights-width;
|
|
|
|
}
|
2016-10-25 04:25:40 +03:00
|
|
|
|
2017-01-14 10:06:50 +03:00
|
|
|
&.fullscreen .title-bar {
|
|
|
|
margin-top: -@inset-title-bar-height; // hide title bar in fullscreen mode
|
2016-10-15 13:12:53 +03:00
|
|
|
}
|
|
|
|
|
2017-01-14 10:06:50 +03:00
|
|
|
atom-panel.modal {
|
|
|
|
top: @inset-title-bar-height; // Move modals down
|
2016-10-15 13:12:53 +03:00
|
|
|
}
|
2017-01-14 10:06:50 +03:00
|
|
|
}
|
|
|
|
|
2016-10-15 13:12:53 +03:00
|
|
|
|
2017-01-14 10:06:50 +03:00
|
|
|
// Hidden -------------------------------
|
|
|
|
|
|
|
|
.hidden-title-bar {
|
|
|
|
.status-bar {
|
|
|
|
-webkit-app-region: drag; // Enable dragging
|
2016-10-15 13:12:53 +03:00
|
|
|
}
|
2016-10-25 04:25:40 +03:00
|
|
|
}
|