/* Setup and login panels - additional layout
========================================================================== */
/**
* Reduced `body` top padding of setup/login panels.
*
* Example HTML:
*
*
*
*/
.setup,
.login {
padding: 1em 4% 0;
}
/**
* Column width and margins of setup panels.
*/
.txp-setup {
max-width: $setup-column;
margin: 1em auto;
// Column width of 'welcome' setup panel.
.welcome & {
max-width: 20.30769230769231em; // 264px / 13px
}
}
/**
* Column width and margins of login panels.
*/
.txp-login {
max-width: 20.30769230769231em; // 264px / 13px
margin: 1em auto;
}
/**
* Large Textpattern logo replaces `h1`.
*/
.welcome,
.login {
h1 {
/* 2 */
@include hide-text;
width: 16.5em; // 264px / 16px
height: 3.375em; // 54px / 16px
background: url("../img/textpattern.svg") no-repeat;
background-size: 16.5em 3.375em;
font-size: 16px;
}
}
body.darkmode.welcome,
body.darkmode.login {
h1 {
background-image: url("../img/textpattern-dark.svg");
}
}
/**
* Additional styling for 'view site' link on login panel.
*/
.login-view-site {
position: relative;
bottom: -0.5em;
padding: 1em 0;
overflow: hidden;
border-top: 1px solid $color-border;
text-overflow: ellipsis;
}
@include dark-mode {
.login-view-site {
border-top-color: $dark-color-border;
}
}
/**
* Welcome page `select` spans entire column width.
*/
.welcome select {
width: 100%;
}
/* Content -> Categories panel - additional layout
========================================================================== */
/**
* Extra margin below multi-edit widgets on categories page.
*/
#page-category .multi-edit {
margin-bottom: 1em;
}
/* Content -> Write panel - additional layout
========================================================================== */
/**
* View mode tabs on write area.
*
* Example HTML:
*
*
*/
#view_modes {
ul {
margin: 2em 0 0;
padding: 0;
border-bottom: 1px solid $color-border;
font-size: $small-font-size;
line-height: $small-line-height;
}
li {
display: inline-block;
height: 2.636363636363636em; // 29px / 11px
}
a {
display: block;
position: relative;
bottom: -1px;
padding: 0.5em 1em;
border: 1px solid $color-border;
background-color: darken($color-background-box, 2%);
color: $color-text;
text-decoration: none;
@if $flat-theme < 1 {
box-shadow: inset 0 -0.25em 0.5em rgba(#666666, 0.2);
}
&:hover {
border-color: $color-border-extra-dark;
background-color: $color-background-box;
}
&:focus {
border-color: $color-link-focus;
outline: 0;
}
}
.active a {
border-bottom-color: $color-background;
background-color: lighten($color-background-box, 3%);
@if $flat-theme < 1 {
box-shadow: none;
}
&:focus {
border-color: $color-link-focus;
border-bottom-color: $color-background;
}
}
}
@include dark-mode {
#view_modes {
ul {
border-bottom-color: $dark-color-border;
}
a {
border-color: $dark-color-border-light;
background-color: $dark-color-background-box;
color: $dark-color-text;
@if $flat-theme < 1 {
box-shadow: inset 0 -0.25em 0.5em rgba(#000000, 0.2);
}
&:hover {
border-color: $dark-color-border;
background-color: tint($dark-color-background-box, 5%);
}
&:focus {
border-color: $dark-color-link-focus;
}
}
.active a {
border-color: $dark-color-border;
border-bottom-color: $dark-color-background;
background-color: $dark-color-background;
@if $flat-theme < 1 {
box-shadow: none;
}
&:focus {
border-color: $dark-color-link-focus;
border-bottom-color: $dark-color-background;
}
}
}
}
/**
* Custom font size/weight/colour for elements in write -> main content area.
*/
#main_content {
.text {
input {
font-size: 1.230769230769231rem; // 16px / 13px
}
textarea {
font-size: 1.230769230769231rem; // 16px / 13px
line-height: 1.5; // 24px / 16px
}
.title input {
width: 100%;
font-size: 1.538461538461538rem; // 20px / 13px
font-weight: bold;
}
}
.author small {
display: block;
margin-top: -1em;
color: $color-text-footnote;
}
}
@include dark-mode {
#main_content .author small {
color: $dark-color-text-footnote;
}
}
/**
* Reduce space above expires date/time region.
*/
#expires-datetime-group {
margin-top: 0;
}
/**
* Sticky save button region.
*
* Example HTML:
*
*
*/
.txp-save-zone {
position: sticky;
z-index: 999;
top: 2.75em;
margin: -1.25em 0 1.75em;
padding: 1px 1em 0;
border: 1px solid $color-border-light;
border-top: 0;
background: $color-background;
@if $flat-theme < 1 {
box-shadow: 0 0.1em 0.125em rgba(#000000, 0.15);
}
.txp-actions {
margin-bottom: 0.5em;
}
}
@include dark-mode {
.txp-save-zone {
border-color: $dark-color-border-light;
background: $dark-color-background-box;
}
}
/* Content -> Articles panel - additional layout
========================================================================== */
/**
* Grey-out text for unpublished articles/non-modified dates in the list.
*/
.unpublished,
.not-modified {
color: $color-text-footnote;
}
@include dark-mode {
.unpublished,
.not-modified {
color: $dark-color-text-footnote;
}
}
/* Content -> Images panel - additional layout
========================================================================== */
.image-replace {
margin-bottom: 1em;
}
.edit-alter-thumbnail {
margin-bottom: 1.5em;
}
.edit-alter-thumbnail input {
margin: 0 0.30769230769231em 0 0;
&:last-child {
margin: 0;
}
}
[dir="rtl"] .edit-alter-thumbnail input {
margin: 0 0 0 0.30769230769231em;
&:last-child {
margin: 0;
}
}
.ui-button.thumbnail-swap-size {
margin: 0 0.30769230769231em 0 0;
}
[dir="rtl"] .ui-button.thumbnail-swap-size {
margin: 0 0 0 0.30769230769231em;
}
.thumbnail-image form {
display: inline-block;
margin-top: 5px;
vertical-align: top;
}
/* Content -> Files panel - additional layout
========================================================================== */
/**
* Make sure form for selecting existing files is on a new line.
*/
.txp-control-panel .assign-existing-form {
display: block;
}
/* Content -> Comments panel - additional layout
========================================================================== */
/**
* Background highlight for spam comment/unmoderated comment rows in the list.
*/
.txp-list tbody tr {
&.spam {
background: lighten($color-error-background, 2%);
}
&.moderate {
background: lighten($color-warning-background, 3%);
}
}
@include dark-mode {
.txp-list tbody tr {
&.spam {
background: darken($dark-color-error-background, 2%);
}
&.moderate {
background: darken($dark-color-warning-background, 3%);
}
}
}
/* Presentation -> all panels - additional layout
========================================================================== */
.presentation textarea.code {
height: 64vh;
}
/* Presentation -> Forms panel - additional layout
========================================================================== */
#page-form .name {
display: inline-block;
margin: 1em 1em 0 0;
input {
width: 14.46153846153846em; // 188px / 13px
}
}
[dir="rtl"] #page-form .name {
margin: 1em 0 0 1em;
}
#page-form .type {
display: inline-block;
margin: 1em 0 0;
}
#page-form .txp-layout-4col-3span .txp-actions a {
margin-top: 1.5em;
}
/* Admin -> Plugins panel - additional layout
========================================================================== */
.plugin-data {
display: block;
}
tr {
.manage span,
.plugin-prefs {
visibility: hidden;
}
}
tr.active {
.manage span,
.plugin-prefs {
visibility: visible;
}
}
#preview-plugin,
#preview-help,
#preview-textpack {
height: 16vh;
overflow: auto;
resize: vertical;
}
.edit-plugin-code textarea {
height: 70vh;
}