mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-12-11 03:28:01 +01:00
387 lines
6.6 KiB
SCSS
387 lines
6.6 KiB
SCSS
@media (max-width: $min_px_width_for_desktop_layout) {
|
|
.hide-mobile {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $min_px_width_for_desktop_thumb) {
|
|
.hide-mobile-t {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $max_px_width_for_limited_desktop_layout) and (min-width: $min_px_width_for_desktop_layout) {
|
|
.hide-limited-desktop {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: $min_px_width_for_desktop_layout) {
|
|
.hide-desktop {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: $min_px_width_for_desktop_thumb) {
|
|
.hide-desktop-t {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
nav {
|
|
display: inline-block;
|
|
}
|
|
|
|
#burger {
|
|
font-size: 18px;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 200px;
|
|
height: 100%;
|
|
display: none;
|
|
overflow: auto;
|
|
background: $meta_color;
|
|
padding: 5px;
|
|
a {
|
|
background: $meta_color;
|
|
color: $foreground_color;
|
|
display: block;
|
|
padding: 5px;
|
|
}
|
|
a:hover {
|
|
background: $base_color;
|
|
color: $text_light_color;
|
|
}
|
|
}
|
|
|
|
#container {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
height: 100%;
|
|
margin: auto;
|
|
width: 100%;
|
|
background: $page_background_color;
|
|
}
|
|
|
|
#content {
|
|
margin-top: $header_spacing;
|
|
margin-bottom: $header_spacing;
|
|
flex: 1 0 auto;
|
|
clear: both;
|
|
|
|
> h1 {
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
@media (max-width: $min_px_width_for_desktop_layout) {
|
|
padding: 0 4px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: $min_px_width_for_desktop_layout) {
|
|
.layout--wide, .layout--medium, .layout--narrow {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.layout--narrow {
|
|
width: 96vw;
|
|
max-width: $limited_layout_width;
|
|
}
|
|
|
|
.layout--medium {
|
|
width: 96vw;
|
|
max-width: $medium_layout_width;
|
|
}
|
|
|
|
.layout--wide {
|
|
width: 100%;
|
|
padding-left: $layout_side_margin;
|
|
padding-right: $layout_side_margin;
|
|
}
|
|
|
|
.layout--center-aligned {
|
|
.layout--medium, .layout--narrow {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.layout--wide {
|
|
padding-left: $centered_layout_side_margin;
|
|
padding-right: $centered_layout_side_margin;
|
|
}
|
|
}
|
|
|
|
#container:not(.layout--center-aligned) #content {
|
|
padding-left: $layout_side_margin;
|
|
}
|
|
}
|
|
|
|
/* Use the following two classes to center content when user has layout centering enabled: */
|
|
// TODO replace this bullshit naming, this is not actually BEM at all and makes no sense
|
|
#container.layout--center-aligned .center--layout {
|
|
justify-content: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#container.layout--center-aligned .center--layout--flex {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
#footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 6px;
|
|
padding-bottom: 10px;
|
|
font-size: 12px;
|
|
color: $foreground_half_color;
|
|
background: $background_color;
|
|
line-height: 14px;
|
|
|
|
#footer_content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.footercol {
|
|
flex: 1 0 auto;
|
|
width: auto;
|
|
h5 {
|
|
margin: 3px 0;
|
|
}
|
|
}
|
|
.footercol + .footercol {
|
|
margin-left: 15px;
|
|
}
|
|
#serving_info {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex--centered {
|
|
align-items: center;
|
|
}
|
|
|
|
.flex--center-distributed {
|
|
justify-content: center;
|
|
}
|
|
|
|
// Mostly for the header
|
|
.flex--start-bunched {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.flex--end-bunched {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
@media (max-width: $min_px_width_for_desktop_layout) {
|
|
.flex--maybe-wrap {
|
|
flex-wrap: wrap !important;
|
|
}
|
|
}
|
|
|
|
.flex--maybe-wrap {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.flex--no-wrap {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.flex--wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.flex__right {
|
|
flex: 1 1 auto;
|
|
text-align: right;
|
|
}
|
|
|
|
.flex__grow {
|
|
flex: 1 0 0;
|
|
}
|
|
|
|
.flex__shrink {
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
.flex__fixed {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.flex--column {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.flex--spaced-out {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
}
|
|
|
|
@media (max-width: $min_px_width_for_desktop_layout) {
|
|
.stretched-mobile-links {
|
|
display: flex;
|
|
width: 100%;
|
|
|
|
/* Do not use a descendant selector here as it affects dropdowns */
|
|
> a, span {
|
|
text-align: center;
|
|
flex: 1 1 auto;
|
|
padding: 0 1vw; /* Having smaller padding makes it harder to click the right link on small mobile screens */
|
|
}
|
|
}
|
|
}
|
|
|
|
.alternating-color {
|
|
@include even-odd;
|
|
}
|
|
|
|
.spacing-right {
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.spacing-left {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.column-layout {
|
|
display: flex;
|
|
|
|
@media (max-width: $min_px_width_for_desktop_layout) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.column-layout__left {
|
|
flex: 0 0 auto;
|
|
width: 326px;
|
|
margin-right: $header_spacing;
|
|
word-wrap: break-word;
|
|
|
|
@media (max-width: $min_px_width_for_desktop_layout) {
|
|
margin-right: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.column-layout__main {
|
|
flex: 1 1 auto;
|
|
word-wrap: break-word;
|
|
/* prevent really long words from overflowing things */
|
|
min-width: 0;
|
|
}
|
|
|
|
figure {
|
|
display: table;
|
|
text-align: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
max-width: 400px;
|
|
display: inline-block;
|
|
}
|
|
figcaption {
|
|
display: block;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.theme-preview-trixie {
|
|
align-self: flex-end; /* place the image next to the theme switch (align it to the bottom of the container) */
|
|
min-width: 0; /* allow the image to be downsized */
|
|
padding-left: $block_spacing; /* on narrow screens, the image would sit uncomfortably close to the text */
|
|
}
|
|
|
|
.table-list__label {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
.table-list__label__text,
|
|
.table-list__label__input {
|
|
padding: 8px;
|
|
}
|
|
|
|
.table-list__label__text {
|
|
flex: 1 0 30%;
|
|
|
|
@media (min-width: $min_px_width_for_desktop_layout) {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.table-list__label__input {
|
|
flex: 1 1 60%;
|
|
}
|
|
}
|
|
|
|
.permission-choices {
|
|
display: flex;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.permission-choice__label {
|
|
input {
|
|
display: none;
|
|
|
|
&:checked + {
|
|
.permission-option--yes {
|
|
border-color: $success_color;
|
|
background-color: $success_light_color;
|
|
}
|
|
|
|
.permission-option--no {
|
|
border-color: $danger_color;
|
|
background-color: $danger_light_color;
|
|
}
|
|
}
|
|
|
|
&:hover + {
|
|
.permission-option--yes {
|
|
background-color: $success_light_color;
|
|
}
|
|
|
|
.permission-option--no {
|
|
background-color: $danger_light_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.permission-option {
|
|
text-align: center;
|
|
border: 1px solid transparent;
|
|
|
|
&:not(:last-child) {
|
|
margin-right: 12px;
|
|
}
|
|
}
|
|
|
|
.choice-text {
|
|
display: flex;
|
|
text-align: center;
|
|
padding: 4px 16px;
|
|
}
|