|
|
| Line 13: |
Line 13: |
| #n-Attributes a::before, | | #n-Attributes a::before, |
| #n-Charts a::before { | | #n-Charts a::before { |
| | font-family: "Font Awesome 6 Free"; |
| content: ""; | | content: ""; |
| display: inline-block; | | display: inline-block; |
| width: 1.25rem; | | width: 1rem; |
| height: 1.25rem; | | height: 1rem; |
| margin-right: 0.75rem;
| |
| background-color: currentColor; | | background-color: currentColor; |
| -webkit-mask-repeat: no-repeat; | | -webkit-mask-repeat: no-repeat; |
| Line 28: |
Line 28: |
| } | | } |
|
| |
|
| /* All rules icon */
| |
| #n-All-rules a::before { | | #n-All-rules a::before { |
| -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); | | content: "\f02d"; |
| mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");
| |
| } | | } |
|
| |
|
| /* Attributes icon */
| |
| #n-Attributes a::before { | | #n-Attributes a::before { |
| -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E"); | | content: "\f1de"; |
| mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E");
| |
| } | | } |
|
| |
|
| /* Charts icon */
| |
| #n-Charts a::before { | | #n-Charts a::before { |
| -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E"); | | content: "\f080"; |
| mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E");
| |
| } | | } |
Revision as of 21:48, 29 August 2026
/* All CSS here will be loaded for users of the Citizen skin */
:root {
/* Pink is the new black */
--color-primary-oklch__h: 45;
}
:root.citizen-v4 {
--color-surface-0: light-dark( #f8f0ec, #0d0806 );
}
/* Base container for custom sidebar icons */
#n-All-rules a::before,
#n-Attributes a::before,
#n-Charts a::before {
font-family: "Font Awesome 6 Free";
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
flex-shrink: 0;
}
#n-All-rules a::before {
content: "\f02d";
}
#n-Attributes a::before {
content: "\f1de";
}
#n-Charts a::before {
content: "\f080";
}
