237 lines
4.0 KiB
SCSS
237 lines
4.0 KiB
SCSS
$avatar-height: 48px;
|
|
|
|
.titlebar {
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 800;
|
|
|
|
.main {
|
|
height: $titlebar-height;
|
|
width: 100%;
|
|
display: flex;
|
|
position: relative;
|
|
|
|
.back {
|
|
flex: 1 0 auto;
|
|
display: flex;
|
|
position: relative;
|
|
margin-left: 35px;
|
|
width: 40px;
|
|
align-items: center;
|
|
padding-left: 4px;
|
|
|
|
+ .left > div:first-child {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
&:after {
|
|
position: absolute;
|
|
height: 50px;
|
|
width: 1px;
|
|
content: "";
|
|
background: #3c3732;
|
|
top: ($titlebar-height - 50px) / 2;
|
|
right: -1px;
|
|
}
|
|
|
|
svg {
|
|
transform: rotate(45deg);
|
|
|
|
path {
|
|
fill: #c89b3c;
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
|
|
path {
|
|
fill: #f1e6d4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.left {
|
|
flex: 1 1 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
h1 {
|
|
color: #f1e6d4;
|
|
text-transform: uppercase;
|
|
margin-left: 24px;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
> div {
|
|
&:first-child {
|
|
margin-left: 40px;
|
|
}
|
|
|
|
&.avatar-wrapper {
|
|
flex-shrink: 0;
|
|
@include size($avatar-height);
|
|
|
|
+ div {
|
|
margin-left: 24px;
|
|
}
|
|
|
|
> div.avatar {
|
|
@include size($avatar-height - 4px);
|
|
}
|
|
}
|
|
}
|
|
|
|
> .tab {
|
|
font: bold 15px/18px Alegreya SC;
|
|
flex: 0 1 auto;
|
|
letter-spacing: 0.1em;
|
|
margin-left: 35px;
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
color: #cdbe91;
|
|
min-width: 0;
|
|
|
|
&:hover {
|
|
color: #f1e6d4;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:active, &:focus {
|
|
color: #c89b3c;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.active {
|
|
pointer-events: none;
|
|
color: #f1e6d4;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
content: "";
|
|
width: 4px;
|
|
height: 4px;
|
|
bottom: -4px;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0 auto;
|
|
border: 1px solid #cdbe91;
|
|
border-color: transparent #cdbe91 #cdbe91 transparent;
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
pointer-events: none;
|
|
color: transparentize(#878683, .2);
|
|
}
|
|
|
|
div {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
flex: 1 0 auto;
|
|
display: flex;
|
|
position: relative;
|
|
margin: 0 35px;
|
|
align-items: center;
|
|
|
|
// &:before {
|
|
// display: block;
|
|
// position: absolute;
|
|
// height: 44px;
|
|
// width: 1px;
|
|
// content: "";
|
|
// background: #3a322b;
|
|
// top: ($titlebar-height - 44px) / 2;
|
|
// left: 0;
|
|
// }
|
|
|
|
.iconbutton, .btn {
|
|
margin-left: 11px;
|
|
}
|
|
|
|
.ap, .account {
|
|
flex: 1 0 auto;
|
|
font: bold 15px/#{$titlebar-height} Alegreya SC;
|
|
letter-spacing: 0.1em;
|
|
margin: 0 11px 0 35px;
|
|
text-transform: uppercase;
|
|
color: #a19b8f;
|
|
position: relative;
|
|
}
|
|
|
|
// .ap:hover + .details {
|
|
// visibility: visible;
|
|
// }
|
|
|
|
// .details {
|
|
// background: #010a13;
|
|
// border: 1px solid #785a28;
|
|
// position: absolute;
|
|
// font: 500 12px/18px Alegreya Sans;
|
|
// letter-spacing: 0.05em;
|
|
// color: #878683;
|
|
// padding: 13px 0;
|
|
// top: $titlebar-height - 12px;
|
|
// // right: 112px;
|
|
// white-space: nowrap;
|
|
// // width: 2px;
|
|
// visibility: hidden;
|
|
// // transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
// // min-width: 150px;
|
|
// right: 16px;
|
|
// padding: 13px 18px;
|
|
// box-shadow: 0 0 18px 4px black;
|
|
|
|
// &:before, &:after {
|
|
// position: absolute;
|
|
// display: block;
|
|
// content: "";
|
|
// @include calc(width, '100% - 10px');
|
|
// height: 2px;
|
|
// left: 4px;
|
|
// background: #785a28;
|
|
// }
|
|
|
|
// &:before {
|
|
// top: -5px;
|
|
// }
|
|
|
|
// &:after {
|
|
// bottom: -5px;
|
|
// }
|
|
|
|
// div {
|
|
// overflow: hidden;
|
|
// }
|
|
|
|
// hr {
|
|
// margin: 10px 0;
|
|
// padding: 0;
|
|
// background: #1f282d;
|
|
// height: 1px;
|
|
// }
|
|
|
|
// span {
|
|
// color: #f1e6d4;
|
|
// }
|
|
// }
|
|
|
|
.menu-button {
|
|
flex: 1 0 auto;
|
|
font: 24px/#{$titlebar-height} Material;
|
|
width: $titlebar-height;
|
|
text-align: center;
|
|
display: none;
|
|
color: #f1e6d4;
|
|
}
|
|
}
|
|
}
|
|
} |