过氧化物 版式参考手册

简介

这是过氧化物版式的参考手册，方便你进行二次修改。

CSS变量

过氧化物是一个相对基岩而言，变量化不那么彻底的版式。不过，仍然可以使用变量改变过氧化物的整体外观。

绝对调色盘

:root {
    /* 绝对调色盘 */
    --p-white: #ffffff;
    --p-white-gray: #f5f5f5;
    --p-light-gray: #dedede;
    --p-gray: #707070;
    --p-dark-gray: #414141;
    --p-black-gray: #1e1e1e;
    --p-black: #000000;
 
    --p-white-transparent-0-8: rgba(255, 255, 255, 0.85);
    --p-white-transparent-0-6: rgba(255, 255, 255, 0.65);
    --p-white-transparent-0-4: rgba(255, 255, 255, 0.4);
    --p-white-transparent-0-2: rgba(255, 255, 255, 0.2);
    --p-black-transparent-0-8: rgba(0, 0, 0, 0.85);
    --p-black-transparent-0-6: rgba(0, 0, 0, 0.65);
    --p-black-transparent-0-4: rgba(0, 0, 0, 0.4);
    --p-black-transparent-0-2: rgba(0, 0, 0, 0.2);
 
    --p-light-red: #dd7a7a;
    --p-red: #e72a2a;
    --p-dark-red: #7b1111;
    --p-light-green: #7acc7a;
    --p-green: #2a7b2a;
    --p-dark-green: #114b11;
    --p-light-blue: #7aaccd;
    --p-blue: #2a577b;
    --p-dark-blue: #113b57;
    --p-light-yellow: #ddcc7a;
    --p-yellow: #e7b42a;
    --p-dark-yellow: #7b5711;
    --p-light-purple: #b47acc;
    --p-purple: #7b2a7b;
    --p-dark-purple: #4b114b;
    --p-light-orange: #e7942a;
    --p-orange: #e77b2a;
    --p-dark-orange: #7b4b11;
}

层次调色盘

:root {
    /* 层次调色盘 */
    --p-gray-0: #ffffff;
    --p-gray-1: #fafafa;
    --p-gray-2: #e8e8e8;
    --p-gray-3: #707070;
    --p-gray-4: #414141;
    --p-gray-5: #1e1e1e;
    --p-gray-6: #171717;
    --p-gray-7: #000000;
 
    --p-theme-color-light: #3b69e4;
    --p-theme-color: #3d5cab;
    --p-theme-color-dark: #354f96;
 
    --p-light-transparent-0-8: rgba(255, 255, 255, 0.85);
    --p-light-transparent-0-6: rgba(255, 255, 255, 0.65);
    --p-light-transparent-0-4: rgba(255, 255, 255, 0.4);
    --p-light-transparent-0-2: rgba(255, 255, 255, 0.2);
    --p-dark-transparent-0-8: rgba(0, 0, 0, 0.85);
    --p-dark-transparent-0-6: rgba(0, 0, 0, 0.65);
    --p-dark-transparent-0-4: rgba(0, 0, 0, 0.4);
    --p-dark-transparent-0-2: rgba(0, 0, 0, 0.2);
 
    --p-warning-color: #e72a2a;
    --p-warning-color-dark: #c12121;
    --p-warning-color-light: #ffe4e4;
    --p-success-color: #7acc7a;
    --p-success-color-dark: #59804d;
    --p-success-color-light: #e4f7e4;
    --p-info-color: #7aaccd;
    --p-info-color-dark: #4d6680;
    --p-info-color-light: #e4f7ff;
    --p-danger-color: #e7922a;
    --p-danger-color-dark: #c16e21;
    --p-danger-color-light: #fff3e4;
}

版头布局

侧边栏

页面内容

底部页面选项

页面动作区

杂项

Saving Pages按钮