XF 2.1 AdminCP extra less experiment.

[ShikiSuen]

I am trying to put an extra CSS for AdminCP only.

1. Enable the developer mode.

2. Open the master theme and open the admin template「PAGE_CONTAINER」, find:

<xf:macro template="public:helper_js_global" name="head" arg-app="admin" />

Put the below line right below the above line:

<xf:css src="extra_admincp.less" />

3. Open the master theme and add an admin template called「extra_admincp.less」, put the following content in it:

@font-face {
  font-family: 'Inter_Web';
  font-weight: 100 900;
  font-style: oblique 0deg 10deg;
  font-display: swap;
  src: url("https://rsms.me/inter/font-files/Inter.var.woff2?3.13") format("woff2");
}

:root {
    --styleHueMain: #0073ff;
    --styleHueAccented: #ff8c00;
    --pageBg: #EBF1F2;
    --paletteNeutral1: mix(white, black, 99.6%);
    --paletteNeutral2: mix(white, black, 55%);
    --paletteNeutral3: mix(white, black, 8%);
    --textColor: var(--paletteNeutral3);
    --contentBg: var(--paletteNeutral1);
    --chromeBg: rgb(35,49,65);
    --htmlBg: #181a1b;
}


html {
    background: @xf-paletteColor5;
    font-family: 'Inter var', Inter, 'Inter_Web', -apple-system, BlinkMacSystemFont, Tahoma, Arial, Arimo, Roboto, sans-serif;
}

body {
    background: var(--pageBg);
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.3);
}

.p-header {
    box-shadow: none;
    background: var(--chromeBg);
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.block-header {
    .block-desc {color: @xf-textColorDimmed;}
    background: var(--contentBg);
    color: var(--textColor);
    font-size: @xf-fontSizeLarge;
    font-weight: @xf-fontWeightHeavy;
    border-bottom: 6px solid #88b7f0;
    padding-top: 4px;
    padding-bottom: 2px;
}

.block-body {
}

@media (min-width:541px) {
    .formRow {
        &>* {border: 0px;}
        &>dt {background: #f7fbff; border: 0px;}
    }
}

.p-nav-sectionHeader {
    .p-nav-sectionLink.js-navSectionToggle, .p-nav-sectionToggle.js-navSectionToggle {
        font-size: @xf-fontSizeNormal;
        padding: @xf-paddingMedium @xf-paddingLarge;
    }
}
.p-nav {
    filter: grayscale(40%) !important;
}

.p-body-container {
   
}

Enjoy.

 

[ShikiSuen]

P.S.: Somehow, my fake HSV trick doesn't work in this adminCP extra less template.
I am afraid that this is because LESS color computing does not support processing 「var(--XXXXX)」 css variables.
In this case, just use real HSV color values instead.
(There is no way to override @xf- properties through extra less template.)


Also, CSS filter is a bad approach which can significantly reduce web browser response speed. Considering using exact color definitions if you can.