Add flat navigation and modify theme
All checks were successful
Gitea Actions Demo / publish (push) Successful in 47s
@ -14,14 +14,14 @@ generate_feeds = true
|
||||
feed_filenames = ["rss.xml", "atom.xml"]
|
||||
|
||||
build_search_index = true
|
||||
taxonomies = [{ name = "tags" }]
|
||||
taxonomies = [{ name = "tags", feed = true }]
|
||||
|
||||
[markdown]
|
||||
highlight_code = true
|
||||
highlight_theme = "css"
|
||||
highlight_themes_css = [
|
||||
{ theme = "solarized-dark", filename = "syntax-theme-dark.css" },
|
||||
{ theme = "solarized-light", filename = "syntax-theme-light.css" }
|
||||
{ theme = "aparoksha-dark", filename = "syntax-theme-dark.css" },
|
||||
{ theme = "aparoksha-light", filename = "syntax-theme-light.css" }
|
||||
]
|
||||
smart_punctuation = true
|
||||
|
||||
|
@ -5,7 +5,6 @@ date = 2024-10-07
|
||||
[taxonomies]
|
||||
tags = ["Linux", "Aparoksha"]
|
||||
[extra]
|
||||
featured = true
|
||||
banner = "Adwaita.png"
|
||||
+++
|
||||
|
||||
|
@ -5,7 +5,6 @@ date = 2024-10-14
|
||||
[taxonomies]
|
||||
tags = ["Windows", "Aparoksha"]
|
||||
[extra]
|
||||
featured = true
|
||||
banner = "WinUI.png"
|
||||
+++
|
||||
|
||||
|
@ -8,5 +8,9 @@ page_template = "article.html"
|
||||
The backends listed here are based on the <a class="external" href="https://git.aparoksha.dev/aparoksha/meta">Meta package</a>.
|
||||
They can be used in combination with the Aparoksha package.
|
||||
|
||||
The backends marked with a star are part of the Aparoksha package.
|
||||
The following backends are part of the Aparoksha package:
|
||||
|
||||
- [Adwaita](/backends/adwaita/)
|
||||
- [WinUI](/backends/winui/)
|
||||
|
||||
This means that all the user interface elements included in the Aparoksha package will automatically render correctly with these backends.
|
||||
|
167
content/patterns/FlatNavigation/index.md
Normal file
@ -0,0 +1,167 @@
|
||||
+++
|
||||
title = "Flat Navigation"
|
||||
description = "A navigation pattern for views of equal importance."
|
||||
date = 2024-11-16
|
||||
[taxonomies]
|
||||
tags = ["Aparoksha", "Windows", "Linux", "macOS"]
|
||||
+++
|
||||
|
||||
In a flat navigation structure, each page is equivalent in importance and can be opened form any of the others.
|
||||
Different platforms offer different solutions for flat navigation, such as a top bar or a sidebar.
|
||||
This view will select the most appropriate based on number of elements and available space.
|
||||
|
||||
Label views with capitalized nouns with a similar length. Order the elements according to what is most useful for the user.
|
||||
The icons should clearly communicate a page's function even without the label.
|
||||
|
||||
Note that this view should be used exclusively as a direct child of a window.
|
||||
|
||||
## Sidebar Design
|
||||
|
||||
The sidebar design will be used if there are more than five items or the developer chooses to force the sidebar design (see below).
|
||||
|
||||
<div class="pattern-images">
|
||||
{{ image(url="sidebarGNOME.png", alt="A navigation view with a sidebar on GNOME" transparent=true) }}
|
||||
|
||||
{{ image(url="sidebarWindows.png", alt="A navigation view with a sidebar on Windows") }}
|
||||
</div>
|
||||
|
||||
## Top Bar Design
|
||||
|
||||
The top bar design will be used for five items or less if the sidebar design is not forced.
|
||||
|
||||
<div class="pattern-images">
|
||||
{{ image(url="topGNOME.png", alt="A navigation view with a top bar on GNOME" transparent=true) }}
|
||||
|
||||
{{ image(url="topWindows.png", alt="A navigation view with a top bar on GNOME") }}
|
||||
</div>
|
||||
|
||||
## Equatable Items
|
||||
|
||||
A flat navigation view can be initialized either with identifiable or with equatable items.
|
||||
The initializer for equatable items is useful for a fixed number of items.
|
||||
|
||||
```swift
|
||||
struct ContentView: View {
|
||||
|
||||
@State private var selectedItem: Page = .navigation
|
||||
|
||||
var view: Body {
|
||||
FlatNavigation(Page.allCases, selection: $selectedItem) {
|
||||
// The content.
|
||||
Text(selectedItem.description)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
enum Page: FlatNavigationItem, CaseIterable {
|
||||
|
||||
// The pages.
|
||||
case navigation
|
||||
case alert
|
||||
|
||||
// The title of the page.
|
||||
var description: String {
|
||||
switch self {
|
||||
case .navigation:
|
||||
Loc.navigation
|
||||
case .alert:
|
||||
Loc.alert
|
||||
}
|
||||
}
|
||||
|
||||
// The icon of the page.
|
||||
var icon: Icon {
|
||||
switch self {
|
||||
case .navigation:
|
||||
.navigation
|
||||
case .alert:
|
||||
.warning
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
## Identifiable Items
|
||||
|
||||
The initializer for identifiable items should be used for a dynamic list of items.
|
||||
It will automatically force the sidebar design (more information below).
|
||||
|
||||
```swift
|
||||
struct ContentView: View {
|
||||
|
||||
@State private var selectedItem: UUID?
|
||||
@State private var items: [Item] = [.init(title: "Item 1"), .init(title: "Item 2")]
|
||||
|
||||
var view: Body {
|
||||
FlatNavigation(items, selection: $selectedItem) {
|
||||
// The content.
|
||||
Text("Content")
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
struct Item: DynamicFlatNavigationItem, Identifiable {
|
||||
|
||||
let id: UUID = .init()
|
||||
var title: String
|
||||
|
||||
// The title of the page.
|
||||
var description: String { title }
|
||||
|
||||
// The icon of the page.
|
||||
var icon: Icon { .document }
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
## Force the Sidebar Design
|
||||
|
||||
Force the sidebar design with the [`forceSplitView(_:)`](https://aparoksha.aparoksha.dev/documentation/aparoksha/flatnavigation/forcesplitview(_:)) modifier.
|
||||
|
||||
```swift
|
||||
FlatNavigation(Page.allCases, selection: $selectedItem) {
|
||||
// The content.
|
||||
Text(selectedItem.description)
|
||||
}
|
||||
.forceSplitView()
|
||||
```
|
||||
|
||||
## Primary Action
|
||||
|
||||
The primary action usually modifies the navigation items or triggers an important action.
|
||||
|
||||
<div class="pattern-images">
|
||||
{{ image(url="primaryGNOME.png", alt="A navigation view with a sidebar and a primary action on GNOME" transparent=true) }}
|
||||
|
||||
{{ image(url="primaryWindows.png", alt="A navigation view with a sidebar and a primary action on Windows") }}
|
||||
|
||||
{{ image(url="primaryGNOMETop.png", alt="A navigation view with a sidebar on GNOME" transparent=true) }}
|
||||
|
||||
{{ image(url="primaryWindowsTop.png", alt="A navigation view with a sidebar on Windows") }}
|
||||
</div>
|
||||
|
||||
```swift
|
||||
FlatNavigation(items, selection: $selectedItem) {
|
||||
// The content.
|
||||
Text(selectedItem.description)
|
||||
}
|
||||
.primaryAction(Loc.addItem, icon: .plus) {
|
||||
// The action.
|
||||
items.append(.init(title: Loc.newItem))
|
||||
}
|
||||
```
|
||||
|
||||
## Guidelines
|
||||
|
||||
- <a class="external" href="https://developer.gnome.org/hig/guidelines/navigation.html#flat-navigation">GNOME</a>
|
||||
- <a class="external" href="https://learn.microsoft.com/en-us/windows/apps/design/basics/navigation-basics">Windows</a>
|
||||
|
||||
## Documentation
|
||||
|
||||
- <a class="external" href="https://aparoksha.aparoksha.dev/documentation/aparoksha/flatnavigation">Reference Documentation</a>
|
||||
- <a class="external" href="https://adwaita-swift.aparoksha.dev/documentation/adwaita/navigationsplitview">Native GNOME Implementation (Sidebar)</a>
|
||||
- <a class="external" href="https://adwaita-swift.aparoksha.dev/documentation/adwaita/viewswitcher">Native GNOME Implementation (Top Bar)</a>
|
||||
- <a class="external" href="https://winui-swift.aparoksha.dev/documentation/winui_swift/navigationview">Native Windows Implementation</a>
|
BIN
content/patterns/FlatNavigation/primaryGNOME.png
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
content/patterns/FlatNavigation/primaryGNOMETop.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
content/patterns/FlatNavigation/primaryWindows.png
Executable file
After Width: | Height: | Size: 169 KiB |
BIN
content/patterns/FlatNavigation/primaryWindowsTop.png
Executable file
After Width: | Height: | Size: 20 KiB |
BIN
content/patterns/FlatNavigation/sidebarGNOME.png
Normal file
After Width: | Height: | Size: 17 KiB |
BIN
content/patterns/FlatNavigation/sidebarWindows.png
Executable file
After Width: | Height: | Size: 22 KiB |
BIN
content/patterns/FlatNavigation/topGNOME.png
Normal file
After Width: | Height: | Size: 15 KiB |
BIN
content/patterns/FlatNavigation/topWindows.png
Executable file
After Width: | Height: | Size: 22 KiB |
@ -5,5 +5,5 @@ template = "article_list.html"
|
||||
page_template = "article.html"
|
||||
+++
|
||||
|
||||
The following widgets and patterns are available in the Aparoksha framework.
|
||||
The following views and patterns are available in the Aparoksha framework.
|
||||
Other patterns available in a platform-specific framework can be used in your app, but are not listed here if there is no cross-platform version at the moment.
|
||||
|
@ -52,4 +52,5 @@ body {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
object-fit: cover;
|
||||
max-width: 48%;
|
||||
}
|
@ -1,290 +1,25 @@
|
||||
/*
|
||||
* theme "Solarized (dark)" generated by syntect
|
||||
* theme "Aparoksha (dark)" by david-swift
|
||||
*/
|
||||
|
||||
.z-code {
|
||||
color: #D5D1D2;
|
||||
background-color: #28272D;
|
||||
}
|
||||
|
||||
.z-comment, .z-meta.z-documentation {
|
||||
color: #586e75;
|
||||
}
|
||||
.z-string {
|
||||
color: #2aa198;
|
||||
}
|
||||
.z-string.z-regexp {
|
||||
color: #2aa198;
|
||||
}
|
||||
.z-constant.z-character.z-escape {
|
||||
color: #dc322f;
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-constant.z-numeric {
|
||||
color: #6c71c4;
|
||||
}
|
||||
.z-variable {
|
||||
color: #268bd2;
|
||||
}
|
||||
.z-variable.z-function {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-variable.z-language {
|
||||
color: #d33682;
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-keyword {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-meta.z-import .z-keyword, .z-keyword.z-control.z-import, .z-keyword.z-control.z-import.z-from, .z-keyword.z-other.z-import, .z-keyword.z-control.z-at-rule.z-include, .z-keyword.z-control.z-at-rule.z-import {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-keyword.z-operator.z-comparison, .z-keyword.z-operator.z-assignment, .z-keyword.z-operator.z-arithmetic {
|
||||
color: #657b83;
|
||||
font-weight: bold;
|
||||
}
|
||||
.z-storage {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-storage.z-modifier {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-keyword.z-control.z-class, .z-entity.z-name, .z-entity.z-name.z-class, .z-entity.z-name.z-type.z-class {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-entity.z-other.z-inherited-class {
|
||||
color: #268bd2;
|
||||
}
|
||||
.z-entity.z-other.z-attribute-name {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-support, .z-support.z-type, .z-support.z-class {
|
||||
color: #859900;
|
||||
}
|
||||
.z-entity.z-name.z-function {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-punctuation.z-definition.z-variable {
|
||||
color: #859900;
|
||||
}
|
||||
.z-constant, .z-constant.z-language, .z-meta.z-preprocessor {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-entity.z-name.z-section {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.z-support.z-function.z-construct, .z-keyword.z-other.z-new {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-constant.z-character, .z-constant.z-other {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.z-entity.z-name.z-tag {
|
||||
color: #268bd2;
|
||||
}
|
||||
.z-punctuation.z-definition.z-tag.z-html, .z-punctuation.z-definition.z-tag.z-begin, .z-punctuation.z-definition.z-tag.z-end {
|
||||
color: #586e75;
|
||||
}
|
||||
.z-support.z-function {
|
||||
color: #859900;
|
||||
}
|
||||
.z-punctuation.z-separator.z-continuation {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-storage.z-type {
|
||||
color: #FF2D75;
|
||||
font-weight: bold;
|
||||
}
|
||||
.z-support.z-type.z-exception {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.z-keyword.z-other.z-special-method {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.z-invalid {
|
||||
background-color: #6e2e32;
|
||||
}
|
||||
.z-string.z-quoted.z-double, .z-string.z-quoted.z-single {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-punctuation.z-definition.z-string {
|
||||
color: #839496;
|
||||
}
|
||||
.z-meta.z-brace.z-square, .z-punctuation.z-section.z-brackets {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-meta.z-brace.z-round, .z-meta.z-brace.z-curly, .z-punctuation.z-section, .z-punctuation.z-section.z-block, .z-punctuation.z-definition.z-parameters, .z-punctuation.z-section.z-group {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-support.z-constant.z-color, .z-invalid.z-deprecated.z-color.z-w3c-non-standard-color-name.z-scss {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-meta.z-selector.z-css {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-entity.z-name.z-tag.z-css, .z-entity.z-name.z-tag.z-scss, .z-source.z-less .z-keyword.z-control.z-html.z-elements, .z-source.z-sass .z-keyword.z-control.z-untitled {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-entity.z-other.z-attribute-name.z-class {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-entity.z-other.z-attribute-name.z-id {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-entity.z-other.z-attribute-name.z-pseudo-element, .z-entity.z-other.z-attribute-name.z-tag.z-pseudo-element, .z-entity.z-other.z-attribute-name.z-pseudo-class, .z-entity.z-other.z-attribute-name.z-tag.z-pseudo-class {
|
||||
color: #268bd2;
|
||||
}
|
||||
.z-text.z-html.z-basic .z-meta.z-tag.z-other.z-html, .z-text.z-html.z-basic .z-meta.z-tag.z-any.z-html, .z-text.z-html.z-basic .z-meta.z-tag.z-block.z-any, .z-text.z-html.z-basic .z-meta.z-tag.z-inline.z-any, .z-text.z-html.z-basic .z-meta.z-tag.z-structure.z-any.z-html, .z-text.z-html.z-basic .z-source.z-js.z-embedded.z-html, .z-punctuation.z-separator.z-key-value.z-html {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-text.z-html.z-basic .z-entity.z-other.z-attribute-name.z-html, .z-meta.z-tag.z-xml .z-entity.z-other.z-attribute-name {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-keyword.z-other.z-special-method.z-ruby {
|
||||
color: #859900;
|
||||
}
|
||||
.z-variable.z-other.z-constant.z-ruby {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-constant.z-other.z-symbol.z-ruby {
|
||||
color: #2aa198;
|
||||
}
|
||||
.z-keyword.z-other.z-special-method.z-ruby {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.z-meta.z-array .z-support.z-function.z-construct.z-php {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-entity.z-name.z-function.z-preprocessor.z-c, .z-meta.z-preprocessor.z-c.z-include, .z-meta.z-preprocessor.z-macro.z-c {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-meta.z-preprocessor.z-c.z-include .z-string.z-quoted.z-other.z-lt-gt.z-include.z-c, .z-meta.z-preprocessor.z-c.z-include .z-punctuation.z-definition.z-string.z-begin.z-c, .z-meta.z-preprocessor.z-c.z-include .z-punctuation.z-definition.z-string.z-end.z-c {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-other.z-package.z-exclude, .z-other.z-remove {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-other.z-add {
|
||||
color: #2aa198;
|
||||
}
|
||||
.z-punctuation.z-section.z-group.z-tex, .z-punctuation.z-definition.z-arguments.z-begin.z-latex, .z-punctuation.z-definition.z-arguments.z-end.z-latex, .z-punctuation.z-definition.z-arguments.z-latex {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-meta.z-group.z-braces.z-tex {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-string.z-other.z-math.z-tex {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-variable.z-parameter.z-function.z-latex {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.z-punctuation.z-definition.z-constant.z-math.z-tex {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-text.z-tex.z-latex .z-constant.z-other.z-math.z-tex, .z-constant.z-other.z-general.z-math.z-tex, .z-constant.z-other.z-general.z-math.z-tex, .z-constant.z-character.z-math.z-tex {
|
||||
color: #2aa198;
|
||||
}
|
||||
.z-string.z-other.z-math.z-tex {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-punctuation.z-definition.z-string.z-begin.z-tex, .z-punctuation.z-definition.z-string.z-end.z-tex {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-keyword.z-control.z-label.z-latex, .z-text.z-tex.z-latex .z-constant.z-other.z-general.z-math.z-tex {
|
||||
color: #2aa198;
|
||||
}
|
||||
.z-variable.z-parameter.z-definition.z-label.z-latex {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-support.z-function.z-be.z-latex {
|
||||
color: #859900;
|
||||
}
|
||||
.z-support.z-function.z-section.z-latex {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.z-support.z-function.z-general.z-tex {
|
||||
color: #2aa198;
|
||||
}
|
||||
.z-keyword.z-control.z-ref.z-latex {
|
||||
color: #2aa198;
|
||||
}
|
||||
.z-storage.z-type.z-class.z-python, .z-storage.z-type.z-function.z-python, .z-storage.z-modifier.z-global.z-python {
|
||||
color: #859900;
|
||||
}
|
||||
.z-support.z-type.z-exception.z-python {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-meta.z-scope.z-for-in-loop.z-shell, .z-variable.z-other.z-loop.z-shell {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-meta.z-scope.z-case-block.z-shell, .z-meta.z-scope.z-case-body.z-shell {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-punctuation.z-definition.z-logical-expression.z-shell {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-storage.z-modifier.z-c++ {
|
||||
color: #859900;
|
||||
}
|
||||
.z-support.z-function.z-perl {
|
||||
color: #268bd2;
|
||||
}
|
||||
.z-meta.z-diff, .z-meta.z-diff.z-header {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-meta.z-diff.z-range {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-markup.z-deleted {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-markup.z-changed {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-markup.z-inserted {
|
||||
color: #859900;
|
||||
}
|
||||
.z-markup.z-warning {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-markup.z-error {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-markup.z-heading, .z-punctuation.z-definition.z-heading.z-markdown {
|
||||
color: #b58900;
|
||||
font-weight: bold;
|
||||
}
|
||||
.z-markup.z-quote {
|
||||
color: #859900;
|
||||
}
|
||||
.z-markup.z-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.z-markup.z-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.z-markup.z-underline.z-link.z-markdown, .z-meta.z-link.z-reference .z-constant.z-other.z-reference.z-link.z-markdown {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-constant.z-other.z-reference.z-link.z-markdown {
|
||||
color: #6c71c4;
|
||||
}
|
||||
.z-meta.z-paragraph.z-markdown .z-meta.z-dummy.z-line-break {
|
||||
background-color: #FF2D75;
|
||||
}
|
||||
.z-brackethighlighter.z-all {
|
||||
color: #586e75;
|
||||
}
|
||||
.z-entity.z-name.z-filename.z-find-in-files {
|
||||
color: #2aa198;
|
||||
}
|
||||
.z-constant.z-numeric.z-line-number.z-find-in-files {
|
||||
color: #586e75;
|
||||
}
|
||||
.z-variable.z-other.z-readwrite.z-js, .z-variable.z-other.z-object.z-js, .z-variable.z-other.z-constant.z-js {
|
||||
color: #839496;
|
||||
}
|
||||
.z-meta {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-support {
|
||||
color: #D5D1D2;
|
||||
.z-comment {
|
||||
color: #929292;
|
||||
}
|
||||
|
@ -1,284 +1,25 @@
|
||||
/*
|
||||
* theme "Solarized (light)" generated by syntect
|
||||
* theme "Aparoksha (light)" by david-swift
|
||||
*/
|
||||
|
||||
.z-code {
|
||||
color: #65783;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
|
||||
.z-comment, .z-meta.z-documentation {
|
||||
color: #93a1a1;
|
||||
}
|
||||
.z-string {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-string.z-regexp {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-constant.z-character.z-escape {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-constant.z-numeric {
|
||||
color: #6c71c4;
|
||||
}
|
||||
.z-variable {
|
||||
color: #268bd2;
|
||||
}
|
||||
.z-variable.z-function {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-variable.z-language {
|
||||
color: #d33682;
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-keyword {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-meta.z-import .z-keyword, .z-keyword.z-control.z-import, .z-keyword.z-control.z-import.z-from, .z-keyword.z-other.z-import, .z-keyword.z-control.z-at-rule.z-include, .z-keyword.z-control.z-at-rule.z-import {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-keyword.z-operator.z-comparison, .z-keyword.z-operator.z-assignment, .z-keyword.z-operator.z-arithmetic {
|
||||
color: #65783;
|
||||
font-weight: bold;
|
||||
}
|
||||
.z-storage {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-storage.z-modifier {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-keyword.z-control.z-class, .z-entity.z-name, .z-entity.z-name.z-class, .z-entity.z-name.z-type.z-class {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-entity.z-other.z-inherited-class {
|
||||
color: #268bd2;
|
||||
}
|
||||
.z-entity.z-other.z-attribute-name {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-support, .z-support.z-type, .z-support.z-class {
|
||||
color: #65783;
|
||||
}
|
||||
.z-entity.z-name.z-function {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-punctuation.z-definition.z-variable {
|
||||
color: #859900;
|
||||
}
|
||||
.z-constant, .z-constant.z-language, .z-meta.z-preprocessor {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-entity.z-name.z-section {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.z-support.z-function.z-construct, .z-keyword.z-other.z-new {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-constant.z-character, .z-constant.z-other {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.z-entity.z-name.z-tag {
|
||||
color: #268bd2;
|
||||
}
|
||||
.z-punctuation.z-definition.z-tag.z-html, .z-punctuation.z-definition.z-tag.z-begin, .z-punctuation.z-definition.z-tag.z-end {
|
||||
color: #93a1a1;
|
||||
}
|
||||
.z-support.z-function {
|
||||
color: #859900;
|
||||
}
|
||||
.z-punctuation.z-separator.z-continuation {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-storage.z-type {
|
||||
color: #FF2D75;
|
||||
font-weight: bold;
|
||||
}
|
||||
.z-support.z-type.z-exception {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.z-keyword.z-other.z-special-method {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.z-invalid {
|
||||
background-color: #ec9489;
|
||||
}
|
||||
.z-string.z-quoted.z-double, .z-string.z-quoted.z-single {
|
||||
color: #FF2D75;
|
||||
}
|
||||
.z-punctuation.z-definition.z-string {
|
||||
color: #839496;
|
||||
}
|
||||
.z-meta.z-brace.z-square, .z-punctuation.z-section.z-brackets {
|
||||
color: #268bd2;
|
||||
}
|
||||
.z-meta.z-brace.z-round, .z-meta.z-brace.z-curly, .z-punctuation.z-section, .z-punctuation.z-section.z-block, .z-punctuation.z-definition.z-parameters, .z-punctuation.z-section.z-group {
|
||||
color: #657b83;
|
||||
}
|
||||
.z-support.z-constant.z-color, .z-invalid.z-deprecated.z-color.z-w3c-non-standard-color-name.z-scss {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-meta.z-selector.z-css {
|
||||
color: #657b83;
|
||||
}
|
||||
.z-entity.z-name.z-tag.z-css, .z-entity.z-name.z-tag.z-scss, .z-source.z-less .z-keyword.z-control.z-html.z-elements, .z-source.z-sass .z-keyword.z-control.z-untitled {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-entity.z-other.z-attribute-name.z-class {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-entity.z-other.z-attribute-name.z-id {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-entity.z-other.z-attribute-name.z-pseudo-element, .z-entity.z-other.z-attribute-name.z-tag.z-pseudo-element, .z-entity.z-other.z-attribute-name.z-pseudo-class, .z-entity.z-other.z-attribute-name.z-tag.z-pseudo-class {
|
||||
color: #268bd2;
|
||||
}
|
||||
.z-text.z-html.z-basic .z-meta.z-tag.z-other.z-html, .z-text.z-html.z-basic .z-meta.z-tag.z-any.z-html, .z-text.z-html.z-basic .z-meta.z-tag.z-block.z-any, .z-text.z-html.z-basic .z-meta.z-tag.z-inline.z-any, .z-text.z-html.z-basic .z-meta.z-tag.z-structure.z-any.z-html, .z-text.z-html.z-basic .z-source.z-js.z-embedded.z-html, .z-punctuation.z-separator.z-key-value.z-html {
|
||||
color: #657b83;
|
||||
}
|
||||
.z-text.z-html.z-basic .z-entity.z-other.z-attribute-name.z-html, .z-meta.z-tag.z-xml .z-entity.z-other.z-attribute-name {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-keyword.z-other.z-special-method.z-ruby {
|
||||
color: #859900;
|
||||
}
|
||||
.z-variable.z-other.z-constant.z-ruby {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-constant.z-other.z-symbol.z-ruby {
|
||||
color: #2aa198;
|
||||
}
|
||||
.z-keyword.z-other.z-special-method.z-ruby {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.z-meta.z-array .z-support.z-function.z-construct.z-php {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-entity.z-name.z-function.z-preprocessor.z-c, .z-meta.z-preprocessor.z-c.z-include, .z-meta.z-preprocessor.z-macro.z-c {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.z-meta.z-preprocessor.z-c.z-include .z-string.z-quoted.z-other.z-lt-gt.z-include.z-c, .z-meta.z-preprocessor.z-c.z-include .z-punctuation.z-definition.z-string.z-begin.z-c, .z-meta.z-preprocessor.z-c.z-include .z-punctuation.z-definition.z-string.z-end.z-c {
|
||||
color: #2aa198;
|
||||
}
|
||||
.z-other.z-package.z-exclude, .z-other.z-remove {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-other.z-add {
|
||||
color: #2aa198;
|
||||
}
|
||||
.z-punctuation.z-section.z-group.z-tex, .z-punctuation.z-definition.z-arguments.z-begin.z-latex, .z-punctuation.z-definition.z-arguments.z-end.z-latex, .z-punctuation.z-definition.z-arguments.z-latex {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-meta.z-group.z-braces.z-tex {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-string.z-other.z-math.z-tex {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-variable.z-parameter.z-function.z-latex {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.z-punctuation.z-definition.z-constant.z-math.z-tex {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-text.z-tex.z-latex .z-constant.z-other.z-math.z-tex, .z-constant.z-other.z-general.z-math.z-tex, .z-constant.z-other.z-general.z-math.z-tex, .z-constant.z-character.z-math.z-tex {
|
||||
color: #2aa198;
|
||||
}
|
||||
.z-string.z-other.z-math.z-tex {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-punctuation.z-definition.z-string.z-begin.z-tex, .z-punctuation.z-definition.z-string.z-end.z-tex {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-keyword.z-control.z-label.z-latex, .z-text.z-tex.z-latex .z-constant.z-other.z-general.z-math.z-tex {
|
||||
color: #2aa198;
|
||||
}
|
||||
.z-variable.z-parameter.z-definition.z-label.z-latex {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-support.z-function.z-be.z-latex {
|
||||
color: #859900;
|
||||
}
|
||||
.z-support.z-function.z-section.z-latex {
|
||||
color: #cb4b16;
|
||||
}
|
||||
.z-support.z-function.z-general.z-tex {
|
||||
color: #2aa198;
|
||||
}
|
||||
.z-keyword.z-control.z-ref.z-latex {
|
||||
color: #2aa198;
|
||||
}
|
||||
.z-storage.z-type.z-class.z-python, .z-storage.z-type.z-function.z-python, .z-storage.z-modifier.z-global.z-python {
|
||||
color: #859900;
|
||||
}
|
||||
.z-support.z-type.z-exception.z-python {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-meta.z-scope.z-for-in-loop.z-shell, .z-variable.z-other.z-loop.z-shell {
|
||||
color: #586e75;
|
||||
}
|
||||
.z-meta.z-scope.z-case-block.z-shell, .z-meta.z-scope.z-case-body.z-shell {
|
||||
color: #586e75;
|
||||
}
|
||||
.z-punctuation.z-definition.z-logical-expression.z-shell {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-storage.z-modifier.z-c++ {
|
||||
color: #859900;
|
||||
}
|
||||
.z-support.z-function.z-perl {
|
||||
color: #268bd2;
|
||||
}
|
||||
.z-meta.z-diff, .z-meta.z-diff.z-header {
|
||||
color: #93a1a1;
|
||||
}
|
||||
.z-meta.z-diff.z-range {
|
||||
color: #268bd2;
|
||||
}
|
||||
.z-markup.z-deleted {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-markup.z-changed {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-markup.z-inserted {
|
||||
color: #859900;
|
||||
}
|
||||
.z-markup.z-warning {
|
||||
color: #b58900;
|
||||
}
|
||||
.z-markup.z-error {
|
||||
color: #dc322f;
|
||||
}
|
||||
.z-markup.z-heading, .z-punctuation.z-definition.z-heading.z-markdown {
|
||||
color: #b58900;
|
||||
font-weight: bold;
|
||||
}
|
||||
.z-markup.z-quote {
|
||||
color: #859900;
|
||||
}
|
||||
.z-markup.z-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.z-markup.z-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.z-markup.z-underline.z-link.z-markdown, .z-meta.z-link.z-reference .z-constant.z-other.z-reference.z-link.z-markdown {
|
||||
color: #2aa198;
|
||||
}
|
||||
.z-constant.z-other.z-reference.z-link.z-markdown {
|
||||
color: #703DAA;
|
||||
}
|
||||
.z-meta.z-paragraph.z-markdown .z-meta.z-dummy.z-line-break {
|
||||
background-color: #eee8d5;
|
||||
}
|
||||
.z-brackethighlighter.z-all {
|
||||
color: #93a1a1;
|
||||
}
|
||||
.z-entity.z-name.z-filename.z-find-in-files {
|
||||
color: #2aa198;
|
||||
}
|
||||
.z-constant.z-numeric.z-line-number.z-find-in-files {
|
||||
color: #93a1a1;
|
||||
}
|
||||
.z-variable.z-other.z-readwrite.z-js, .z-variable.z-other.z-object.z-js, .z-variable.z-other.z-constant.z-js {
|
||||
color: #657b83;
|
||||
.z-comment {
|
||||
color: #828282;
|
||||
}
|
||||
|