Pilgrim/src/pilgrim/ui/styles/pilgrim.css

888 lines
16 KiB
CSS

Screen {
layout: vertical;
background: $primary-background-darken-3;
align: center middle;
hatch: right $secondary-background-darken-3;
}
.EditEntryScreen-sub-header {
layout: horizontal;
background: $primary-darken-1;
height: 1;
padding: 0 1;
align: center middle;
width: 100%;
}
.EditEntryScreen-diary-info {
width: auto;
color: $text-muted;
margin-right: 2;
}
.EditEntryScreen-entry-info {
width: auto;
color: $text;
margin-right: 1;
}
.EditEntryScreen-spacer {
width: 1fr;
}
.EditEntryScreen-status-indicator {
width: auto;
padding: 0 1;
content-align: center middle;
}
.EditEntryScreen-status-indicator.saved {
background: #2E8B57; /* SeaGreen */
color: $text;
}
.EditEntryScreen-status-indicator.not-saved {
background: #B22222; /* FireBrick */
color: $text;
}
.EditEntryScreen-status-indicator.new {
background: #4682B4; /* SteelBlue */
color: $text;
}
.EditEntryScreen-status-indicator.read-only {
background: #696969; /* DimGray */
color: $text-muted;
}
.EditEntryScreen-main-container {
background: bisque;
margin: 0;
}
.EditEntryScreen-text-entry {
width: 100%;
height: 1fr;
border: none;
}
AboutScreen {
align: center middle;
}
#AboutScreen_AboutContainer {
align: center middle;
width: 85%;
height: 95%;
border: thick $primary;
background: $surface;
margin: 1;
}
#AboutScreen_AboutContainer TextArea {
align: center middle;
width: 100%;
height: 55%;
margin: 2;
padding: 1;
}
#AboutScreen_SubContainer {
align: center middle;
height: 45%;
padding: 1 1;
margin: 1 1;
}
#AboutScreen_AboutTitle {
color: $accent;
text-style: bold;
text-align: center;
margin-bottom: 1;
}
#AboutScreen_AboutVersion {
color: $warning;
text-style: italic;
text-align: center;
margin-bottom: 1;
}
#AboutScreen_AboutContent {
text-align: center;
margin-bottom: 1;
}
#AboutScreen_AboutContact,
#AboutScreen_AboutAuthor {
color: $text-muted;
text-align: center;
margin-bottom: 1;
}
#AboutScreen_AboutLicense {
height: 60%;
}
/* Main container - distributing vertical space */
.DiaryListScreen-DiaryListContainer {
height: 1fr;
width: 100%;
layout: vertical;
align: center top; /* Aligns at the top to follow the wireframe */
padding: 2 4; /* More space on the sides */
background: $surface; /* Removing aquamarine to keep it cleaner */
}
/* Diary list - main area as in the wireframe */
.DiaryListScreen-DiaryListOptions {
border: round $primary-lighten-2;
background: $surface;
width: 75%; /* Generous width as in the wireframe */
height: 60%; /* Occupies available space */
margin: 2 0; /* Vertical margin to separate from other elements */
}
.DiaryListScreen-DiaryListOptions:focus {
border: round $primary;
}
/* Button container - right below the list */
.DiaryListScreen-ButtonsGrid {
layout: horizontal;
align: center middle;
width: 75%; /* Same width as the diary list */
height: 20%; /* Increasing height to fit button text */
}
/* Individual buttons - ensuring space for text */
.DiaryListScreen-NewDiaryButton,
.DiaryListScreen-EditDiaryButton,
.DiaryListScreen-OpenDiaryButton {
margin: 0 1 1 0; /* Space between buttons */
height: 1fr;
width: 1fr;
border: round grey;
text-align: center;
content-align: center middle;
}
/* Tips - using the correct class */
.DiaryListScreen-DiaryListTips {
width: 100%; /* Full width when using dock */
height: auto;
text-style: italic;
text-align: center; /* Centers text within the element */
color: $text-muted;
dock: bottom; /* Sticks to the bottom of the screen */
margin: 0 1;
}
/* Generic styles that haven't changed */
.option-list--option-highlighted {
background: $primary-darken-2;
}
.option-list--option-selected {
text-style: bold;
background: $primary;
}
Header {
background: $primary;
color: $text;
}
Footer {
background: $primary;
color: $text;
}
Screen.-modal {
background: rgba(0, 0, 0, 0.7); /* Darkens the background screen underneath */
align: center middle; /* Centers the content (your modal) that is in this modal screen */
}
/* Style for the new diary modal dialog */
.NewDiaryModal-dialog {
layout: vertical;
width: 60%;
height: auto;
background: $surface;
border: thick $accent;
padding: 2 4;
align: center middle;
}
.NewDiaryModal-title {
text-align: center;
text-style: bold;
color: $primary;
margin-bottom: 1;
}
.NewDiaryModal-label {
margin-bottom: 1;
}
.NewDiaryModal-name-input {
width: 1fr;
margin-bottom: 2;
}
.NewDiaryModal-buttons {
width: 1fr;
height: auto;
align: center middle;
padding-top: 1;
}
.NewDiaryModal-buttons Button {
margin: 0 1;
width: 1fr;
}
/* Additional classes for NewDiaryModal */
.NewDiaryModal-Dialog {
layout: vertical;
width: 60%;
height: auto;
background: $surface;
border: thick $accent;
padding: 2 4;
align: center middle;
}
.NewDiaryModal-Title {
text-align: center;
text-style: bold;
color: $primary;
margin-bottom: 1;
}
.NewDiaryModal-NameInput {
width: 1fr;
margin-bottom: 2;
}
.NewDiaryModal-ButtonsContainer {
width: 1fr;
height: auto;
align: center middle;
padding-top: 1;
}
.NewDiaryModal-CreateDiaryButton,
.NewDiaryModal-CancelButton {
margin: 0 1;
width: 1fr;
}
/* Style for the edit diary modal dialog */
.EditDiaryModal-dialog {
layout: vertical;
width: 60%;
height: auto;
background: $surface;
border: thick $warning;
padding: 2 4;
align: center middle;
}
.EditDiaryModal-title {
text-align: center;
text-style: bold;
color: $warning;
margin-bottom: 1;
}
.EditDiaryModal-label {
margin-bottom: 1;
}
.EditDiaryModal-name-input {
width: 1fr;
margin-bottom: 2;
}
.EditDiaryModal-buttons {
width: 1fr;
height: auto;
align: center middle;
padding-top: 1;
}
.EditDiaryModal-buttons Button {
margin: 0 1;
width: 1fr;
}
/* Additional classes for EditDiaryModal */
.EditDiaryModal-Dialog {
layout: vertical;
width: 60%;
height: auto;
background: $surface;
border: thick $warning;
padding: 2 4;
align: center middle;
}
.EditDiaryModal-Title {
text-align: center;
text-style: bold;
color: $warning;
margin-bottom: 1;
}
.EditDiaryModal-NameInput {
width: 1fr;
margin-bottom: 2;
}
.EditDiaryModal-ButtonsContainer {
width: 1fr;
height: auto;
align: center middle;
padding-top: 1;
}
.EditDiaryModal-SaveButton,
.EditDiaryModal-CancelButton {
margin: 0 1;
width: 1fr;
}
/* Style for the rename entry modal dialog */
.RenameEntryModal-dialog {
layout: vertical;
width: 60%;
height: auto;
background: $surface;
border: thick $accent;
padding: 2 4;
align: center middle;
}
.RenameEntryModal-title {
text-align: center;
text-style: bold;
color: $accent;
margin-bottom: 1;
}
.RenameEntryModal-name-input {
width: 1fr;
margin-bottom: 2;
}
.RenameEntryModal-buttons {
width: 1fr;
height: auto;
align: center middle;
padding-top: 1;
}
.RenameEntryModal-save-button,
.RenameEntryModal-cancel-button {
margin: 0 1;
width: 1fr;
}
.EditEntryScreen-sidebar{
background: $primary-darken-1;
width: 45%;
}
.EditEntryScreen-sidebar-title {
text-align: center;
text-style: bold;
color: $accent;
padding: 1;
border-bottom: solid $accent;
margin-bottom: 1;
}
.EditEntryScreen-sidebar-content {
height: 1fr;
layout: vertical;
margin-left: 1;
margin-right: 1;
}
.EditEntryScreen-sidebar-photo-list {
height: 2fr; /* Pega o espaço restante disponível */
min-height: 5; /* Garante altura mínima para não sumir */
border: solid $accent;
margin-bottom: 1;
overflow-y: auto; /* Adiciona scroll vertical se necessário */
}
.EditEntryScreen-sidebar-photo-info {
height: 1fr;
max-height: 15; /* Limita altura máxima */
min-height: 13;
padding: 1;
border: solid $warning;
margin-bottom: 1;
background: $surface-darken-1;
overflow-y: auto; /* Adiciona scroll se exceder max-height */
}
.EditEntryScreen-sidebar-help {
height: 1fr;
max-height: 10; /* Altura máxima menor que info */
min-height: 8; /* Altura mínima menor */
border: solid $success;
padding: 1;
background: $surface-darken-1;
text-style: italic;
overflow-y: auto; /* Adiciona scroll se exceder max-height */
}
/* Photo Modal Styles */
.modal-dialog {
layout: vertical;
width: 60%;
height: auto;
background: $surface;
border: thick $accent;
padding: 2 4;
align: center middle;
}
.modal-title {
text-align: center;
text-style: bold;
color: $primary;
margin-bottom: 1;
}
.modal-label {
margin-bottom: 1;
color: $text;
}
.modal-input {
width: 1fr;
margin-bottom: 2;
}
.modal-buttons {
width: 1fr;
height: auto;
align: center middle;
padding-top: 1;
}
.modal-button {
margin: 0 1;
width: 1fr;
}
/* AddPhotoModal styles */
.AddPhotoModal-Dialog {
layout: vertical;
width: 60%;
height: auto;
background: $surface;
border: thick $accent;
padding: 2 4;
align: center middle;
}
.AddPhotoModal-Title {
text-align: center;
text-style: bold;
color: $primary;
margin-bottom: 1;
}
.AddPhotoModal-Label {
margin-bottom: 1;
color: $text;
}
.AddPhotoModal-Input {
width: 1fr;
margin-bottom: 2;
}
.AddPhotoModal-Buttons {
width: 1fr;
height: auto;
align: center middle;
padding-top: 1;
}
.AddPhotoModal-Button {
margin: 0 1;
width: 1fr;
}
/* EditPhotoModal styles */
.EditPhotoModal-Dialog {
layout: vertical;
width: 60%;
height: auto;
background: $surface;
border: thick $accent;
padding: 2 4;
align: center middle;
}
.EditPhotoModal-Title {
text-align: center;
text-style: bold;
color: $primary;
margin-bottom: 1;
}
.EditPhotoModal-Label {
margin-bottom: 1;
color: $text;
}
.EditPhotoModal-Input {
width: 1fr;
margin-bottom: 2;
}
.EditPhotoModal-Buttons {
width: 1fr;
height: auto;
align: center middle;
padding-top: 1;
}
.EditPhotoModal-Button {
margin: 0 1;
width: 1fr;
}
/* FilePickerModal styles */
.FilePickerModal-Dialog {
layout: vertical;
width: 80%;
height: 80%;
background: $surface;
border: thick $accent;
padding: 2 4;
align: center middle;
}
.FilePickerModal-Title {
text-align: center;
text-style: bold;
color: $primary;
margin-bottom: 1;
}
.FilePickerModal-Buttons {
width: 1fr;
height: auto;
align: center middle;
padding-top: 1;
}
.FilePickerModal-Button {
margin: 0 1;
width: 1fr;
}
/* DirectoryTree specific styles */
#directory-tree {
height: 1fr;
border: solid $accent;
margin: 1;
}
/* ConfirmDeleteModal styles */
.ConfirmDeleteModal-Dialog {
layout: vertical;
width: 60%;
height: auto;
background: $surface;
border: thick $error;
padding: 2 4;
align: center middle;
}
.ConfirmDeleteModal-Title {
text-align: center;
text-style: bold;
color: $error;
margin-bottom: 1;
}
.ConfirmDeleteModal-Message {
text-align: center;
color: $text;
margin-bottom: 1;
}
.ConfirmDeleteModal-Warning {
text-align: center;
color: $warning;
text-style: italic;
margin-bottom: 2;
}
.ConfirmDeleteModal-Buttons {
width: 1fr;
height: auto;
align: center middle;
padding-top: 1;
}
.ConfirmDeleteModal-Button {
margin: 0 1;
width: 1fr;
}
.DeleteYesConfirmationModal-DeleteModalContainer,
.DeleteDiaryModal-MainContainer {
align: center middle;
layout: vertical;
margin: 2;
padding: 2;
background: $primary-background;
height: auto;
width: auto;
min-width: 80%;
max-width: 95%;
border: solid $primary;
}
/* Labels de texto */
.DeleteYesConfirmationModal-DeleteModalContainer > Label,
.DeleteDiaryModal-MainContainer > Label {
margin: 1 0;
padding: 0 1;
color: $error;
text-align: center;
width: 100%;
}
/* Input fields */
.DeleteYesConfirmationModal-DeleteModalContainer > Input,
.DeleteDiaryModal-MainContainer > Input {
margin: 1 0;
width: 100%;
height: 3;
}
/* Container dos botões */
.DeleteYesConfirmationModal-DeleteButtonContainer,
.DeleteDiaryModal-ButtonContainer {
layout: horizontal;
align: center middle;
margin: 2 0 0 0;
height: auto;
width: 100%;
padding: 0;
}
/* Botões individuais */
.DeleteYesConfirmationModal-DeleteButtonContainer > Button,
.DeleteDiaryModal-ButtonContainer > Button {
width: 45%;
margin: 0 1;
height: 3;
}
/* Botão de delete (primeiro botão) */
.DeleteYesConfirmationModal-DeleteButtonContainer > Button:first-child,
.DeleteDiaryModal-ButtonContainer > Button:first-child {
background: $error-darken-1;
}
/* Botão de cancel */
.DeleteYesConfirmationModal-DeleteButtonContainer > Button:last-child,
.DeleteDiaryModal-ButtonContainer > Button:last-child {
background: $surface;
}
/* Estados disabled para botões de delete */
.DeleteYesConfirmationModal-DeleteButtonContainer > Button:first-child:disabled,
.DeleteDiaryModal-ButtonContainer > Button:first-child:disabled {
background: $surface-lighten-1;
color: $text-muted;
}
/* Espaçamento específico para labels secundários */
#DeleteYesConfirmationModal-SecondHeadText {
margin: 1 0;
padding: 0 1;
color: $warning;
text-align: center;
text-style: italic;
}
.Data_Container{
width: 100%;
layout: grid;
grid-size: 2 1; /* 2 colunas, 1 linha */
height:auto;
}
.Button_Container{
width: 100%;
layout: grid;
grid-size: 2 2;
height: auto;
}
.DiarySettingsScreen-DeleteDiaryButtonContainer{
grid-size: 2 1;
padding: 0 1;
content-align: center middle;
padding-bottom:1;
}
.DiarySettingsScreen-DeleteAllEntriesButtonContainer{
margin:0;
padding: 0 1;
height:auto;
padding-bottom:1;
}
.DiarySettingsScreen-DeleteAllPhotosButtonContainer{
margin:0;
padding: 0 1;
height:auto;
padding-bottom:1;
}
.DiarySettingsScreen-DeleteAllPhotosButtonContainer > Label,
.DiarySettingsScreen-DeleteAllEntriesButtonContainer > Label{
color: $error-lighten-3;
padding:1;
}
.DiarySettingsScreen-BackupDiaryButtonContainer{
margin:0;
padding:0 1;
padding-bottom:1
}
.DiarySettingsScreen-BackupDiaryButtonContainer > Label{
padding:1;
color: $success-darken-1;
}
.DiarySettingsScreen-BackupDiaryButtonContainer > Button{
background: $success;
}
.DiarySettingsScreen-DeleteDiaryButtonContainer > Label{
color: $error-lighten-3;
content-align: left middle;
padding:1
}
.DiarySettingsScreen-DeleteAllPhotosButtonContainer > Button,
.DiarySettingsScreen-DeleteAllEntriesButtonContainer > Button,
.DiarySettingsScreen-DeleteDiaryButtonContainer Button{
background: $error;
}
.DiarySettingsScreen-MainContainer{
align: center top;
layout: vertical;
margin:1;
padding:1;
background: $primary-background
}
.DiarySettingsScreen-DiaryInfoContainer{
padding:1 2;
border:round grey;
height:auto;
width: 90%;
padding-bottom: 0;
}
.DiarySettingsScreen-ButtonContainer{
height:auto;
layout: grid;
grid-size: 3 1;
grid-gutter:2;
dock:bottom;
}
.DiarySettingsScreen-ButtonContainer > Button:first-child {
margin-left:2
}
.DiarySettingsScreen-ButtonContainer > Button:last-child {
margin-right:2
}
.DiarySettingsScreen-ButtonContainer > Button {
width: 100%;
}
#DiarySettingsScreen-DiaryPhotoCountContainer > Static:first-child,
#DiarySettingsScreen-DiaryEntryCountContainer > Static:first-child,
#DiarySettingsScreen-DiaryNameContainer > Static:first-child{
text-align: left;
padding: 0 1;
padding-bottom:1
}
#DiarySettingsScreen-DiaryPhotoCountContainer > Static:last-child,
#DiarySettingsScreen-DiaryEntryCountContainer > Static:last-child,
#DiarySettingsScreen-DiaryNameContainer > Static:last-child{
text-align: right;
padding:0 1
}
.DiarySettingsScreen-SetAutoOpenToThisDiaryContainer > Checkbox{
margin:0;
padding:1;
background: $primary-background;
border:none;
}
.DiarySettingsScreen-SetAutoOpenToThisDiaryContainer-Not-Saved-Label{
text-style:bold;
color:$warning-lighten-2;
}
.DiarySettingsScreen-DiaryDengerZoneContainer{
border: round $error-darken-1;
width: 90%;
padding: 0 1;
height: auto;
padding-bottom: 0;
}