Homec4science
Diffusion Nietzsche-Beta-App (crossref-editor) Browse

NietzscheBeta/nietzsche-beta-app/src/app/page-view-component/page-view-component.component.scss
136952e377dacrossref-editor

Last Change
Raw File

page-view-component.component.scss
View Options

// the overall mat-card
mat-card {
height: 85vh;
overflow: hidden;
}
// the details drawer on the very right
.drawer {
padding: 10px;
width: 25%;
}
// The content area of the drawer as a table containing button & content
.in-drawer-content-area {
min-height: 300px;
height: 70vh;
min-width: 95%;
display:table;
}
.in-drawer-toggle-button-container {
height:100%;
vertical-align: top;
min-width: 10%;
width:10%;
display: table-cell;
}
.in-drawer-content-container {
height:100%;
// vertical-align: top;
align-content: left;
width:90%;
display: table-cell;
padding: 10px;
}
// the content container containing the content area
.main-content-container {
min-height: 300px;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
// The content area as a table containing the main content and the outer toggle button container
.outer-content-area {
min-height: 300px;
height: 100%;
display:table;
}
.content-container {
height:100%;
vertical-align: top;
align-content: left;
width:80%;
display: table-cell;
padding: 10px;
}
// nav buttons
.page-turn-button-container {
height:100%;
vertical-align: middle;
min-width: unset; // needed because angular sets an own min width!?
width:20px;
display: table-cell;
}
.page-turn-button { // fills sidenav-button-container completely, so all is one button
height: 100px;
min-width: unset; // needed because angular sets an own min width!?
width: 15px;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
// the cell where the button will be in the main content area
.toggle-button-container {
height:100%;
display: table-cell;
vertical-align: top;
align-content: right;
align-items: right;
min-width: 5%;
width: 100%;
padding: 1em;
}
.toggle-button { // fills sidenav-button-container completely, so all is one button
height: 100px;
min-width: unset; // needed because angular sets an own min width!?
width: 15px;
display: flex;
justify-content: center;
margin: 0;
padding: 0;
}
// for options
.right-outer-element {
margin-right: 3em;
}
.right-inner-element {
margin-left: 1em;
}
.mat-button-toggle-group.mat-button-toggle-group {
display: flex;
align-items: right;
}
.images-container {
display: table;
}
.image-sell-container {
display: table-cell;
}
c4science · Help