mirror of
https://github.com/pulsar-edit/pulsar.git
synced 2024-09-19 15:08:08 +03:00
9631875d8e
It's the only area that is there all the time. The other areas change depending on how much content there is. This could lead to wrongly train your muscle memory.
88 lines
1.8 KiB
Plaintext
88 lines
1.8 KiB
Plaintext
@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
|
|
}
|
|
}
|