549 lines
8.6 KiB
SCSS
549 lines
8.6 KiB
SCSS
/**
|
|
* main.scss - admin theme styles for ProcessWire
|
|
*
|
|
*/
|
|
|
|
@import 'reset';
|
|
@import 'jquery-ui';
|
|
@import 'ui';
|
|
@import 'notifications';
|
|
@import 'form';
|
|
@import 'inputfields';
|
|
@import 'masthead';
|
|
@import 'wiretabs';
|
|
@import 'pagelist';
|
|
@import 'table';
|
|
@import 'pagination';
|
|
|
|
|
|
/***********************************************************************************************
|
|
* GENERAL
|
|
*
|
|
*/
|
|
|
|
*, *:before, *:after {
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background: $footer-bg;
|
|
font-size: 100%;
|
|
color: $text-color;
|
|
|
|
&.modal {
|
|
background-color: $text-bg;
|
|
}
|
|
}
|
|
body,
|
|
.ui-dialog,
|
|
.ui-button,
|
|
button,
|
|
input,
|
|
th, td,
|
|
select,
|
|
textarea {
|
|
font-weight: $normal-weight;
|
|
font-family: $regular-font;
|
|
}
|
|
|
|
.pw-container,
|
|
.container,
|
|
.ui-dialog {
|
|
line-height: $base-line-height;
|
|
font-size: $base-font-size;
|
|
}
|
|
|
|
.pw-container,
|
|
.container {
|
|
position: relative;
|
|
width: 95%;
|
|
max-width: $container-max-width;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
a {
|
|
color: $link-color;
|
|
|
|
&:hover {
|
|
color: $link-hover-color;
|
|
background-color: $link-hover-bg;
|
|
}
|
|
|
|
&.on {
|
|
// on/active link color
|
|
background-color: $link-current-bg;
|
|
color: $link-current-color;
|
|
}
|
|
|
|
&:active {
|
|
color: $link-active-color;
|
|
background-color: $link-active-bg;
|
|
}
|
|
}
|
|
|
|
strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
em {
|
|
font-style: italic;
|
|
}
|
|
|
|
code {
|
|
font-family: Menlo, Monaco, 'Andale Mono', 'Lucida Console', 'Courier New', monospace;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.pw-description, .description {
|
|
color: $medium-text-color;
|
|
margin: 0.5em 0;
|
|
@include word-wrap();
|
|
}
|
|
|
|
.pw-notes, .notes,
|
|
.pw-detail, .detail {
|
|
color: $medium-text-color;
|
|
font-size: 0.875em;
|
|
line-height: 1.5em;
|
|
}
|
|
.pw-notes, .notes {
|
|
background: $notes-bg;
|
|
@include word-wrap();
|
|
}
|
|
|
|
.pw-description strong, .description strong,
|
|
.pw-notes strong .notes strong {
|
|
color: $medium-text-color;
|
|
font-weight: $bold-weight;
|
|
}
|
|
|
|
.pw-error, .error {
|
|
background: $error-bg;
|
|
color: $error-color;
|
|
font-weight: $bold-weight;
|
|
font-size: 0.9166666em;
|
|
}
|
|
|
|
.WireFatalError {
|
|
background: $error-bg;
|
|
color: $reverse-text-color;
|
|
padding: 1em;
|
|
position: relative;
|
|
z-index: 9999;
|
|
}
|
|
|
|
/***********************************************************************************************
|
|
* CONTENT
|
|
*
|
|
*/
|
|
|
|
#content {
|
|
/* main content area */
|
|
position: relative;
|
|
padding-bottom: 2em;
|
|
padding-top: 1px;
|
|
z-index: 0;
|
|
background: $text-bg;
|
|
|
|
.pw-container, .container {
|
|
min-height: 50px;
|
|
|
|
> form,
|
|
> .ui-helper-clearfix > form {
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pw-content, .content {
|
|
/* any content area that you want to inherit these general use styles */
|
|
|
|
img {
|
|
display: block;
|
|
}
|
|
|
|
.nav a.label {
|
|
font-size: 1em;
|
|
}
|
|
|
|
p,
|
|
ul
|
|
ol,
|
|
table {
|
|
margin: 1em 0;
|
|
}
|
|
|
|
|
|
h2 {
|
|
margin: 1em 0;
|
|
font-size: 1.4em;
|
|
line-height: 1.2em;
|
|
color: $medium-text-color;
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
|
|
&:hover {
|
|
color: $reverse-text-color;
|
|
background: $link-hover-color;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
margin: 1em 0;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
h4 {
|
|
margin: 1em 0 0.25em 0;
|
|
font-weight: $bold-weight;
|
|
font-size: 0.916666666666667em;
|
|
}
|
|
|
|
|
|
li {
|
|
margin: 1em 0;
|
|
display: block;
|
|
list-style: disc;
|
|
}
|
|
|
|
ol li {
|
|
display: list-item;
|
|
list-style-type: decimal;
|
|
margin-left: 1em;
|
|
}
|
|
|
|
|
|
/**
|
|
* Content navigation like when on the root page of "templates" or "access"
|
|
*
|
|
*/
|
|
dl {
|
|
margin: 1em 0;
|
|
}
|
|
.pw-container > dl:first-child {
|
|
margin-top: 0;
|
|
}
|
|
dt,
|
|
dt {
|
|
display: block;
|
|
font-weight: $bold-weight;
|
|
padding-top: 0.75em;
|
|
}
|
|
dt a {
|
|
text-transform: none;
|
|
color: $alt-link-color;
|
|
}
|
|
dt a:hover {
|
|
color: $link-hover-color;
|
|
}
|
|
dl dd {
|
|
padding-bottom: 0.75em;
|
|
border-bottom: 1px solid $subtle-border;
|
|
}
|
|
}
|
|
|
|
/***********************************************************************************************
|
|
* FOOTER
|
|
*
|
|
*/
|
|
|
|
#footer {
|
|
margin: 2em 0 2em 0;
|
|
font-size: $footer-font-size;
|
|
color: $footer-color;
|
|
|
|
#userinfo {
|
|
display: block;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
#footer, #debug {
|
|
a {
|
|
color: $footer-link-color;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
p {
|
|
margin-top: 0;
|
|
}
|
|
|
|
}
|
|
|
|
#debug {
|
|
// margin-top: 2em;
|
|
|
|
.pw-container {
|
|
width: 100%;
|
|
}
|
|
|
|
p {
|
|
margin: 1em 0;
|
|
}
|
|
|
|
ol {
|
|
margin: 1em 0;
|
|
}
|
|
|
|
h3, h4 {
|
|
font-weight: $bold-weight;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
|
|
th {
|
|
font-weight: $bold-weight;
|
|
}
|
|
|
|
td, th {
|
|
vertical-align: top;
|
|
padding: 3px 5px;
|
|
border-bottom: 1px dotted $light-text-color;
|
|
border-left: 1px dotted $light-text-color;
|
|
font-size: 12px;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.pw-panel-content #debug {
|
|
padding: 0.25em 0.75em 0.25em 0.25em;
|
|
}
|
|
|
|
.pw-init #debug {
|
|
display: none;
|
|
}
|
|
|
|
/***********************************************************************************************
|
|
* MODAL
|
|
*
|
|
*/
|
|
|
|
body.modal {
|
|
|
|
.pw-container, .container {
|
|
margin: 0;
|
|
width: 100%;
|
|
min-width: 300px;
|
|
max-width: 100%;
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
&:not(.hasWireTabs) {
|
|
#notices {
|
|
margin: 1px 0 0.75em 0;
|
|
a.notice-remove {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pw-content h2 {
|
|
margin: 1em 0 0.5em 0;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
#footer,
|
|
#masthead,
|
|
#breadcrumbs,
|
|
#headline {
|
|
display: none;
|
|
}
|
|
|
|
&.hasWireTabs #breadcrumbs {
|
|
display: block;
|
|
padding: 0.5em 0 0 0;
|
|
li {
|
|
display: none;
|
|
|
|
&.title {
|
|
/* display only title in modal mode */
|
|
// display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
#submit_save_top {
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
|
|
body.modal-inline {
|
|
#content {
|
|
padding-bottom: 0;
|
|
}
|
|
.pw-container, .container {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/***********************************************************************************************
|
|
* MISC
|
|
*
|
|
*/
|
|
|
|
body.id-3:not(.hasUrlSegments) #breadcrumbs ul li:not(:first-child):not(:last-child),
|
|
body.id-23 #breadcrumbs ul li:not(:first-child):not(:last-child),
|
|
body.id-8:not(.hasUrlSegments) #breadcrumbs ul li:not(:first-child):not(:last-child) {
|
|
/* hide extraneous breadcrumbs when in admin root */
|
|
display: none;
|
|
}
|
|
|
|
body.id-23 #content form {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
#content .pw-container > form,
|
|
#content .pw-container > .ui-helper-clearfix > form {
|
|
/* for wiretabs and/or forms to line up with headline area */
|
|
top: $form-top-margin-adjustment;
|
|
}
|
|
|
|
body:not(.hasWireTabs) #headline .pw-container {
|
|
min-height: 40px;
|
|
}
|
|
|
|
.pw-content > .pw-container > #PageListContainer {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.hasWireTabs .pw-content #fieldgroupContext {
|
|
/* context selection in field editor */
|
|
top: -2.25em;
|
|
right: 0;
|
|
z-index: 102;
|
|
}
|
|
|
|
#ModuleEditForm .AdminDataTable tr td:first-child {
|
|
color: lighten($text-color, 50%);
|
|
}
|
|
|
|
#addLinksMenu {
|
|
min-width: 150px;
|
|
}
|
|
|
|
.InputfieldPageNameURL strong {
|
|
// prevents a fuzzy bold from appearing
|
|
font-weight: normal;
|
|
}
|
|
|
|
#tools-toggle {
|
|
width: 43px;
|
|
}
|
|
|
|
/* font-awesome default icon sizes */
|
|
.fa { font-size: 14px !important; }
|
|
.fa-lg { font-size: 22px !important; }
|
|
.fa-2x { font-size: 28px !important; }
|
|
.fa-3x { font-size: 42px !important; }
|
|
.fa-4x { font-size: 56px !important; }
|
|
.fa-5x { font-size: 70px !important; }
|
|
|
|
/***********************************************************************************************
|
|
* MEDIA QUERIES
|
|
*
|
|
*/
|
|
|
|
/* Smaller than standard 960 (devices and browsers) */
|
|
@media only screen and (max-width: 959px) {}
|
|
|
|
/* Tablet Portrait size to standard 960 (devices and browsers) */
|
|
@media only screen and (min-width: 768px) and (max-width: 959px) {}
|
|
|
|
/* All Mobile Sizes (devices and browser) */
|
|
@media only screen and (max-width: 767px) {
|
|
|
|
#masthead {
|
|
padding-top: 0;
|
|
}
|
|
|
|
#masthead #topnav {
|
|
float: left;
|
|
}
|
|
|
|
body #masthead #topnav a,
|
|
body #content .WireTabs li a {
|
|
padding-left: 0.75em;
|
|
padding-right: 0.75em;
|
|
}
|
|
|
|
#logo {
|
|
display: none;
|
|
}
|
|
|
|
#masthead,
|
|
#headline,
|
|
#breadcrumbs,
|
|
#notices p,
|
|
body:not(.modal) #content,
|
|
#footer {
|
|
padding-right: 10px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
#fieldgroupContext {
|
|
display: none;
|
|
}
|
|
|
|
/**
|
|
* Disregard column width when at mobile size
|
|
*
|
|
*/
|
|
.Inputfield:not(.InputfieldSubmit):not(.InputfieldButton) {
|
|
clear: both !important;
|
|
width: 100% !important;
|
|
margin-left: 0 !important;
|
|
.InputfieldHeader,
|
|
.InputfieldContent {
|
|
margin-left: 0 !important;
|
|
}
|
|
}
|
|
|
|
// no need to adjust column height when Inputfields are collapsed
|
|
.Inputfield .maxColHeightSpacer {
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
|
|
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
|
|
@media only screen and (min-width: 480px) and (max-width: 767px) {
|
|
}
|
|
|
|
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
|
|
@media only screen and (max-width: 479px) {
|
|
#logo {
|
|
display: block;
|
|
}
|
|
|
|
.pw-container, .container {
|
|
width: 100%;
|
|
}
|
|
#footer #userinfo {
|
|
float: none;
|
|
}
|
|
#footer {
|
|
text-align: center;
|
|
}
|
|
|
|
.AjaxUploadDropHere {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
}
|
|
|