过氧化物 版式参考手册
简介
这是过氧化物版式的参考手册,方便你进行二次修改。
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; }
