/** ------------------------------- -- Bulma ------------------------------- * */ @-moz-keyframes spinAround { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } @-webkit-keyframes spinAround { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } @-o-keyframes spinAround { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } @keyframes spinAround { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .column { display: block; flex-basis: 0; flex-grow: 1; flex-shrink: 1; padding: 0.75rem; } .columns.is-mobile > .column.is-narrow { flex: none; } .columns.is-mobile > .column.is-full { flex: none; width: 100%; } .columns.is-mobile > .column.is-three-quarters { flex: none; width: 75%; } .columns.is-mobile > .column.is-two-thirds { flex: none; width: 66.6666%; } .columns.is-mobile > .column.is-half { flex: none; width: 50%; } .columns.is-mobile > .column.is-one-third { flex: none; width: 33.3333%; } .columns.is-mobile > .column.is-one-quarter { flex: none; width: 25%; } .columns.is-mobile > .column.is-one-fifth { flex: none; width: 20%; } .columns.is-mobile > .column.is-two-fifths { flex: none; width: 40%; } .columns.is-mobile > .column.is-three-fifths { flex: none; width: 60%; } .columns.is-mobile > .column.is-four-fifths { flex: none; } .columns.is-mobile > .column.is-offset-three-quarters { margin-left: 75%; } .columns.is-mobile > .column.is-offset-two-thirds { margin-left: 66.6666%; } .columns.is-mobile > .column.is-offset-half { margin-left: 50%; } .columns.is-mobile > .column.is-offset-one-third { margin-left: 33.3333%; } .columns.is-mobile > .column.is-offset-one-quarter { margin-left: 25%; } .columns.is-mobile > .column.is-offset-one-fifth { margin-left: 20%; } .columns.is-mobile > .column.is-offset-two-fifths { margin-left: 40%; } .columns.is-mobile > .column.is-offset-three-fifths { margin-left: 60%; } .columns.is-mobile > .column.is-offset-four-fifths { margin-left: 80%; } .columns.is-mobile > .column.is-1 { flex: none; width: 8.333333333333332%; } .columns.is-mobile > .column.is-offset-1 { margin-left: 8.333333333333332%; } .columns.is-mobile > .column.is-2 { flex: none; width: 16.666666666666664%; } .columns.is-mobile > .column.is-offset-2 { margin-left: 16.666666666666664%; } .columns.is-mobile > .column.is-3 { flex: none; width: 25%; } .columns.is-mobile > .column.is-offset-3 { margin-left: 25%; } .columns.is-mobile > .column.is-4 { flex: none; width: 33.33333333333333%; } .columns.is-mobile > .column.is-offset-4 { margin-left: 33.33333333333333%; } .columns.is-mobile > .column.is-5 { flex: none; width: 41.66666666666667%; } .columns.is-mobile > .column.is-offset-5 { margin-left: 41.66666666666667%; } .columns.is-mobile > .column.is-6 { flex: none; width: 50%; } .columns.is-mobile > .column.is-offset-6 { margin-left: 50%; } .columns.is-mobile > .column.is-7 { flex: none; width: 58.333333333333336%; } .columns.is-mobile > .column.is-offset-7 { margin-left: 58.333333333333336%; } .columns.is-mobile > .column.is-8 { flex: none; width: 66.66666666666666%; } .columns.is-mobile > .column.is-offset-8 { margin-left: 66.66666666666666%; } .columns.is-mobile > .column.is-9 { flex: none; width: 75%; } .columns.is-mobile > .column.is-offset-9 { margin-left: 75%; } .columns.is-mobile > .column.is-10 { flex: none; width: 83.33333333333334%; } .columns.is-mobile > .column.is-offset-10 { margin-left: 83.33333333333334%; } .columns.is-mobile > .column.is-11 { flex: none; width: 91.66666666666666%; } .columns.is-mobile > .column.is-offset-11 { margin-left: 91.66666666666666%; } .columns.is-mobile > .column.is-12 { flex: none; width: 100%; } .columns.is-mobile > .column.is-offset-12 { margin-left: 100%; } @media screen and (max-width: 768px) { .column.is-narrow-mobile { flex: none; } .column.is-full-mobile { flex: none; width: 100%; } .column.is-three-quarters-mobile { flex: none; width: 75%; } .column.is-two-thirds-mobile { flex: none; width: 66.6666%; } .column.is-half-mobile { flex: none; width: 50%; } .column.is-one-third-mobile { flex: none; width: 33.3333%; } .column.is-one-quarter-mobile { flex: none; width: 25%; } .column.is-one-fifth-mobile { flex: none; width: 20%; } .column.is-two-fifths-mobile { flex: none; width: 40%; } .column.is-three-fifths-mobile { flex: none; width: 60%; } .column.is-four-fifths-mobile { flex: none; width: 80%; } .column.is-offset-three-quarters-mobile { margin-left: 75%; } .column.is-offset-two-thirds-mobile { margin-left: 66.6666%; } .column.is-offset-half-mobile { margin-left: 50%; } .column.is-offset-one-third-mobile { margin-left: 33.3333%; } .column.is-offset-one-quarter-mobile { margin-left: 25%; } .column.is-offset-one-fifth-mobile { margin-left: 20%; } .column.is-offset-two-fifths-mobile { margin-left: 40%; } .column.is-offset-three-fifths-mobile { margin-left: 60%; } .column.is-offset-four-fifths-mobile { margin-left: 80%; } .column.is-1-mobile { flex: none; width: 8.333333333333332%; } .column.is-offset-1-mobile { margin-left: 8.333333333333332%; } .column.is-2-mobile { flex: none; width: 16.666666666666664%; } .column.is-offset-2-mobile { margin-left: 16.666666666666664%; } .column.is-3-mobile { flex: none; width: 25%; } .column.is-offset-3-mobile { margin-left: 25%; } .column.is-4-mobile { flex: none; width: 33.33333333333333%; } .column.is-offset-4-mobile { margin-left: 33.33333333333333%; } .column.is-5-mobile { flex: none; width: 41.66666666666667%; } .column.is-offset-5-mobile { margin-left: 41.66666666666667%; } .column.is-6-mobile { flex: none; width: 50%; } .column.is-offset-6-mobile { margin-left: 50%; } .column.is-7-mobile { flex: none; width: 58.333333333333336%; } .column.is-offset-7-mobile { margin-left: 58.333333333333336%; } .column.is-8-mobile { flex: none; width: 66.66666666666666%; } .column.is-offset-8-mobile { margin-left: 66.66666666666666%; } .column.is-9-mobile { flex: none; width: 75%; } .column.is-offset-9-mobile { margin-left: 75%; } .column.is-10-mobile { flex: none; width: 83.33333333333334%; } .column.is-offset-10-mobile { margin-left: 83.33333333333334%; } .column.is-11-mobile { flex: none; width: 91.66666666666666%; } .column.is-offset-11-mobile { margin-left: 91.66666666666666%; } .column.is-12-mobile { flex: none; width: 100%; } .column.is-offset-12-mobile { margin-left: 100%; } } @media screen and (min-width: 769px), print { .column.is-narrow, .column.is-narrow-tablet { flex: none; } .column.is-full, .column.is-full-tablet { flex: none; width: 100%; } .column.is-three-quarters, .column.is-three-quarters-tablet { flex: none; width: 75%; } .column.is-two-thirds, .column.is-two-thirds-tablet { flex: none; width: 66.6666%; } .column.is-half, .column.is-half-tablet { flex: none; width: 50%; } .column.is-one-third, .column.is-one-third-tablet { flex: none; width: 33.3333%; } .column.is-one-quarter, .column.is-one-quarter-tablet { flex: none; width: 25%; } .column.is-one-fifth, .column.is-one-fifth-tablet { flex: none; width: 20%; } .column.is-two-fifths, .column.is-two-fifths-tablet { flex: none; width: 40%; } .column.is-three-fifths, .column.is-three-fifths-tablet { flex: none; width: 60%; } .column.is-four-fifths, .column.is-four-fifths-tablet { flex: none; width: 80%; } .column.is-offset-three-quarters, .column.is-offset-three-quarters-tablet { margin-left: 75%; } .column.is-offset-two-thirds, .column.is-offset-two-thirds-tablet { margin-left: 66.6666%; } .column.is-offset-half, .column.is-offset-half-tablet { margin-left: 50%; } .column.is-offset-one-third, .column.is-offset-one-third-tablet { margin-left: 33.3333%; } .column.is-offset-one-quarter, .column.is-offset-one-quarter-tablet { margin-left: 25%; } .column.is-offset-one-fifth, .column.is-offset-one-fifth-tablet { margin-left: 20%; } .column.is-offset-two-fifths, .column.is-offset-two-fifths-tablet { margin-left: 40%; } .column.is-offset-three-fifths, .column.is-offset-three-fifths-tablet { margin-left: 60%; } .column.is-offset-four-fifths, .column.is-offset-four-fifths-tablet { margin-left: 80%; } .column.is-1, .column.is-1-tablet { flex: none; width: 8.333333333333332%; } .column.is-offset-1, .column.is-offset-1-tablet { margin-left: 8.333333333333332%; } .column.is-2, .column.is-2-tablet { flex: none; width: 16.666666666666664%; } .column.is-offset-2, .column.is-offset-2-tablet { margin-left: 16.666666666666664%; } .column.is-3, .column.is-3-tablet { flex: none; width: 25%; } .column.is-offset-3, .column.is-offset-3-tablet { margin-left: 25%; } .column.is-4, .column.is-4-tablet { flex: none; width: 33.33333333333333%; } .column.is-offset-4, .column.is-offset-4-tablet { margin-left: 33.33333333333333%; } .column.is-5, .column.is-5-tablet { flex: none; width: 41.66666666666667%; } .column.is-offset-5, .column.is-offset-5-tablet { margin-left: 41.66666666666667%; } .column.is-6, .column.is-6-tablet { flex: none; width: 50%; } .column.is-offset-6, .column.is-offset-6-tablet { margin-left: 50%; } .column.is-7, .column.is-7-tablet { flex: none; width: 58.333333333333336%; } .column.is-offset-7, .column.is-offset-7-tablet { margin-left: 58.333333333333336%; } .column.is-8, .column.is-8-tablet { flex: none; width: 66.66666666666666%; } .column.is-offset-8, .column.is-offset-8-tablet { margin-left: 66.66666666666666%; } .column.is-9, .column.is-9-tablet { flex: none; width: 75%; } .column.is-offset-9, .column.is-offset-9-tablet { margin-left: 75%; } .column.is-10, .column.is-10-tablet { flex: none; width: 83.33333333333334%; } .column.is-offset-10, .column.is-offset-10-tablet { margin-left: 83.33333333333334%; } .column.is-11, .column.is-11-tablet { flex: none; width: 91.66666666666666%; } .column.is-offset-11, .column.is-offset-11-tablet { margin-left: 91.66666666666666%; } .column.is-12, .column.is-12-tablet { flex: none; width: 100%; } .column.is-offset-12, .column.is-offset-12-tablet { margin-left: 100%; } } @media screen and (max-width: 1023px) { .column.is-narrow-touch { flex: none; } .column.is-full-touch { flex: none; width: 100%; } .column.is-three-quarters-touch { flex: none; width: 75%; } .column.is-two-thirds-touch { flex: none; width: 66.6666%; } .column.is-half-touch { flex: none; width: 50%; } .column.is-one-third-touch { flex: none; width: 33.3333%; } .column.is-one-quarter-touch { flex: none; width: 25%; } .column.is-one-fifth-touch { flex: none; width: 20%; } .column.is-two-fifths-touch { flex: none; width: 40%; } .column.is-three-fifths-touch { flex: none; width: 60%; } .column.is-four-fifths-touch { flex: none; width: 80%; } .column.is-offset-three-quarters-touch { margin-left: 75%; } .column.is-offset-two-thirds-touch { margin-left: 66.6666%; } .column.is-offset-half-touch { margin-left: 50%; } .column.is-offset-one-third-touch { margin-left: 33.3333%; } .column.is-offset-one-quarter-touch { margin-left: 25%; } .column.is-offset-one-fifth-touch { margin-left: 20%; } .column.is-offset-two-fifths-touch { margin-left: 40%; } .column.is-offset-three-fifths-touch { margin-left: 60%; } .column.is-offset-four-fifths-touch { margin-left: 80%; } .column.is-1-touch { flex: none; width: 8.333333333333332%; } .column.is-offset-1-touch { margin-left: 8.333333333333332%; } .column.is-2-touch { flex: none; width: 16.666666666666664%; } .column.is-offset-2-touch { margin-left: 16.666666666666664%; } .column.is-3-touch { flex: none; width: 25%; } .column.is-offset-3-touch { margin-left: 25%; } .column.is-4-touch { flex: none; width: 33.33333333333333%; } .column.is-offset-4-touch { margin-left: 33.33333333333333%; } .column.is-5-touch { flex: none; width: 41.66666666666667%; } .column.is-offset-5-touch { margin-left: 41.66666666666667%; } .column.is-6-touch { flex: none; width: 50%; } .column.is-offset-6-touch { margin-left: 50%; } .column.is-7-touch { flex: none; width: 58.333333333333336%; } .column.is-offset-7-touch { margin-left: 58.333333333333336%; } .column.is-8-touch { flex: none; width: 66.66666666666666%; } .column.is-offset-8-touch { margin-left: 66.66666666666666%; } .column.is-9-touch { flex: none; width: 75%; } .column.is-offset-9-touch { margin-left: 75%; } .column.is-10-touch { flex: none; width: 83.33333333333334%; } .column.is-offset-10-touch { margin-left: 83.33333333333334%; } .column.is-11-touch { flex: none; width: 91.66666666666666%; } .column.is-offset-11-touch { margin-left: 91.66666666666666%; } .column.is-12-touch { flex: none; width: 100%; } .column.is-offset-12-touch { margin-left: 100%; } } @media screen and (min-width: 1024px) { .column.is-narrow-desktop { flex: none; } .column.is-full-desktop { flex: none; width: 100%; } .column.is-three-quarters-desktop { flex: none; width: 75%; } .column.is-two-thirds-desktop { flex: none; width: 66.6666%; } .column.is-half-desktop { flex: none; width: 50%; } .column.is-one-third-desktop { flex: none; width: 33.3333%; } .column.is-one-quarter-desktop { flex: none; width: 25%; } .column.is-one-fifth-desktop { flex: none; width: 20%; } .column.is-two-fifths-desktop { flex: none; width: 40%; } .column.is-three-fifths-desktop { flex: none; width: 60%; } .column.is-four-fifths-desktop { flex: none; width: 80%; } .column.is-offset-three-quarters-desktop { margin-left: 75%; } .column.is-offset-two-thirds-desktop { margin-left: 66.6666%; } .column.is-offset-half-desktop { margin-left: 50%; } .column.is-offset-one-third-desktop { margin-left: 33.3333%; } .column.is-offset-one-quarter-desktop { margin-left: 25%; } .column.is-offset-one-fifth-desktop { margin-left: 20%; } .column.is-offset-two-fifths-desktop { margin-left: 40%; } .column.is-offset-three-fifths-desktop { margin-left: 60%; } .column.is-offset-four-fifths-desktop { margin-left: 80%; } .column.is-1-desktop { flex: none; width: 8.333333333333332%; } .column.is-offset-1-desktop { margin-left: 8.333333333333332%; } .column.is-2-desktop { flex: none; width: 16.666666666666664%; } .column.is-offset-2-desktop { margin-left: 16.666666666666664%; } .column.is-3-desktop { flex: none; width: 25%; } .column.is-offset-3-desktop { margin-left: 25%; } .column.is-4-desktop { flex: none; width: 33.33333333333333%; } .column.is-offset-4-desktop { margin-left: 33.33333333333333%; } .column.is-5-desktop { flex: none; width: 41.66666666666667%; } .column.is-offset-5-desktop { margin-left: 41.66666666666667%; } .column.is-6-desktop { flex: none; width: 50%; } .column.is-offset-6-desktop { margin-left: 50%; } .column.is-7-desktop { flex: none; width: 58.333333333333336%; } .column.is-offset-7-desktop { margin-left: 58.333333333333336%; } .column.is-8-desktop { flex: none; width: 66.66666666666666%; } .column.is-offset-8-desktop { margin-left: 66.66666666666666%; } .column.is-9-desktop { flex: none; width: 75%; } .column.is-offset-9-desktop { margin-left: 75%; } .column.is-10-desktop { flex: none; width: 83.33333333333334%; } .column.is-offset-10-desktop { margin-left: 83.33333333333334%; } .column.is-11-desktop { flex: none; width: 91.66666666666666%; } .column.is-offset-11-desktop { margin-left: 91.66666666666666%; } .column.is-12-desktop { flex: none; width: 100%; } .column.is-offset-12-desktop { margin-left: 100%; } } @media screen and (min-width: 1216px) { .column.is-narrow-widescreen { flex: none; } .column.is-full-widescreen { flex: none; width: 100%; } .column.is-three-quarters-widescreen { flex: none; width: 75%; } .column.is-two-thirds-widescreen { flex: none; width: 66.6666%; } .column.is-half-widescreen { flex: none; width: 50%; } .column.is-one-third-widescreen { flex: none; width: 33.3333%; } .column.is-one-quarter-widescreen { flex: none; width: 25%; } .column.is-one-fifth-widescreen { flex: none; width: 20%; } .column.is-two-fifths-widescreen { flex: none; width: 40%; } .column.is-three-fifths-widescreen { flex: none; width: 60%; } .column.is-four-fifths-widescreen { flex: none; width: 80%; } .column.is-offset-three-quarters-widescreen { margin-left: 75%; } .column.is-offset-two-thirds-widescreen { margin-left: 66.6666%; } .column.is-offset-half-widescreen { margin-left: 50%; } .column.is-offset-one-third-widescreen { margin-left: 33.3333%; } .column.is-offset-one-quarter-widescreen { margin-left: 25%; } .column.is-offset-one-fifth-widescreen { margin-left: 20%; } .column.is-offset-two-fifths-widescreen { margin-left: 40%; } .column.is-offset-three-fifths-widescreen { margin-left: 60%; } .column.is-offset-four-fifths-widescreen { margin-left: 80%; } .column.is-1-widescreen { flex: none; width: 8.333333333333332%; } .column.is-offset-1-widescreen { margin-left: 8.333333333333332%; } .column.is-2-widescreen { flex: none; width: 16.666666666666664%; } .column.is-offset-2-widescreen { margin-left: 16.666666666666664%; } .column.is-3-widescreen { flex: none; width: 25%; } .column.is-offset-3-widescreen { margin-left: 25%; } .column.is-4-widescreen { flex: none; width: 33.33333333333333%; } .column.is-offset-4-widescreen { margin-left: 33.33333333333333%; } .column.is-5-widescreen { flex: none; width: 41.66666666666667%; } .column.is-offset-5-widescreen { margin-left: 41.66666666666667%; } .column.is-6-widescreen { flex: none; width: 50%; } .column.is-offset-6-widescreen { margin-left: 50%; } .column.is-7-widescreen { flex: none; width: 58.333333333333336%; } .column.is-offset-7-widescreen { margin-left: 58.333333333333336%; } .column.is-8-widescreen { flex: none; width: 66.66666666666666%; } .column.is-offset-8-widescreen { margin-left: 66.66666666666666%; } .column.is-9-widescreen { flex: none; width: 75%; } .column.is-offset-9-widescreen { margin-left: 75%; } .column.is-10-widescreen { flex: none; width: 83.33333333333334%; } .column.is-offset-10-widescreen { margin-left: 83.33333333333334%; } .column.is-11-widescreen { flex: none; width: 91.66666666666666%; } .column.is-offset-11-widescreen { margin-left: 91.66666666666666%; } .column.is-12-widescreen { flex: none; width: 100%; } .column.is-offset-12-widescreen { margin-left: 100%; } } @media screen and (min-width: 1408px) { .column.is-narrow-fullhd { flex: none; } .column.is-full-fullhd { flex: none; width: 100%; } .column.is-three-quarters-fullhd { flex: none; width: 75%; } .column.is-two-thirds-fullhd { flex: none; width: 66.6666%; } .column.is-half-fullhd { flex: none; width: 50%; } .column.is-one-third-fullhd { flex: none; width: 33.3333%; } .column.is-one-quarter-fullhd { flex: none; width: 25%; } .column.is-one-fifth-fullhd { flex: none; width: 20%; } .column.is-two-fifths-fullhd { flex: none; width: 40%; } .column.is-three-fifths-fullhd { flex: none; width: 60%; } .column.is-four-fifths-fullhd { flex: none; width: 80%; } .column.is-offset-three-quarters-fullhd { margin-left: 75%; } .column.is-offset-two-thirds-fullhd { margin-left: 66.6666%; } .column.is-offset-half-fullhd { margin-left: 50%; } .column.is-offset-one-third-fullhd { margin-left: 33.3333%; } .column.is-offset-one-quarter-fullhd { margin-left: 25%; } .column.is-offset-one-fifth-fullhd { margin-left: 20%; } .column.is-offset-two-fifths-fullhd { margin-left: 40%; } .column.is-offset-three-fifths-fullhd { margin-left: 60%; } .column.is-offset-four-fifths-fullhd { margin-left: 80%; } .column.is-1-fullhd { flex: none; width: 8.333333333333332%; } .column.is-offset-1-fullhd { margin-left: 8.333333333333332%; } .column.is-2-fullhd { flex: none; width: 16.666666666666664%; } .column.is-offset-2-fullhd { margin-left: 16.666666666666664%; } .column.is-3-fullhd { flex: none; width: 25%; } .column.is-offset-3-fullhd { margin-left: 25%; } .column.is-4-fullhd { flex: none; width: 33.33333333333333%; } .column.is-offset-4-fullhd { margin-left: 33.33333333333333%; } .column.is-5-fullhd { flex: none; width: 41.66666666666667%; } .column.is-offset-5-fullhd { margin-left: 41.66666666666667%; } .column.is-6-fullhd { flex: none; width: 50%; } .column.is-offset-6-fullhd { margin-left: 50%; } .column.is-7-fullhd { flex: none; width: 58.333333333333336%; } .column.is-offset-7-fullhd { margin-left: 58.333333333333336%; } .column.is-8-fullhd { flex: none; width: 66.66666666666666%; } .column.is-offset-8-fullhd { margin-left: 66.66666666666666%; } .column.is-9-fullhd { flex: none; width: 75%; } .column.is-offset-9-fullhd { margin-left: 75%; } .column.is-10-fullhd { flex: none; width: 83.33333333333334%; } .column.is-offset-10-fullhd { margin-left: 83.33333333333334%; } .column.is-11-fullhd { flex: none; width: 91.66666666666666%; } .column.is-offset-11-fullhd { margin-left: 91.66666666666666%; } .column.is-12-fullhd { flex: none; width: 100%; } .column.is-offset-12-fullhd { margin-left: 100%; } } .columns { margin-left: -0.75rem; margin-right: -0.75rem; margin-top: -0.75rem; } .columns:last-child { margin-bottom: -0.75rem; } .columns:not(:last-child) { margin-bottom: calc(1.5rem - 0.75rem); } .columns.is-centered { justify-content: center; } .columns.is-gapless { margin-left: 0; margin-right: 0; margin-top: 0; } .columns.is-gapless > .column { margin: 0; padding: 0 !important; } .columns.is-gapless:not(:last-child) { margin-bottom: 1.5rem; } .columns.is-gapless:last-child { margin-bottom: 0; } .columns.is-mobile { display: flex; } .columns.is-multiline { flex-wrap: wrap; } .columns.is-vcentered { align-items: center; } @media screen and (min-width: 769px), print { .columns:not(.is-desktop) { display: flex; } } @media screen and (min-width: 1024px) { .columns.is-desktop { display: flex; } } .columns.is-variable { --columnGap: 0.75rem; margin-left: calc(-1 * var(--columnGap)); margin-right: calc(-1 * var(--columnGap)); } .columns.is-variable .column { padding-left: var(--columnGap); padding-right: var(--columnGap); } .columns.is-variable.is-0 { --columnGap: 0rem; } .columns.is-variable.is-1 { --columnGap: 0.25rem; } .columns.is-variable.is-2 { --columnGap: 0.5rem; } .columns.is-variable.is-3 { --columnGap: 0.75rem; } .columns.is-variable.is-4 { --columnGap: 1rem; } .columns.is-variable.is-5 { --columnGap: 1.25rem; } .columns.is-variable.is-6 { --columnGap: 1.5rem; } .columns.is-variable.is-7 { --columnGap: 1.75rem; } .columns.is-variable.is-8 { --columnGap: 2rem; } /** ------------------------------- -- Colors ------------------------------- * */ /** ------------------------------- -- Mixins ------------------------------- * */ /** ------------------------------- -- Normalize ------------------------------- * */ html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, footer, header, nav, section { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } figcaption, figure, main { display: block; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } a:active, a:hover { outline-width: 0; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: inherit; font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } dfn { font-style: italic; } mark { background-color: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 60%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.55em; background: #c1cdd7; color: #374857; border-radius: 2px; padding: 0 2px 0 2px; margin: 0 2px 0 0; } audio, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } img { border-style: none; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { display: inline-block; vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details, menu { display: block; } summary { display: list-item; } canvas { display: inline-block; } template { display: none; } [hidden] { display: none; } /** ------------------------------- -- Typography ------------------------------- * */ @font-face { font-weight: 300; font-style: normal; font-family: 'Apercu'; src: url("fonts/Apercu-Light.eot"), url("fonts/Apercu-Light.eot?#iefix") format('embedded-opentype'), url("fonts/Apercu-Light.woff2") format('woff2'), url("fonts/Apercu-Light.woff") format('woff'), url("fonts/Apercu-Light.ttf") format('truetype'), url("fonts/Apercu-Light.svg?#Apercu") format('svg'); } @font-face { font-weight: 300; font-style: italic; font-family: 'Apercu'; src: url("fonts/Apercu-LightItalic.eot"), url("fonts/Apercu-LightItalic.eot?#iefix") format('embedded-opentype'), url("fonts/Apercu-LightItalic.woff2") format('woff2'), url("fonts/Apercu-LightItalic.woff") format('woff'), url("fonts/Apercu-LightItalic.ttf") format('truetype'), url("fonts/Apercu-LightItalic.svg?#Apercu") format('svg'); } @font-face { font-weight: 400; font-style: normal; font-family: 'Apercu'; src: url("fonts/Apercu.eot"), url("fonts/Apercu.eot?#iefix") format('embedded-opentype'), url("fonts/Apercu.woff2") format('woff2'), url("fonts/Apercu.woff") format('woff'), url("fonts/Apercu.ttf") format('truetype'), url("fonts/Apercu.svg?#Apercu") format('svg'); } @font-face { font-weight: 400; font-style: italic; font-family: 'Apercu'; src: url("fonts/Apercu-Italic.eot"), url("fonts/Apercu-Italic.eot?#iefix") format('embedded-opentype'), url("fonts/Apercu-Italic.woff2") format('woff2'), url("fonts/Apercu-Italic.woff") format('woff'), url("fonts/Apercu-Italic.ttf") format('truetype'), url("fonts/Apercu-Italic.svg?#Apercu") format('svg'); } @font-face { font-weight: 500; font-style: normal; font-family: 'Apercu'; src: url("fonts/Apercu-Medium.eot"), url("fonts/Apercu-Medium.eot?#iefix") format('embedded-opentype'), url("fonts/Apercu-Medium.woff2") format('woff2'), url("fonts/Apercu-Medium.woff") format('woff'), url("fonts/Apercu-Medium.ttf") format('truetype'), url("fonts/Apercu-Medium.svg?#Apercu") format('svg'); } @font-face { font-weight: 500; font-style: italic; font-family: 'Apercu'; src: url("fonts/Apercu-MediumItalic.eot"), url("fonts/Apercu-MediumItalic.eot?#iefix") format('embedded-opentype'), url("fonts/Apercu-MediumItalic.woff2") format('woff2'), url("fonts/Apercu-MediumItalic.woff") format('woff'), url("fonts/Apercu-MediumItalic.ttf") format('truetype'), url("fonts/Apercu-MediumItalic.svg?#Apercu") format('svg'); } @font-face { font-weight: 600; font-style: normal; font-weight: bold; font-family: 'Apercu'; src: url("fonts/Apercu-Bold.eot"), url("fonts/Apercu-Bold.eot?#iefix") format('embedded-opentype'), url("fonts/Apercu-Bold.woff2") format('woff2'), url("fonts/Apercu-Bold.woff") format('woff'), url("fonts/Apercu-Bold.ttf") format('truetype'), url("fonts/Apercu-Bold.svg?#Apercu") format('svg'); } @font-face { font-weight: 600; font-style: italic; font-weight: bold; font-family: 'Apercu'; src: url("fonts/Apercu-BoldItalic.eot"), url("fonts/Apercu-BoldItalic.eot?#iefix") format('embedded-opentype'), url("fonts/Apercu-BoldItalic.woff2") format('woff2'), url("fonts/Apercu-BoldItalic.woff") format('woff'), url("fonts/Apercu-BoldItalic.ttf") format('truetype'), url("fonts/Apercu-Bold.svg?#Apercu") format('svg'); } @font-face { font-weight: 400; font-style: normal; font-family: 'Apercu-Mono'; src: url("fonts/Apercu-Mono.eot"), url("fonts/Apercu-Mono.eot?#iefix") format('embedded-opentype'), url("fonts/Apercu-Mono.woff2") format('woff2'), url("fonts/Apercu-Mono.woff") format('woff'), url("fonts/Apercu-Mono.ttf") format('truetype'), url("fonts/Apercu-Mono.svg?#Apercu") format('svg'); } h1, h2, h3 { color: #f2f1ef; } h1 { font-size: 2em; font-weight: 400; } h2 { font-size: 1.75em; font-weight: 400; } h3 { font-size: 1.5em; font-weight: 300; } /** ------------------------------- -- Main Structures ------------------------------- * */ html, body { background-color: #161d23; font: 400 1em Helvetica, Arial, sans-serif; height: 100%; } a { font: 300 1em Helvetica, Arial, sans-serif; color: #b2cce5; text-decoration: underline; -moz-transition: all 0.1s linear; -webkit-transition: all 0.1s linear; -o-transition: all 0.1s linear; transition: all 0.1s linear; } a:hover { color: #bad1e8; } svg.icons { width: 25px; fill: #b2cce5; } #notifications { perspective: 1000px; position: fixed; z-index: 2000; height: 55px; width: 100%; display: block; align-items: center; justify-content: center; padding: 0; margin-top: -55px; } #notifications #notifyMessage { margin: 0 auto; transition: all 0.6s cubic-bezier(0.83, 0.05, 0.28, 1); height: 50px; width: 500px; display: flex; align-items: center; justify-content: center; opacity: 1; transform-style: preserve-3d; transform: rotateX(-120deg); transform-origin: 50% 0; } #notifications #notifyMessage #notify-good, #notifications #notifyMessage #notify-lame, #notifications #notifyMessage #notify-working { display: none; } #notifications #notifyMessage .notify-icon { background: #32302f; padding: 8px 5px 5px 5px; border-radius: 5px 0 0 5px; height: 30px; width: 30px; text-align: center; border: 2px solid #f2f1ef; } #notifications #notifyMessage p { color: #f2f1ef; background: #161d23; width: 400px; height: 28px; padding: 15px 0 0 5px; border-radius: 0 5px 5px 0; border: 2px solid #f2f1ef; text-align: center; } #notifications #notifyMessage .icons { fill: #f2f1ef; } .notify-close { transform-style: preserve-3d; transform: rotateX(-120deg); } .notify-open { transform-style: preserve-3d; transform: rotateX(0deg); } .blog-container { width: 100%; } .main-container { margin: 0 auto; z-index: 10; position: relative; } .main-container section header { width: 100%; max-width: 900px; margin: 0 auto; } .main-container section header #wrapper { padding: 0.75rem; } .main-container section header #wrapper #left, .main-container section header #wrapper #right { width: 50%; display: inline-block; vertical-align: top; } .main-container section header #wrapper #left #the-logo, .main-container section header #wrapper #right #the-logo { width: 40px; } .main-container section header #wrapper #right { text-align: right; color: #f2f1ef; } .main-container section header #wrapper #right a { text-decoration-color: #fc6399; font-weight: 400; } .main-container section header #wrapper #right label#the-title { font-size: 1.2em; font-weight: 400; color: #f5ab35; text-decoration: none; display: block; line-height: 0.8; } .main-container section header #wrapper #right #dash-menu { text-align: right; } ::-moz-selection { background-color: #fc6399; color: #f2f1ef; } ::selection { background-color: #fc6399; color: #f2f1ef; } ::-o-selection { background-color: #fc6399; color: #f2f1ef; } ::-ms-selection { background-color: #fc6399; color: #f2f1ef; } ::-webkit-selection { background-color: #fc6399; color: #f2f1ef; } @media only screen and (max-width: 800px) { .main-container section header #wrapper #left, .main-container section header #wrapper #right { display: inline-block; } } @media only screen and (max-width: 480px) { .main-container section header #wrapper #left { width: 30%; } .main-container section header #wrapper #right { width: 70%; } } /** ------------------------------- -- Index ------------------------------- * */ #dash-index-content { width: 100%; height: 100%; margin: 0 auto; } #dash-index-content #dash-index { width: 100%; height: 100%; z-index: 10; position: relative; } #dash-index-content #dash-index #dash-index-wrapper { width: 100%; height: 100%; margin: 0 auto; } #dash-index-content #dash-index #dash-index-wrapper .dash-init, #dash-index-content #dash-index #dash-index-wrapper .dash-restore { width: 100%; max-width: 900px; margin: 0 auto; color: #b2cce5; } #dash-index-content #dash-index #dash-index-wrapper .dash-init label, #dash-index-content #dash-index #dash-index-wrapper .dash-restore label { color: #374857; } #dash-index-content #dash-index #dash-index-wrapper .dash-init form, #dash-index-content #dash-index #dash-index-wrapper .dash-restore form { background: #f2f1ef; padding: 15px; } #dash-index-content #dash-index #dash-index-wrapper .dash-init form h1, #dash-index-content #dash-index #dash-index-wrapper .dash-restore form h1 { color: #374857; } #dash-index-content #dash-index #dash-index-wrapper .dash-init form p, #dash-index-content #dash-index #dash-index-wrapper .dash-restore form p { color: #161d23; border-top: 1px solid #374857; border-bottom: 1px solid #374857; padding: 10px 0 10px 0; } #dash-index-content #dash-index #dash-index-wrapper .dash-init form input.large[type=email], #dash-index-content #dash-index #dash-index-wrapper .dash-restore form input.large[type=email], #dash-index-content #dash-index #dash-index-wrapper .dash-init form input[type=password], #dash-index-content #dash-index #dash-index-wrapper .dash-restore form input[type=password], #dash-index-content #dash-index #dash-index-wrapper .dash-init form input[type=text], #dash-index-content #dash-index #dash-index-wrapper .dash-restore form input[type=text] { margin-bottom: 15px; margin-top: 5px; } #dash-index-content #dash-index #dash-index-wrapper .dash-init form button, #dash-index-content #dash-index #dash-index-wrapper .dash-restore form button { height: 30px; width: 120px; margin: 0 auto; display: block; } #dash-index-content #dash-index #dash-index-wrapper .dash-restore { display: none; visibility: hidden; } #dash-index-content #dash-index #dash-index-wrapper #dash-login { width: 100%; max-width: 900px; margin: 0 auto; } #dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-form { width: 300px; padding: 0.75em; background: #374857; border-radius: 3px; } #dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-form input { width: 290px; margin: 0 0 10px 0; height: 30px; } #dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-form button { width: 300px; } #dash-index-content #dash-index #dash-index-wrapper #dash-menu { padding: 10px; width: 90%; max-width: 900px; margin: 50px auto; } #dash-index-content #dash-index #dash-index-wrapper #dash-menu a { display: inline-block; vertical-align: top; background: #161d23; width: 30%; padding: 5px; border-radius: 3px; color: #f2f1ef; margin: 0 10px 10px 0; } #dash-index-content #dash-index #dash-index-wrapper #dash-menu a:hover { background: #1c242c; } #dash-index-content #dash-index #dash-index-wrapper #dash-menu a svg { display: inline-block; vertical-align: top; fill: #f2f1ef; } #dash-index-content #dash-index #dash-index-wrapper #dash-menu a label { display: inline-block; margin-top: 5px; width: 85%; text-align: center; cursor: pointer; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent { width: 100%; max-width: 900px; height: 100%; padding: 5px 0 0 0; margin: 0 auto; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list { padding: 0.75em; position: relative; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header { height: 50px; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header h3 { vertical-align: top; display: inline-block; width: 50%; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-menu { width: 50%; text-align: right; vertical-align: top; display: inline-block; margin: 24px 0 24px 0; right: 10px; color: #f2f1ef; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-menu a { text-decoration-color: #fc6399; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link { font-size: 1.5em; font-weight: 300; display: inline-block; border-radius: 3px; vertical-align: top; text-decoration: none; position: relative; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link label { font-size: 1.4em; font-weight: 700; color: #f2f1ef; padding: 5px; vertical-align: top; display: inline-block; word-wrap: break-word; width: 100%; text-align: center; text-shadow: 2px 2px 0 #32302f; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link span { vertical-align: top; margin: 0 auto; width: 300px; display: block; font-family: monospace, courier; font-size: 0.5em; padding: 7px; color: #f2f1ef; text-align: center; border-radius: 0 0 3px 3px; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div { width: 100%; position: absolute; bottom: 0; border-radius: 0 0 3px 3px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div #options { display: block; vertical-align: top; width: 300px; position: relative; text-align: center; margin: 0 auto; background: none; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div #options .item-options { border-radius: 3px; margin: 5px; display: inline-block; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div #options .item-options[data-active='false'] { width: 65px; background: #161d23; color: #f2f1ef; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div #options .item-options[data-active='true'] { width: 70px; background: #fad59a; color: #161d23; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(3) { width: 100%; margin-bottom: 20px; height: 500px; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4) { width: 49%; height: 275px; margin: 0 15px 15px 0; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5) { width: 49%; height: 550px; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(6) { width: 49%; height: 550px; margin: -260px 15px 0 0; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(7) { width: 49%; height: 275px; margin: 15px 0 0 0; } @media only screen and (max-width: 768px) { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4), #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(6) { width: 48.9%; } } @media only screen and (max-width: 640px) { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4), #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(6) { width: 48.5%; } } @media only screen and (max-width: 480px) { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header h3 { width: 40%; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-menu { width: 60%; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(3), #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4), #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5), #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(6), #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(7) { width: 100%; margin: 15px 0 0 0; height: 400px; } } /** ------------------------------- -- Settings ------------------------------- * */ #settings-actions { position: fixed; width: 40%; margin-top: -85px; left: 50%; margin-left: -20%; } #settings-actions #buttons { width: 155px; margin: 0 auto; } #settings-actions #buttons button { margin: 5px; } #settings-actions #buttons button svg { fill: #f2f1ef; } #settings-actions #buttons button[data-render='false'] { background: #161d23; } #settings-actions #buttons button[data-render='false'] svg { fill: #f2f1ef; } #settings-actions #buttons button[data-render='true'] { background: #fad59a; } #settings-actions #buttons button[data-render='true'] svg { fill: #161d23; } #site-background { margin: 0 0 10px 0; } #site-background img { width: 100%; border-radius: 0; overflow: hidden; cursor: pointer; } #site-background label { position: absolute; color: #f2f1ef; margin: 5px; background: #161d23; padding: 5px; border-radius: 3px; } #site-background input { visibility: hidden; display: none; } #settings-index { width: 94%; max-width: 900px; margin: 0 auto; } #settings-index #settings-index-wrapper { padding: 0.75rem; } #settings-index #settings-index-wrapper button { margin-top: 5px; width: 100%; height: 45px; } #settings-index #settings-index-wrapper #member-settings, #settings-index #settings-index-wrapper #site-settings, #settings-index #settings-index-wrapper #option-settings, #settings-index #settings-index-wrapper #member-utils { background: #374857; padding: 5px; border-radius: 5px 0 5px 0; width: 100%; margin: 20px auto; } #settings-index #settings-index-wrapper #member-settings label, #settings-index #settings-index-wrapper #site-settings label, #settings-index #settings-index-wrapper #option-settings label, #settings-index #settings-index-wrapper #member-utils label { font-family: monospace, courier; color: #f2f1ef; } #settings-index #settings-index-wrapper #member-settings span, #settings-index #settings-index-wrapper #site-settings span, #settings-index #settings-index-wrapper #option-settings span, #settings-index #settings-index-wrapper #member-utils span { color: #b2cce5; } #settings-index #settings-index-wrapper #member-settings input, #settings-index #settings-index-wrapper #site-settings input, #settings-index #settings-index-wrapper #option-settings input, #settings-index #settings-index-wrapper #member-utils input { width: 95%; margin: 0 5px 10px 0; height: 30px; padding: 10px; } #settings-index #settings-index-wrapper #member-settings input#backup-upload, #settings-index #settings-index-wrapper #site-settings input#backup-upload, #settings-index #settings-index-wrapper #option-settings input#backup-upload, #settings-index #settings-index-wrapper #member-utils input#backup-upload { visibility: hidden; display: none; } #settings-index #settings-index-wrapper #member-settings .backup-meta, #settings-index #settings-index-wrapper #site-settings .backup-meta, #settings-index #settings-index-wrapper #option-settings .backup-meta, #settings-index #settings-index-wrapper #member-utils .backup-meta { background: #161d23; color: #f2f1ef; padding: 8px; border-radius: 3px; margin: 5px 0 0 0; } #settings-index #settings-index-wrapper #member-settings #member-avatar-drop, #settings-index #settings-index-wrapper #site-settings #member-avatar-drop, #settings-index #settings-index-wrapper #option-settings #member-avatar-drop, #settings-index #settings-index-wrapper #member-utils #member-avatar-drop { display: inline-block; margin: 0 0 10px 0; } #settings-index #settings-index-wrapper #member-settings #member-avatar-drop img, #settings-index #settings-index-wrapper #site-settings #member-avatar-drop img, #settings-index #settings-index-wrapper #option-settings #member-avatar-drop img, #settings-index #settings-index-wrapper #member-utils #member-avatar-drop img { width: 100%; border-radius: 5px; overflow: hidden; cursor: pointer; display: block; margin-bottom: 2px; } #settings-index #settings-index-wrapper #member-settings #member-avatar-drop input, #settings-index #settings-index-wrapper #site-settings #member-avatar-drop input, #settings-index #settings-index-wrapper #option-settings #member-avatar-drop input, #settings-index #settings-index-wrapper #member-utils #member-avatar-drop input { visibility: hidden; display: none; } #settings-index #settings-index-wrapper #member-settings #member-avatar-drop #privacy-toggle, #settings-index #settings-index-wrapper #site-settings #member-avatar-drop #privacy-toggle, #settings-index #settings-index-wrapper #option-settings #member-avatar-drop #privacy-toggle, #settings-index #settings-index-wrapper #member-utils #member-avatar-drop #privacy-toggle { width: 50%; } #settings-index #settings-index-wrapper #member-settings #member-avatar-drop #render-toggle, #settings-index #settings-index-wrapper #site-settings #member-avatar-drop #render-toggle, #settings-index #settings-index-wrapper #option-settings #member-avatar-drop #render-toggle, #settings-index #settings-index-wrapper #member-utils #member-avatar-drop #render-toggle { width: 50%; } #settings-index #settings-index-wrapper #member-settings #member-info, #settings-index #settings-index-wrapper #site-settings #member-info, #settings-index #settings-index-wrapper #option-settings #member-info, #settings-index #settings-index-wrapper #member-utils #member-info { vertical-align: top; display: inline-block; width: 100%; } #settings-index #settings-index-wrapper #member-settings #member-info input, #settings-index #settings-index-wrapper #site-settings #member-info input, #settings-index #settings-index-wrapper #option-settings #member-info input, #settings-index #settings-index-wrapper #member-utils #member-info input { width: 95%; margin: 0 5px 10px 0; } #settings-index #settings-index-wrapper #member-settings textarea, #settings-index #settings-index-wrapper #site-settings textarea, #settings-index #settings-index-wrapper #option-settings textarea, #settings-index #settings-index-wrapper #member-utils textarea { background: #161d23; width: 95%; height: 155px; color: #b2cce5; padding: 10px; } #settings-index #settings-index-wrapper #option-settings #theme-settings a { width: 95%; margin: 0 5px 5px 0; height: 25px; padding: 10px; display: inline-block; } #settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled='false'] { background: #161d23; color: #b2cce5; border-radius: 3px; } #settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled='true'] { background: #b2cce5; color: #374857; border-radius: 3px; } #settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled='true'] svg { fill: #374857; display: inline-block; float: right; } #settings-index #settings-index-wrapper #option-settings #mail-settings { min-height: 240px; } #settings-index #settings-index-wrapper #option-settings #mail-settings a.mail-option { float: right; font-family: monospace, courier; font-size: 0.9em; border-radius: 3px; text-decoration: none; margin: 0 0 0 5px; } #settings-index #settings-index-wrapper #option-settings #mail-settings a.mail-option[data-enabled='true'] { color: #fc6399; } #settings-index #settings-index-wrapper #option-settings #mail-settings a.mail-option[data-enabled='false'] { color: #f2f1ef; } #settings-index #settings-index-wrapper #option-settings #mail-settings input { margin: 0 5px 5px 0; vertical-align: top; } #settings-index #settings-index-wrapper #option-settings #mail-settings div[data-enabled='false'] { display: none; visibility: hidden; } /** ------------------------------- -- Error ------------------------------- * */ #error-index { width: 100%; max-width: 900px; margin: 0 auto; padding: 10px; height: 100%; z-index: 10; position: relative; } #error-index label#title { font-size: 100px; color: #fc6399; font-weight: 500; } #error-index label#message { font-size: 50px; color: #f5ab35; font-weight: 500; } #error-index label#error { font-size: 25px; color: #f64747; font-weight: 500; } /** ------------------------------- -- Navigation ------------------------------- * */ #nav-index { width: 100%; max-width: 900px; margin: 0 auto; } #nav-index #nav-index-wrapper { padding: 0.75rem; } #nav-index #nav-index-wrapper #nav-pages .nav-item { display: block; width: 98%; background: #374857; border-radius: 3px; color: #f2f1ef; height: 30px; padding: 10px; margin: 0 0 10px 0; font-size: 1.5em; cursor: move; } #nav-index #nav-index-wrapper #nav-pages label { display: inline-block; vertical-align: middle; padding: 0; margin: -15px 0 0 10px; cursor: move; } #nav-index #nav-index-wrapper #nav-pages #nav-btns { float: right; } #nav-index #nav-index-wrapper #nav-pages #nav-btns button { font-size: 0.8em; margin: 0 0 0 10px; } @media only screen and (max-width: 375px) { #nav-index #nav-index-wrapper #nav-pages .nav-item { width: 94.5%; font-size: 1em; } #nav-index #nav-index-wrapper #nav-pages .nav-item label { width: 47%; vertical-align: top; margin-top: 0px; line-height: 1em; } } @media only screen and (max-width: 320px) { #nav-index #nav-index-wrapper #nav-pages .nav-item { width: 94.5%; font-size: 1em; } #nav-index #nav-index-wrapper #nav-pages .nav-item label { width: 37%; vertical-align: top; margin-top: 0px; line-height: 1em; } } /** ------------------------------- -- Forms ------------------------------- * */ form { display: inline-block; } input[type=email], input[type=password], input[type=text] { border: 0; border-radius: 3px; padding: 5px; font: 1em monospace, courier; display: inline-block; background-color: #161d23; color: #b2cce5; } textarea { border: 0; border-radius: 3px; color: $type02; font: 1em monospace, courier; } button, input[type=submit] { background: #fc6399; color: #161d23; font: 1em monospace, courier; border-radius: 3px; position: relative; cursor: pointer; border: 0; } input.large { font-size: 1.4em; padding: 10px; } select { font: 1em monospace, courier; border: 1px solid #b2cce5; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #374857; } ::-webkit-input-placeholder { font: 1em monospace, courier; color: #b2cce5; } :-moz-placeholder { /* Firefox 18- */ font: 1em monospace, courier; color: #b2cce5; } ::-moz-placeholder { /* Firefox 19+ */ font: 1em monospace, courier; color: #b2cce5; } :-ms-input-placeholder { font: 1em monospace, courier; color: #b2cce5; } /** ------------------------------- -- Blog ------------------------------- * */ #post-index { width: 100%; max-width: 900px; margin: 0 auto; } #post-index #post-index-wrapper { padding: 0.75rem; overflow: hidden; } #post-index #post-index-wrapper #post-index-menu { color: #f2f1ef; } #post-index #post-index-wrapper #post-index-menu a { text-decoration-color: #fc6399; } #post-index #post-index-wrapper #post-index-menu a.add-new-post { display: inline-block; background: #fc6399; border-radius: 3px; padding: 3px; color: #f2f1ef; text-align: center; margin-bottom: 10px; float: right; } #post-index #post-index-wrapper #post-index-menu .current-filter { color: #fc6399; text-decoration-color: #b2cce5; } #post-index #post-index-wrapper #posts-list { margin: 20px 0 0 0; } #post-index #post-index-wrapper #posts-list a.page-link { background: #f2f1ef; display: inline-block; vertical-align: top; width: 100%; text-decoration: none; margin: 0 0 20px 0; border-radius: 3px; overflow: hidden; color: #161d23; } #post-index #post-index-wrapper #posts-list a.page-link label { font-size: 2em; font-weight: 500; padding: 10px; display: inline-block; vertical-align: top; width: 100%; } #post-index #post-index-wrapper #posts-list a.page-link span { display: inline-block; vertical-align: top; font-size: 0.8em; font-family: monospace, courier; width: 50%; padding: 0 0 0 10px; } #post-index #post-index-wrapper #posts-list a.page-link div.page-bg { width: 100%; height: 350px; background-color: #fc6399; position: relative; } #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta { width: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); border-radius: 3px; margin: auto; bottom: 0; position: absolute; padding: 0 0 20px 0; } #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta span { color: #f2f1ef; text-align: center; margin: 0 auto; display: block; } #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta label { font-size: 1.4em; font-weight: 700; color: #f2f1ef; padding: 5px; vertical-align: top; display: inline-block; word-wrap: break-word; width: 100%; text-align: center; text-shadow: 2px 2px 0 #32302f; } #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options { margin: 0 auto; width: 275px; } #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options .meta-options { border-radius: 3px; margin: 5px; display: inline-block; text-align: center; padding: 2px; } #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options .meta-options[data-active='false'] { width: 70px; background: #161d23; color: #f2f1ef; } #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options .meta-options[data-active='true'] { width: 75px; background: #fad59a; color: #161d23; } #post-index #post-index-wrapper #posts-list a.page-link p { padding: 5px 10px 5px 10px; font-size: 1.2em; font-weight: 400; } #post-index #post-index-wrapper .paginate { width: 260px; display: block; margin: 0 auto; } #post-index #post-index-wrapper .paginate a { display: inline-block; vertical-align: top; } #post-index #post-index-wrapper .paginate span.count { text-align: center; padding: 5px; margin-top: -2px; display: inline-block; width: 200px; font-size: 1.5em; color: #f5ab35; } #post-edit-index { width: 100%; overflow: hidden; } #post-edit-index #post-edit-index-wrapper { width: 100%; } #post-edit-index #post-edit-index-wrapper #post-header { background: #fc6399; } #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper { max-width: 900px; margin: 0 auto; padding: 0.75rem; } #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper label { color: #f2f1ef; font-size: 0.8em; font-family: monospace, courier; font-weight: 600; } #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper span { color: color #161d23; font-size: 1.5em; } #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-title #post_title { background: #fc73a3; font-family: Helvetica, Arial, sans-serif; width: 97.6%; height: 80px; font-size: 2em; color: #161d23; padding: 5px; margin: 0 0 5px 0; } #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-title #calendar-icon { background: #2f3d4a; border-radius: 3px 0 0 3px; display: inline-block; padding: 5.2px; color: #b2cce5; } #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post_tags { background: #fc73a3; font-family: Helvetica, Arial, sans-serif; width: 97.6%; height: 80px; color: #161d23; padding: 5px; margin: 0 0 5px 0; } #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options { display: inline-block; vertical-align: top; width: 100%; padding: 0; } #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button:nth-child(1) { border-radius: 3px 0 0 3px; } #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button:nth-child(4) { border-radius: 0 3px 3px 0; } #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button { width: 33.3%; height: 39px; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; margin: 0; border-radius: 0; display: inline-block; vertical-align: top; text-align: center; } #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active='false'] { background: #161d23; } #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active='false'] svg { fill: #f2f1ef; } #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active='true'] { background: #fad59a; } #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active='true'] svg { fill: #161d23; } #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #featured-image-upload, #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-image-upload { display: none; } #post-edit-index #post-edit-index-wrapper #post-feature { width: 100%; } #post-edit-index #post-edit-index-wrapper #post-feature #featured-image-drop { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 200px; background: #1c242c; color: #374857; vertical-align: middle; font-family: monospace, courier; } #post-edit-index #post-edit-index-wrapper #post-feature #featured-image-drop label { cursor: pointer; } #post-edit-index #post-edit-index-wrapper #post-feature #featured-image-drop img { width: 100%; margin: 0; padding: 0; } #post-edit-index #post-edit-index-wrapper #post-feature #featured-new-image-btn { position: absolute; margin: 20px; } #post-edit-index #post-edit-index-wrapper #post-feature #featured-new-image-btn #new-feature-upload { padding-top: 4px; background: #f2f1ef; } #post-edit-index #post-edit-index-wrapper #post-feature #featured-new-image-btn #new-feature-upload svg { fill: #fc6399; } #post-edit-index #post-edit-index-wrapper #edit-post { width: 100%; max-width: 880px; margin: 0 auto; } #post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper { max-width: 900px; border-radius: 5px; margin: 40px 0 40px 0; overflow: hidden; } #post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper pre { margin: 0; } #post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper pre code { font-family: monospace, courier; padding: 5px; border-radius: 5px; line-height: 1.6em; font-size: 1.25em; color: #fde3a7; word-wrap: normal; white-space: pre-wrap; line-break: normal; -webkit-line-break: normal; -o-line-break: normal; -moz-line-break: normal; display: inline-block; width: 100%; max-width: 900px; min-height: 200px; } @media only screen and (max-width: 800px) { #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date { width: 37.6%; } } @media only screen and (max-width: 768px) { #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date { width: 43.1%; } #post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control { max-width: 100%; } #post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control button { width: 9.91%; } } @media only screen and (max-width: 640px) { #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date { width: 42%; } } @media only screen and (max-width: 480px) { #post-index #post-index-wrapper #post-index-menu a { font-size: 0.95em; } #post-index #post-index-wrapper #post-index-menu a label { display: none; visibility: hidden; } #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options { margin: 5px 0 0 0; width: 100%; padding: 0; } #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date { width: 89.2%; } #post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control button { width: 9.91%; } } @media only screen and (max-width: 320px) { #post-index #post-index-wrapper #post-index-menu a { font-size: 0.95em; } #post-index #post-index-wrapper #post-index-menu a label { display: none; visibility: hidden; } #post-edit-index #post-edit-index-wrapper #post-header #post-title #post_title { width: 96.4%; } #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options { margin: 5px 0 0 0; width: 100%; padding: 0; } #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date { width: 83.1%; } #post-edit-index #post-edit-index-wrapper #post-header #post-meta #post_tags { width: 96.4%; } #post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control .content-editor-btn-icon svg.icons { width: 20px; } #post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control .post-sumbit-btn svg.icons { width: 20px; } #post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control button { width: 10%; } } /** ------------------------------- -- Editor ------------------------------- * */ .dp-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(17,22,26,0.75); z-index: 2000; } .dp { position: relative; background: #374857; box-shadow: 2px 2px 16px rgba(0,0,0,0.25); line-height: 1.4; border-radius: 4px; max-height: 400px; z-index: 5000; padding-top: 6px; overflow: hidden; -webkit-tap-highlight-color: transparent; } .dp:before { content: ' '; height: 6px; position: absolute; top: 0; left: 0; right: 0; background: #fc6399; } .dp-permanent .dp { padding-top: 0; border: 1px solid #eee; box-shadow: none; } .dp-permanent .dp:before { display: none; } .dp-cal { min-height: 300px; } .dp-below { position: absolute; font-size: 0.8em; width: 400px; max-width: 90vw; } .dp-permanent { position: relative; font-size: 0.8em; width: 400px; max-width: 100vw; } .dp-permanent .dp { z-index: 0; } .dp-modal .dp { position: absolute; top: 50%; left: 50%; max-width: 600px; width: calc(100% - 4em); transform: translate(-50%, -50%); animation: slide-up 0.3s forwards; } .dp-months { padding: 24px; } .dp-years { box-sizing: border-box; max-height: 400px; padding: 8px 0; overflow: auto !important /* HACK for Chrome on Android */; } .dp-cal-month, .dp-cal-year, .dp-day, .dp-month, .dp-year { box-sizing: border-box; text-align: center; text-decoration: none; position: relative; color: #f2f1ef; border-radius: 2px; border: 0; background: transparent; } .dp-cal-header { position: relative; text-align: center; padding-bottom: 16px; background: #32414e; } .dp-next, .dp-prev { position: absolute; width: 30px; height: 30px; overflow: hidden; top: 14px; color: #1c242c; border-radius: 2px; border: 0; background: transparent; } .dp-next:focus, .dp-prev:focus, .dp-next:hover, .dp-prev:hover { outline: none; color: inherit; } .dp-prev { left: 24px; } .dp-next { right: 24px; } .dp-prev:before, .dp-next:before { content: ''; border: 2px solid; width: 10px; height: 10px; display: inline-block; transform: rotate(-45deg); transition: border-color 0.2s; margin: 9px 0 40px 4px; } .dp-prev:before { border-right: 0; border-bottom: 0; } .dp-next:before { border-left: 0; border-top: 0; margin-left: 0; margin-right: 4px; } .dp-cal-month, .dp-cal-year { display: inline-block; font-size: 1.4em; padding: 16px 8px 8px; outline: none; } .dp-cal-footer { text-align: center; background: #32414e; } .dp-day-today:after { content: ''; height: 0; width: 0; border: 7px solid #fc6399; border-bottom-color: transparent; border-left-color: transparent; position: absolute; top: 0; right: 0; } .dp-close, .dp-clear, .dp-today { box-sizing: border-box; display: inline-block; width: 33%; padding: 8px; text-decoration: none; color: #1c242c; border: 0; background: transparent; } .dp-permanent .dp-close, .dp-permanent .dp-clear { display: none; } .dp-close:active, .dp-clear:active, .dp-today:active, .dp-next:active, .dp-prev:active, .dp-cal-month:active, .dp-cal-year:active { background: #fc6399; color: #f2f1ef; } @media screen and (min-device-width: 1200px) { .dp-close:hover, .dp-close:focus, .dp-clear:hover, .dp-clear:focus, .dp-today:hover, .dp-today:focus, .dp-next:hover, .dp-next:focus, .dp-prev:hover, .dp-prev:focus, .dp-cal-month:focus, .dp-cal-month:hover, .dp-cal-year:hover, .dp-cal-year:focus { background: #fc6399; color: #f2f1ef; } } .dp-col-header, .dp-day { width: 14.28571429%; display: inline-block; padding: 8px; text-align: center; } .dp-col-header { color: #aaa; text-transform: uppercase; font-weight: 300; font-size: 0.8em; padding: 8px 0; } .dp-month { width: 33%; display: inline-block; padding: 8px; } .dp-year { display: block; padding: 8px 40px; width: 100%; } .dp-edge-day { color: #aaa; } .dp-day:hover, .dp-month:hover, .dp-year:hover, .dp-current:focus, .dp-current, .dp-day:focus, .dp-month:focus, .dp-year:focus { outline: none; background: #212b34; color: #f2f1ef; } .dp-selected:hover, .dp-selected:focus, .dp-selected { background: #fc6399; color: #161d23; } .dp-day-disabled { background: transparent; color: #ddd; } .dp-day-disabled:focus, .dp-day-disabled:hover { background: #ddd; } .dp-focuser { position: absolute; z-index: 0; top: 50%; left: 50%; } @media (max-width: 480px), (max-height: 480px) { .dp-modal .dp { font-size: 0.9em; width: auto; width: 100%; } .dp-day-of-week, .dp-day { padding: 8px; } } @-moz-keyframes slide-up { 0% { transform: translate(-50%, 100%); } 100% { transform: translate(-50%, -50%); } } @-webkit-keyframes slide-up { 0% { transform: translate(-50%, 100%); } 100% { transform: translate(-50%, -50%); } } @-o-keyframes slide-up { 0% { transform: translate(-50%, 100%); } 100% { transform: translate(-50%, -50%); } } @keyframes slide-up { 0% { transform: translate(-50%, 100%); } 100% { transform: translate(-50%, -50%); } } #edit-control { top: 1px; border-radius: 3px; width: 100%; max-width: 880px; margin-top: 30px; z-index: 2000; } #edit-control button:nth-child(1) { border-radius: 3px 0 0 3px; } #edit-control button:nth-child(10) { border-radius: 0 3px 3px 0; } #edit-control button { background: #b2cce5; width: 10%; height: 39px; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; margin: 0; border-radius: 0; display: inline-block; vertical-align: top; text-align: center; } #edit-control button:hover { background: #75a4d0; } #edit-control #option-update { padding: 5px 5px 1px 5px; display: inline-block; vertical-align: top; text-align: center; } #edit-control .icon-hide { display: none; visibility: hidden; } #edit-control .submit-start { background: #f2f1ef; } #edit-control .submit-start svg { fill: #32cd32; } #edit-control .submit-cool { background: #32cd32; } #edit-control .submit-cool svg { fill: #f2f1ef; } #edit-control .submit-delete { background: #f64747 !important; } #edit-control .submit-delete svg { fill: #f2f1ef !important; } #edit-control #option-date { height: 30px; padding-top: 6px; } #edit-control #option-date svg { margin: -13px 5px 0 0; display: inline-block; vertical-align: top; fill: #f2f1ef; } #edit-control .content-editor-btn-icon { padding: 5px 5px 1px 5px; color: #374857; } #edit-control .content-editor-btn-icon svg { fill: #374857; } #edit-control .content-editor-btn-text { padding: 5px; color: #374857; } #edit-control #option-bold { font-weight: bold; text-decoration: none; } #edit-control #option-italic { font-weight: bold; text-decoration: none; font-style: italic; } #edit-control #option-strikethrough { font-weight: bold; text-decoration: line-through; font-style: italic; } .hljs { display: block; overflow-x: auto; padding: 0.5em; background: #344453; } .hljs, .hljs-subst { color: #ebdbb2; } .hljs-deletion, .hljs-formula, .hljs-keyword .hljs-selector-tag { color: #fde3a7; font-style: italic; } .hljs-link { color: #fc6399; } .hljs-built_in, .hljs-emphasis, .hljs-name, .hljs-quote, .hljs-strong, .hljs-title, .hljs-variable { color: #ffa07a; } .hljs-attr, .hljs-params, .hljs-template-tag, .hljs-type { color: #89c4f4; } .hljs-builtin-name, .hljs-doctag, .hljs-literal, .hljs-number { color: #8f3f71; } .hljs-code, .hljs-meta, .hljs-regexp, .hljs-selector-id, .hljs-template-variable { color: #f5ab35; } .hljs-addition, .hljs-meta-string, .hljs-section, .hljs-selector-attr, .hljs-selector-class, .hljs-string, .hljs-symbol { color: #f6dd74; } .hljs-attribute, .hljs-bullet, .hljs-class, .hljs-function, .hljs-function .hljs-keyword, .hljs-meta-keyword, .hljs-selector-pseudo, .hljs-tag { color: #8ea4b8; } .hljs-comment { color: #928374; } .hljs-link_label, .hljs-literal, .hljs-number { color: #d3869b; } .hljs-comment, .hljs-emphasis { font-style: italic; } .hljs-section, .hljs-strong, .hljs-tag { font-weight: normal; }