121 lines
2.6 KiB
SCSS
121 lines
2.6 KiB
SCSS
@import "../../app.scss";
|
|
|
|
$status-bar-left-top-icon-width: 30px;
|
|
$status-bar-middle-icon-width: 15px;
|
|
|
|
view.status-bar {
|
|
top: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
position: fixed;
|
|
justify-content: space-between;
|
|
background-color: $theme-color-light-layout;
|
|
|
|
view.select {
|
|
flex: 1;
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: center;
|
|
padding-left: 18px;
|
|
|
|
image {
|
|
width: $status-bar-left-top-icon-width;
|
|
height: $status-bar-left-top-icon-width;
|
|
filter: $black-filter;
|
|
}
|
|
|
|
view.semester {
|
|
height: 100%;
|
|
display: flex;
|
|
padding-left: 5px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
view.semester-title {
|
|
@extend %status-bar-title;
|
|
font-size: .9em;
|
|
line-height: .9em;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
view.semester-intro {
|
|
@extend %status-bar-subtitle;
|
|
font-size: .9em;
|
|
line-height: .9em;
|
|
}
|
|
}
|
|
}
|
|
|
|
view.capsule-holder {
|
|
flex: 1;
|
|
height: 100%;
|
|
}
|
|
|
|
view.content {
|
|
flex: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
image {
|
|
width: $status-bar-middle-icon-width;
|
|
height: $status-bar-middle-icon-width;
|
|
filter: $black-filter;
|
|
}
|
|
|
|
view.week {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-align: center;
|
|
height: 100%;
|
|
|
|
view.week-title {
|
|
@extend %status-bar-title;
|
|
font-weight: 600;
|
|
font-size: 1.15em;
|
|
line-height: 1.15em;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
view.week-intro {
|
|
@extend %status-bar-subtitle;
|
|
font-size: .85em;
|
|
line-height: .85em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
view.status-bar-blank {
|
|
width: 100%;
|
|
}
|
|
|
|
%status-bar-title {
|
|
color: $theme-color-light-title;
|
|
}
|
|
|
|
%status-bar-subtitle {
|
|
color: $theme-color-light-text;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark){
|
|
|
|
%status-bar-title {
|
|
color: $theme-color-dark-title;
|
|
}
|
|
|
|
%status-bar-subtitle {
|
|
color: $theme-color-dark-text;
|
|
}
|
|
|
|
view.status-bar {
|
|
background-color: $theme-color-dark-layout;
|
|
|
|
view.select image {
|
|
filter: $white-filter;
|
|
}
|
|
}
|
|
}
|