fix: use CSS variable to define color palette for UI theme

This commit is contained in:
DanyLE 2023-07-13 19:51:51 +02:00 committed by Dany LE
parent eac84a3ab8
commit a5257bf108
52 changed files with 376 additions and 953 deletions

View File

@ -150,6 +150,7 @@ build_themes: antos_light antos_dark
cp -r src/themes/system/icons $(BUILDDIR)/resources/themes/system cp -r src/themes/system/icons $(BUILDDIR)/resources/themes/system
cp -r src/themes/system/wp $(BUILDDIR)/resources/themes/system cp -r src/themes/system/wp $(BUILDDIR)/resources/themes/system
for f in src/themes/system/*.css; do (cat "$${f}"; echo) >> $(BUILDDIR)/resources/themes/system/system.css;done for f in src/themes/system/*.css; do (cat "$${f}"; echo) >> $(BUILDDIR)/resources/themes/system/system.css;done
for f in src/themes/default/*.css; do (cat "$${f}"; echo) >> $(BUILDDIR)/resources/themes/system/antos.css;done
antos_light: antos_light:
@echo "$(BLUE)Building themes name: antos-light$(NC)" @echo "$(BLUE)Building themes name: antos-light$(NC)"

View File

@ -1,45 +0,0 @@
afx-app-window div.afx-window-wrapper{
border:1px solid #262626;
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
border-radius: 0px;
background-color:#333333;
}
afx-app-window.unactive > div.afx-window-wrapper{
/*background-color: #464646;*/
box-shadow: none;
}
afx-app-window ul.afx-window-top{
border-bottom: 1px solid #262626;
}
/*
afx-app-window ul li.afx-window-close{
background-color: #Fc605b;
}
afx-app-window ul li.afx-window-minimize{
background-color: #fec041;
}
afx-app-window ul li.afx-window-maximize{
background-color: #35cc4b;
}*/
afx-app-window ul li.afx-window-title{
text-align: left;
}
afx-app-window div.afx-window-content
{
background-color:#363636;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/*
afx-app-window.unactive div.afx-window-content
{
background-color:#464646;
}*/
afx-app-window ul.afx-window-top button:hover
{
background-color: #464646;
color: white;
}

View File

@ -1,18 +0,0 @@
afx-button button{
border: 1px solid #262626;
background-color: #464646;
color: white;
border-radius: 3px;
font-family: "Ubuntu";
}
afx-button button[disabled]{
color: #868686;
}
afx-button button:active, afx-button button.btactive {
background-color: #2786F3;
color: white;
border: 1px solid #363636;
}

View File

@ -1,4 +0,0 @@
afx-color-picker canvas.color-palette, afx-color-picker div.color-sample{
border: 1px solid #262626;
/*border-radius: 3px;*/
}

View File

@ -1,27 +0,0 @@
afx-apps-dock{
background-color:#363636;
padding:0;
padding-top: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-left:1px solid #262626;
border-right:1px solid #262626;
box-shadow: none;
}
afx-apps-dock afx-button > button:hover {
background-color: #3f3e3e;
}
afx-apps-dock afx-button.plural > button:hover
{
border-top: 3px double #646363;
}
afx-apps-dock afx-button.selected > button {
background-color: #464646;
color: white;
border: 0;
border-bottom: 2px solid #bb86fc;
}
afx-apps-dock afx-button.plural.selected > button {
border-top: 3px double #646363;
}

View File

@ -1,43 +0,0 @@
afx-grid-view afx-grid-row:nth-child(even) afx-grid-cell
{
background-color: #3b3b3b;
}
afx-grid-view afx-grid-row:nth-child(odd) afx-grid-cell
{
background-color: #474747;
}
afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell
{
background-color: #116cd6;
color:white;
}
afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell.afx-grid-cell-selected
{
font-weight: normal;
}
afx-grid-view .grid_row_header afx-grid-cell{
border:0;
}
afx-grid-view afx-grid-row.grid_row_header div{
border-top:1px solid #A6A6A6;
}
afx-grid-view afx-resizer.horizontal{
background-color: transparent;
border-left: 1px solid #262626;
border-right: 1px solid #262626;
/* border-left: 1px solid #cbcbcb; */
}
afx-grid-view .grid_row_header afx-grid-cell{
background-color: #373737;
border-top: 1px solid #262626;
/*border-right: 1px solid #262626;*/
border-bottom: 1px solid #262626;
}

View File

@ -1,20 +0,0 @@
afx-input afx-label
{
font-size: 13px;
color: #bb86fc;
background-color: #464646;
}
afx-input input,
afx-input textarea
{
border-radius: 0;
border: 0;
border-bottom: 1px solid #262626;
background-color: #464646;
}
afx-input input:focus,
afx-input textarea:focus
{
border-bottom: 1px solid #bb86fc;
}

View File

@ -1,3 +0,0 @@
afx-overlay {
background-color: rgba(54, 54, 54, 0.7);
}

View File

@ -1,14 +0,0 @@
afx-tab-bar[dir="horizontal"] afx-list-view > div.list-container > ul > afx-list-item > li.selected
{
background-color: #464646;
color:white;
border-bottom:2px solid #116cd6; /* #262626;*/
}
afx-tab-bar[dir="vertical"] afx-list-view > div.list-container > ul > afx-list-item > li.selected
{
background-color: #464646;
color:white;
border-right:2px solid #116cd6; /* #262626;*/
}

View File

@ -1,17 +0,0 @@
afx-tree-view div.afx_tree_item_selected{
background-color: #116cd6;
color:white;
}
afx-tree-view div.afx_tree_item_selected:hover{
background-color: #116cd6;
color:white;
}
afx-tree-view .afx_folder_item{
font-weight: bold;
}
/*
afx-tree-view .afx_tree_item_odd{
background-color: #464646;
}*/

View File

@ -1,66 +1,34 @@
html,body{ :root {
color: white; --antos-ant-color: #5F548E;
}
#desktop > div > ul afx-list-item {
color: white;
}
#desktop > div > ul afx-list-item li.selected { --text-primary: white;
background-color: #116cd6; --text-secondary: #bb86fc;
color:white; --text-tertiary: white;
border-radius: 6px; --text-disable: #868686;
} --text-warning: orangered;
--text-error: #df3154;
--text-info: green;
#desktop > div > ul afx-list-item i.file:before{ --background-primary: #333333;
content: "\f15b\a"; --background-secondary: #363636;
font-family: "FontAwesome"; --background-tertiary: #464646;
font-size: 32px; --background-quaternary: #464646;
display: block;
color: white;
font-style: normal;
font-weight: normal;
}
#desktop > div > ul afx-list-item i.dir:before{ --background-overlay: rgba(54,54,54,0.7);
display: block;
content: "\f07b\a";
font-family: "FontAwesome";
font-size: 32px;
color: #76D2F9;
font-weight: normal;
font-style: normal;
}
#systooltip { --icon-primary: white;
border:1px solid #363636; --icon-secondary: #868686;
border-radius: 3px; --icon-tertiary: #76D2F9;
padding-left:3px;
padding-right:3px;
box-shadow: none;
background-color: #464646;
}
input { --item-bg-odd: #474747;
outline: none; --item-bg-even: #3b3b3b;
padding: 2px; --item-bg-active: #116cd6;
border: 1px solid #262626; --item-bg-hover: #464646;
background-color:#464646;
color: white;
border-radius: 3px;
box-sizing: border-box;
}
textarea { --border-primary:#262626;
color: white; --border-secondary: #363636;
background-color: #464646; --border-tertiary: #bb86fc;
outline: none; --border-quaternary: #646363;
border: 1px solid #262626;
box-sizing: border-box;
}
a:link, --shadow-primary: rgba(0,0,0,0.65);
a:visited,
a:hover
{
color:#df3154;
} }

View File

@ -1,47 +0,0 @@
afx-app-window div.afx-window-wrapper{
border:1px solid #a6a6a6;
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
border-radius: 0;
background-color:#dfdfdf;
}
afx-app-window.unactive > div.afx-window-wrapper{
/*background-color: #f6f6f6;*/
box-shadow: none;
}
afx-app-window ul.afx-window-top{
border-bottom: 1px solid #a6a6a6;
}
/*
afx-app-window ul li.afx-window-close{
background-color: #Fc605b;
margin-right: 10px;
}
afx-app-window ul li.afx-window-minimize{
background-color: #fec041;
}
afx-app-window ul li.afx-window-maximize{
background-color: #35cc4b;
}
*/
afx-app-window ul li.afx-window-title{
text-align: left;
}
afx-app-window div.afx-window-content
{
background-color: white;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/*
afx-app-window.unactive div.afx-window-content
{
background-color:white;
}*/
afx-app-window ul.afx-window-top button:hover
{
background-color: #2786F3;
color: white;
}

View File

@ -1,17 +0,0 @@
afx-button button{
border: 1px solid #a6a6a6;
background-color: #f6F6F6;
color: #414339;
border-radius: 3px;
font-family: "Ubuntu";
}
afx-button button[disabled]{
color: #a6a6a6;
}
afx-button button:active, afx-button button.btactive {
background-color: #2786F3;
color: white;
border: 1px solid #dedede;
}

View File

@ -1,19 +0,0 @@
afx-calendar-view div{
text-align: center;
}
afx-calendar-view > div afx-label i{
font-weight: bold;
}
afx-calendar-view afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell
{
background-color: transparent;
color:black;
}
afx-calendar-view afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell.afx-grid-cell-selected
{
background-color: #116cd6;
color:white;
border-radius: 6px;
}

View File

@ -1,27 +0,0 @@
afx-apps-dock{
background-color:#e7e7e7;
padding:0;
padding-top: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-left:1px solid #a6a6a6;
border-right:1px solid #a6a6a6;
box-shadow: none;
}
afx-apps-dock afx-button > button:hover {
background-color: #cecece;
}
afx-apps-dock afx-button.plural > button:hover
{
border-top: 3px double #a6a6a6;
}
afx-apps-dock afx-button.selected > button {
background-color: #2786F3;
color: white;
border: 0;
border-bottom: 2px solid salmon;
}
afx-apps-dock afx-button.plural.selected > button {
border-top: 3px double #66abfa;
}

View File

@ -1,96 +0,0 @@
afx-file-view afx-label.status{
background-color: #f6F6F6;
border-top: 1px solid #cbcbcb;
}
afx-file-view afx-list-view > div.list-container > ul li{
background-color: transparent;
}
afx-file-view afx-list-view > div.list-container > ul .afx-list-item:nth-child(even) li {
background-color: transparent;
}
afx-file-view afx-list-view i.dir:before{
content: "\f07b";
font-family: "FontAwesome";
font-size: 35px;
color: #76D2F9;
font-weight: normal;
font-style: normal;
}
afx-file-view afx-list-view i{
width: 100%;
margin-left: 3px;
}
afx-file-view afx-list-view i.file:before{
content: "\f016";
font-family: "FontAwesome";
font-size: 30px;
font-style: normal;
font-weight: normal;
}
afx-file-view afx-list-view > div.list-container > ul > .afx-list-item > li.selected
{
background-color: #116cd6;
color:white;
border-radius: 6px;
}
afx-file-view afx-grid-view{
padding:0;
}
afx-file-view afx-grid-view i.file:before{
content: "\f016";
font-family: "FontAwesome";
color: #414339;
font-style: normal;
font-weight: normal;
}
afx-file-view afx-grid-view i.dir:before{
content: "\f07b";
font-family: "FontAwesome";
color: #76D2F9;
font-style: normal;
font-weight: normal;
}
afx-file-view afx-grid-view i{
margin-right: 5px;
}
afx-file-view afx-grid-view afx-grid-row.afx-grid-row-selected i:before{
color:white;
}
afx-file-view afx-tree-view .afx-tree-view-folder-close:before{
content: "\f07b";
font-family: "FontAwesome";
color:#76D2F9;
}
afx-file-view afx-tree-view .afx-tree-view-folder-open:before{
content: "\f07c";
font-family: "FontAwesome";
color:#76D2F9;
}
afx-file-view afx-tree-view .afx-tree-view-item:before{
content: "\f016";
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
}
afx-file-view afx-tree-view div.afx_tree_item_selected, afx-file-view afx-tree-view div.afx_tree_item_selected:hover{
background-color: transparent;
}
afx-file-view afx-tree-view div.afx_tree_item_selected ul{
background-color: #116cd6;
color:white;
border-radius: 0x;
}
afx-file-view afx-tree-view div.afx_tree_item_selected i.file:before{
color:white;
}
afx-file-view afx-tree-view .afx_folder_item{
font-weight: normal;
}

View File

@ -1,40 +0,0 @@
afx-grid-view afx-grid-row:nth-child(even) afx-grid-cell
{
background-color: #f5F5F5;
}
afx-grid-view afx-grid-row:nth-child(odd) afx-grid-cell
{
background-color: #E6E6E6;
}
afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell
{
background-color: #116cd6;
color:white;
}
afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell.afx-grid-cell-selected
{
font-weight: bold;
}
afx-grid-view .grid_row_header afx-grid-cell{
border: 0;
}
afx-grid-view afx-grid-row.grid_row_header div{
border-top:1px solid #A6A6A6;
}
afx-grid-view afx-resizer.horizontal{
background-color: transparent;
border-left: 1px solid #a6a6a6;
border-right: 1px solid #a6a6a6;
/* border-left: 1px solid #cbcbcb; */
}
afx-grid-view .grid_row_header afx-grid-cell{
background-color: #dfdfdf;
border-top: 1px solid #a6a6a6;
/*border-right: 1px solid #a6a6a6;*/
border-bottom: 1px solid #a6a6a6;
}

View File

@ -1,20 +0,0 @@
afx-input afx-label
{
font-size: 13px;
color: #116cd6;
background-color: #f6f6f6;
}
afx-input input,
afx-input textarea
{
border-radius: 0;
border: 0;
border-bottom: 1px solid #a6a6a6;
background-color: #f6f6f6;
}
afx-input input:focus,
afx-input textarea:focus
{
border-bottom: 1px solid #116cd6;
}

View File

@ -1,4 +0,0 @@
afx-label i.icon-style {
width: 16px;
height: 16px;
}

View File

@ -1,63 +0,0 @@
afx-list-view > div.list-container > ul li{
background-color: white;
}
afx-list-view > div.list-container > ul .afx-list-item:nth-child(even) li{
background-color:#f5F5F5;
}
afx-list-view i.closable:before{
color: #414339;
}
afx-list-view.dropdown > div.list-container > ul li:hover{
background-color: #dcdcdc;
color: #414339;
}
afx-list-view > div.list-container > ul > .afx-list-item li.selected{
background-color: #116cd6;
color:white;
}
afx-list-view.dropdown > div.list-container > ul{
border:1px solid #a6a6a6;
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
border-radius: 3px;
background-color: white;
border-top-left-radius: 0px;
}
afx-list-view.dropdown{
color: #414339;
background-color: transparent;
}
afx-list-view.dropdown div.list-container > div > afx-label
{
border:1px solid #a6a6a6;
border-radius: 3px;
}
afx-list-view ul.complex-content{
padding: 0;
margin: 0;
background-color: transparent;
}
afx-list-view ul.complex-content li{
padding:0;
background-color: transparent;
color:#5e5f59;
list-style: none;
}
afx-list-view > div.list-container > ul li.selected ul.complex-content li{
color:white;
}
afx-list-view div.button_container afx-button{
margin-right: 2px;
}
afx-list-view div.button_container afx-button button{
border-radius: 0;
}
afx-list-view .afx-list-item li afx-label.description i.label-text
{
font-size: 13px;
padding-left: 10px;
}

View File

@ -1,19 +0,0 @@
afx-toast-notification div[data-id="toast_container"] div[data-id="toast_header"]::before
{
font-family: "bootstrap-icons";
content: "\F62A";
font-size: 20px;
}
afx-toast-notification div[data-id="toast_container"] div[data-id="toast_header"]:hover
{
color: orangered;
}
afx-toast-notification div[data-id="toast_container"]
{
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
border: 1px solid #a6a6a6;
background-color: #f6F6F6;
border-radius: 6px;
}

View File

@ -1,18 +0,0 @@
afx-nspinner ul li{
border: 1px solid #a6a6a6;
}
afx-nspinner ul li.incr{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
afx-nspinner ul li.decr{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
afx-nspinner ul li:hover{
color:#116cD6;
}

View File

@ -1,3 +0,0 @@
afx-overlay {
background-color: rgba(231, 231, 231, 0.7);
}

View File

@ -1,12 +0,0 @@
afx-resizer.vertical {
background-color: transparent;
border-top: 1px solid #cbcbcb;
}
afx-resizer.horizontal {
background-color: transparent;
border-left: 1px solid #cbcbcb;
}
afx-resizer.horizontal:hover, afx-resizer.vertical:hover
{
background-color: #116cd6;
}

View File

@ -1,29 +0,0 @@
afx-slider div.container{
border-radius: 3px;
background-color: #e6e6e6;
}
afx-slider div.progress {
background-color: #116cd6;
border-radius: 3px;
}
afx-slider div.dragpoint {
border:1px solid #6b6b6b;
background-color:#e6e6e6;
}
afx-slider div.dragpoint::before
{
content: "\f0d7";
font-family: "FontAwesome";
position: absolute;
left: 0;
right: 0;
text-align: center;
color:#868686;
bottom: -15px;
display: block;
height: 20px;
}

View File

@ -1,24 +0,0 @@
afx-list-view > div.list-container > ul afx-stack-menu-item.afx-list-item li:hover {
background-color: #cecece;
}
afx-list-view > div.list-container > ul afx-stack-menu-item.afx-list-item li.selected afx-switch span:before
{
color:white;
}
afx-list-view > div.list-container > ul > afx-stack-menu-item.afx-list-item > li.selected{
background-color: #116cd6;
color:white;
}
afx-stack-menu > afx-button button
{
border-radius: 0;
}
afx-stack-menu.context {
border:1px solid #a6a6a6;
border-radius: 5px;
border-top-left-radius: 0px;
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
background-color: #e7e7e7;
}

View File

@ -1,18 +0,0 @@
afx-switch span{
width: 30px;
height:24px;
font-size: 24px;
font-family: "FontAwesome";
}
afx-switch span:before{
content: "\f204";
color: #414339;
font-style: normal;
font-weight: normal;
}
afx-switch span.swon:before{
content: "\f205";
color: #116cd6;
font-style: normal;
font-weight: normal;
}

View File

@ -1,87 +0,0 @@
afx-sys-panel > div{
background-color: #e7e7e7;
border-top: 1px solid #9c9C9C;
box-shadow:none;
}
afx-sys-panel .afx-panel-os-menu button
{
background-color: #5F548E;
border-radius: 0;
border: 0;
color: white;
}
afx-sys-panel .afx-panel-os-menu button .label-text
{
font-weight: bold;
}
afx-sys-panel .afx-panel-os-menu {
color: white;
}
afx-sys-panel .afx-panel-os-stray button{
border-radius: 0;
border: 0;
}
afx-sys-panel afx-overlay
{
background-color: #e7e7e7;
border: 1px solid #9c9C9C;
}
afx-sys-panel afx-list-view[data-id="applist"],
afx-sys-panel afx-tab-bar[data-id="catlist"]
{
border-top: 1px solid #afafaf;
}
afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li
{
padding-top: 5px;
padding-bottom: 5px;
background-color: transparent;
}
afx-sys-panel afx-hbox[data-id="btlist"] afx-button button
{
border: 0;
border-left: 1px solid #afafaf;
border-top: 1px solid #afafaf;
font-size: 24px;
}
afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul .afx-list-item li:hover
{
background-color: #cecece;
border-radius: 10px;
}
afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul .afx-list-item li.selected{
background-color: #116cd6;
color:white;
}
afx-sys-panel afx-tab-bar[data-id="catlist"] .afx-list-view i.label-text {
font-weight: bold;
}
afx-sys-panel afx-list-view[data-id="applist"] afx-label.search-header {
font-weight: bold;
}
afx-sys-panel div[data-id="searchicon"]:before{
content: "\f002";
display: block;
background-color:transparent;
color:#afafaf;
font-family: "FontAwesome";
padding-left:3px;
font-size: 25px;
}
afx-sys-panel input{
border:0;
height: 30px;
color:#afafaf;
font-size: 16px;
background-color: transparent;
}

View File

@ -1,18 +0,0 @@
afx-tab-bar[dir="horizontal"] afx-list-view > div.list-container > ul > afx-list-item > li.selected
{
/*background-color: #116cd6;
color:white;*/
background-color: #f5F5F5;
color: unset;
border-bottom:2px solid #116cd6; /* #c3c3c3;*/
}
afx-tab-bar[dir="vertical"] afx-list-view > div.list-container > ul > afx-list-item > li.selected
{
/*background-color: #116cd6;
color:white;*/
background-color: #f5F5F5;
color: unset;
border-right:2px solid #116cd6; /* #c3c3c3;*/
}

View File

@ -1,17 +0,0 @@
afx-tree-view div.afx_tree_item_selected{
background-color: #116cd6;
color:white;
}
afx-tree-view div.afx_tree_item_selected:hover{
background-color: #116cd6;
color:white;
}
afx-tree-view .afx_folder_item{
font-weight: bold;
}
/*
afx-tree-view .afx_tree_item_odd{
background-color: #f5F5F5;
}
*/

View File

@ -1,59 +1,33 @@
html,body{ :root {
color:#414339; --antos-ant-color: #8685EF;
}
#desktop > div > ul afx-list-item { --text-primary: #414339;
color: white; --text-secondary: #5F548E; /*alternative to primary*/
} --text-tertiary: white; /*usually for highlight text*/
--text-disable: #a6a6a6;
--text-warning: orangered;
--text-error: #df3154;
--text-info: green;
#desktop > div > ul afx-list-item li.selected { --background-primary: #d0d0d0; /*main window*/
background-color: #116cd6; --background-secondary: #dfdfdf; /*main content*/
border-radius: 6px; --background-tertiary: #e0e0e0; /* element content*/
color: white; --background-quaternary: #d2d2d2; /* highlight content element*/
} --background-overlay: rgba(231,231,231,0.7); /*default overlay*/
#desktop > div > ul afx-list-item i.file:before{ --icon-primary: #414339;
content: "\f15b\a"; --icon-secondary: #414339;
font-family: "FontAwesome"; --icon-tertiary: #76D2F9; /*#5F548E;*/
font-size: 32px;
display: block;
color: white;
font-style: normal;
font-weight: normal;
}
#desktop > div > ul afx-list-item i.dir:before{ --item-bg-odd: #E6E6E6;
display: block; --item-bg-even: #f5F5F5;
content: "\f07b\a"; --item-bg-active: #8685EF;/*#116cd6*/
font-family: "FontAwesome"; --item-bg-hover: #C8C2E7;
font-size: 32px;
color: #76D2F9;
font-weight: normal;
font-style: normal;
}
#systooltip { --border-primary:#a6a6a6;
border:1px solid #a6a6a6; --border-secondary: #a6a6a6;
border-radius: 3px; --border-tertiary: #5F548E;
padding-left:3px; --border-quaternary: #A6A6A6;
padding-right:3px;
box-shadow: 1px 1px 1px #9f9F9F;
background-color: #e7e7e7;
}
input { --shadow-primary: rgba(0,0,0,0.65);
outline: none;
padding: 2px;
border: 1px solid #a6a6a6;
background-color: #f6F6F6;
color: #414339;
border-radius: 5px;
box-sizing: border-box;
}
textarea {
color: #414339;
background-color: #f6F6F6;
outline: none;
border: 1px solid #a6a6a6;
box-sizing: border-box;
} }

View File

@ -0,0 +1,29 @@
afx-app-window div.afx-window-wrapper{
border:1px solid var(--border-primary);
box-shadow: 0px 3px 6px 0px var(--shadow-primary);
border-radius: 0px;
background-color:var(--background-primary);
}
afx-app-window.unactive > div.afx-window-wrapper{
box-shadow: none;
}
afx-app-window ul.afx-window-top{
border-bottom: 1px solid var(--border-primary);
}
afx-app-window ul li.afx-window-title{
text-align: left;
}
afx-app-window div.afx-window-content
{
background-color: var(--background-secondary);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
afx-app-window ul.afx-window-top button:hover
{
background-color: var(--background-secondary);
color: var(--text-primary);
}

View File

@ -0,0 +1,18 @@
afx-button button{
border: 1px solid var(--border-primary);
background-color: var(--background-tertiary);
color: var(--text-primary);
border-radius: 3px;
font-family: "Ubuntu";
}
afx-button button[disabled]{
color: var(--text-disable);
}
afx-button button:active, afx-button button.btactive {
background-color: var(--item-bg-active);
color: var(--text-tertiary);
border: 1px solid var(--border-secondary);
}

View File

@ -11,10 +11,14 @@ afx-calendar-view afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell
{ {
background-color: transparent; background-color: transparent;
} }
afx-calendar-view afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell
{
color:var(--text-primary);
}
afx-calendar-view afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell.afx-grid-cell-selected afx-calendar-view afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell.afx-grid-cell-selected
{ {
background-color: #116cd6; background-color: var(--item-bg-active);
color:white; color:var(--text-tertiary);
border-radius: 6px; border-radius: 6px;
} }

View File

@ -1,4 +1,4 @@
afx-color-picker canvas.color-palette, afx-color-picker div.color-sample{ afx-color-picker canvas.color-palette, afx-color-picker div.color-sample{
border: 1px solid #a6a6a6; border: 1px solid var(--border-primary);
/*border-radius: 3px;*/ /*border-radius: 3px;*/
} }

View File

@ -0,0 +1,27 @@
afx-apps-dock{
background-color:var(--background-primary);
padding:0;
padding-top: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-left:1px solid var(--border-primary);
border-right:1px solid var(--border-primary);
box-shadow: none;
}
afx-apps-dock afx-button > button:hover {
background-color: var(--item-bg-hover);
}
afx-apps-dock afx-button.plural > button:hover
{
border-top: 3px double var(--border-quaternary);
}
afx-apps-dock afx-button.selected > button {
background-color: var(--background-tertiary);
color: var(--text-primary);
border: 0;
border-bottom: 2px solid var(--border-tertiary);
}
afx-apps-dock afx-button.plural.selected > button {
border-top: 3px double var(--border-quaternary);
}

View File

@ -1,6 +1,6 @@
afx-file-view afx-label.status{ afx-file-view afx-label.status{
background-color: #464646; background-color: var(--background-tertiary);
border-top: 1px solid #262626; border-top: 1px solid var(--border-primary);
} }
afx-file-view afx-list-view > div.list-container > ul li{ afx-file-view afx-list-view > div.list-container > ul li{
@ -13,7 +13,7 @@ afx-file-view afx-list-view i.dir:before{
content: "\f07b"; content: "\f07b";
font-family: "FontAwesome"; font-family: "FontAwesome";
font-size: 35px; font-size: 35px;
color: #76D2F9; color: var(--icon-tertiary);
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@ -27,15 +27,16 @@ afx-file-view afx-list-view i.file:before{
content: "\f016"; content: "\f016";
font-family: "FontAwesome"; font-family: "FontAwesome";
font-size: 30px; font-size: 30px;
color: white; color: var(--text-primary);
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
} }
afx-file-view afx-list-view > div.list-container > ul > .afx-list-item > li.selected afx-file-view afx-list-view > div.list-container > ul > .afx-list-item > li.selected,
afx-file-view afx-list-view > div.list-container > ul > .afx-list-item > li.selected i.dir::before
{ {
background-color: #116cd6; background-color: var(--item-bg-active);
color:white; color:var(--text-tertiary);
border-radius: 6px; border-radius: 6px;
} }
@ -45,14 +46,14 @@ afx-file-view afx-grid-view{
afx-file-view afx-grid-view i.file:before{ afx-file-view afx-grid-view i.file:before{
content: "\f016"; content: "\f016";
font-family: "FontAwesome"; font-family: "FontAwesome";
color: white; color: var(--text-primary);
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
} }
afx-file-view afx-grid-view i.dir:before{ afx-file-view afx-grid-view i.dir:before{
content: "\f07b"; content: "\f07b";
font-family: "FontAwesome"; font-family: "FontAwesome";
color: #76D2F9; color: var(--icon-tertiary);
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
} }
@ -60,18 +61,18 @@ afx-file-view afx-grid-view i{
margin-right: 5px; margin-right: 5px;
} }
afx-file-view afx-grid-view afx-grid-row.afx-grid-row-selected i:before{ afx-file-view afx-grid-view afx-grid-row.afx-grid-row-selected i:before{
color:white; color:var(--text-tertiary);
} }
afx-file-view afx-tree-view .afx-tree-view-folder-close:before{ afx-file-view afx-tree-view .afx-tree-view-folder-close:before{
content: "\f07b"; content: "\f07b";
font-family: "FontAwesome"; font-family: "FontAwesome";
color:#76D2F9; color:var(--icon-tertiary);
} }
afx-file-view afx-tree-view .afx-tree-view-folder-open:before{ afx-file-view afx-tree-view .afx-tree-view-folder-open:before{
content: "\f07c"; content: "\f07c";
font-family: "FontAwesome"; font-family: "FontAwesome";
color:#76D2F9; color:var(--icon-tertiary);
} }
afx-file-view afx-tree-view .afx-tree-view-item:before{ afx-file-view afx-tree-view .afx-tree-view-item:before{
@ -86,13 +87,16 @@ afx-file-view afx-tree-view div.afx_tree_item_selected, afx-file-view afx-tree-v
} }
afx-file-view afx-tree-view div.afx_tree_item_selected ul{ afx-file-view afx-tree-view div.afx_tree_item_selected ul{
background-color: #116cd6; background-color: var(--item-bg-active);
color:white; color:var(--text-tertiary);
border-radius: 0; border-radius: 0;
} }
afx-file-view afx-tree-view div.afx_tree_item_selected i.file:before{ afx-file-view afx-tree-view div.afx_tree_item_selected i:before,
color:white; afx-file-view afx-tree-view div.afx_tree_item_selected .afx-tree-view-folder-close:before,
afx-file-view afx-tree-view div.afx_tree_item_selected .afx-tree-view-folder-open:before
{
color:var(--text-tertiary);
} }
afx-file-view afx-tree-view .afx_folder_item{ afx-file-view afx-tree-view .afx_folder_item{

View File

@ -0,0 +1,47 @@
/*afx-grid-view afx-grid-row:nth-child(even) afx-grid-cell
{
background-color: var(--item-bg-even);
}
afx-grid-view afx-grid-row:nth-child(odd) afx-grid-cell
{
background-color: var(--item-bg-odd);
}
afx-grid-view .grid_content_container {
background-color: var(--background-tertiary);
}
*/
afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell
{
background-color: var(--item-bg-active);
color:var(--text-tertiary);
}
afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell.afx-grid-cell-selected
{
font-weight: normal;
}
afx-grid-view .grid_row_header afx-grid-cell{
border:0;
}
afx-grid-view afx-grid-row.grid_row_header div{
border-top:1px solid var(--border-quaternary);
}
afx-grid-view afx-resizer.horizontal{
background-color: transparent;
border-left: 1px solid var(--border-primary);
border-right: 1px solid var(--border-primary);
/* border-left: 1px solid #cbcbcb; */
}
afx-grid-view .grid_row_header afx-grid-cell{
background-color: var(--background-secondary);
border-top: 1px solid var(--border-primary);
/*border-right: 1px solid #262626;*/
border-bottom: 1px solid var(--border-primary);
}

View File

@ -0,0 +1,20 @@
afx-input afx-label
{
font-size: 13px;
color: var(--text-secondary);
background-color: var(--background-tertiary);
}
afx-input input,
afx-input textarea
{
border-radius: 0;
border: 0;
border-bottom: 1px solid var(--border-primary);
background-color: var(--background-tertiary);;
}
afx-input input:focus,
afx-input textarea:focus
{
border-bottom: 1px solid var(--border-tertiary);
}

View File

@ -1,36 +1,41 @@
/*
afx-list-view > div.list-container > ul li{ afx-list-view > div.list-container > ul li{
background-color: #363636; background-color: var(--background-tertiary);
}
afx-list-view > div.list-container > ul .afx-list-item:nth-child(even) li{
background-color:#3b3b3b;
} }
afx-list-view > div.list-container > ul .afx-list-item:nth-child(even) li{
background-color:var(--item-bg-even);
}
afx-list-view > div.list-container > ul .afx-list-item:nth-child(odd) li{
background-color:var(--item-bg-odd);
}
*/
afx-list-view i.closable:before{ afx-list-view i.closable:before{
color: #868686; color: var(--icon-secondary);
} }
afx-list-view.dropdown > div.list-container > ul li:hover{ afx-list-view.dropdown > div.list-container > ul li:hover{
background-color: #464646; background-color: var(--item-bg-hover);
} }
afx-list-view > div.list-container > ul > .afx-list-item li.selected{ afx-list-view > div.list-container > ul > .afx-list-item li.selected{
background-color: #116cd6; background-color: var(--item-bg-active);
color:white; color:var(--text-tertiary);
} }
afx-list-view.dropdown > div.list-container > ul{ afx-list-view.dropdown > div.list-container > ul{
border:1px solid #262626; border:1px solid var(--border-primary);
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65); box-shadow: 0px 3px 6px 0px var(--shadow-primary);
border-radius: 3px; border-radius: 3px;
background-color: #363636; background-color: var(--background-secondary);
border-top-left-radius: 0px; border-top-left-radius: 0px;
} }
afx-list-view.dropdown div.list-container > div > afx-label afx-list-view.dropdown div.list-container > div > afx-label
{ {
border:1px solid #262626; border:1px solid var(--border-primary);
border-radius: 3px; border-radius: 3px;
background-color: #474747; background-color: var(--background-tertiary);
} }
afx-list-view.dropdown { afx-list-view.dropdown {
color: white; color: var(--text-primary);
background-color: transparent; background-color: transparent;
} }
@ -42,11 +47,11 @@ afx-list-view ul.complex-content{
afx-list-view ul.complex-content li{ afx-list-view ul.complex-content li{
padding:0; padding:0;
background-color: transparent; background-color: transparent;
color:#5e5f59; color:var(--text-disable);
list-style: none; list-style: none;
} }
afx-list-view > div.list-container > ul li.selected ul.complex-content li{ afx-list-view > div.list-container > ul li.selected ul.complex-content li{
color:white; color:var(--text-tertiary);
} }
afx-list-view div.button_container afx-button{ afx-list-view div.button_container afx-button{
margin-right: 2px; margin-right: 2px;

View File

@ -7,13 +7,13 @@ afx-toast-notification div[data-id="toast_container"] div[data-id="toast_header"
afx-toast-notification div[data-id="toast_container"] div[data-id="toast_header"]:hover afx-toast-notification div[data-id="toast_container"] div[data-id="toast_header"]:hover
{ {
color: orangered; color: var(--text-warning);
} }
afx-toast-notification div[data-id="toast_container"] afx-toast-notification div[data-id="toast_container"]
{ {
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65); box-shadow: 0px 3px 6px 0px var(--shadow-primary);
border:1px solid #262626; border:1px solid var(--border-primary);
background-color:#3b3b3b; background-color:var(--item-bg-even);
border-radius: 6px; border-radius: 6px;
} }

View File

@ -1,5 +1,5 @@
afx-nspinner ul li{ afx-nspinner ul li{
border: 1px solid #262626; border: 1px solid var(--border-primary);
} }
afx-nspinner ul li.incr{ afx-nspinner ul li.incr{
@ -14,5 +14,5 @@ afx-nspinner ul li.decr{
} }
afx-nspinner ul li:hover{ afx-nspinner ul li:hover{
color:#116cD6; color:var(--item-bg-active);
} }

View File

@ -0,0 +1,3 @@
afx-overlay {
background-color: var(--background-overlay);
}

View File

@ -1,13 +1,13 @@
afx-resizer.vertical { afx-resizer.vertical {
background-color: transparent; background-color: transparent;
border-top: 1px solid #262626; border-top: 1px solid var(--border-primary);
} }
afx-resizer.horizontal { afx-resizer.horizontal {
background-color: transparent; background-color: transparent;
border-left: 1px solid #262626; border-left: 1px solid var(--border-primary);
} }
afx-resizer.horizontal:hover, afx-resizer.vertical:hover afx-resizer.horizontal:hover, afx-resizer.vertical:hover
{ {
background-color: #116cd6; background-color: var(--item-bg-active);
} }

View File

@ -1,17 +1,17 @@
afx-slider div.container{ afx-slider div.container{
border-radius: 3px; border-radius: 3px;
background-color: #868686; background-color: var(--background-quaternary);
} }
afx-slider div.progress { afx-slider div.progress {
background-color: #116cd6; background-color: var(--item-bg-active);
border-radius: 3px; border-radius: 3px;
} }
afx-slider div.dragpoint { afx-slider div.dragpoint {
border:1px solid #262626; border:1px solid var(--border-primary);
background-color:#868686; background-color:var(--background-quaternary);
} }
afx-slider div.dragpoint::before afx-slider div.dragpoint::before
@ -22,7 +22,7 @@ afx-slider div.dragpoint::before
left: 0; left: 0;
right: 0; right: 0;
text-align: center; text-align: center;
color:#868686; color:var(--text-disable);
bottom: -15px; bottom: -15px;
display: block; display: block;
height: 20px; height: 20px;

View File

@ -1,16 +1,16 @@
afx-list-view > div.list-container > ul afx-stack-menu-item.afx-list-item li:hover { afx-list-view > div.list-container > ul afx-stack-menu-item.afx-list-item li:hover {
background-color: #464646; background-color: var(--item-bg-hover);
} }
afx-list-view > div.list-container > ul afx-stack-menu-item.afx-list-item li.selected afx-switch span:before afx-list-view > div.list-container > ul afx-stack-menu-item.afx-list-item li.selected afx-switch span:before
{ {
color:white; color:var(--text-tertiary);
} }
afx-list-view > div.list-container > ul > afx-stack-menu-item.afx-list-item > li.selected{ afx-list-view > div.list-container > ul > afx-stack-menu-item.afx-list-item > li.selected{
background-color: #116cd6; background-color: var(--item-bg-active);
color:white; color:var(--text-tertiary);
} }
afx-stack-menu > afx-button button afx-stack-menu > afx-button button
@ -18,9 +18,9 @@ afx-stack-menu > afx-button button
border-radius: 0; border-radius: 0;
} }
afx-stack-menu.context { afx-stack-menu.context {
border:1px solid #262626; border:1px solid var(--border-primary);
border-radius: 5px; border-radius: 5px;
border-top-left-radius: 0px; border-top-left-radius: 0px;
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65); box-shadow: 0px 3px 6px 0px var(--shadow-primary);
background-color: #363636; background-color: var(--background-secondary);
} }

View File

@ -11,7 +11,7 @@ afx-switch span:before{
} }
afx-switch span.swon:before{ afx-switch span.swon:before{
content: "\f205"; content: "\f205";
color: #116cd6; color: var(--item-bg-active);
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
} }

View File

@ -1,12 +1,12 @@
afx-sys-panel > div{ afx-sys-panel > div{
background-color: #363636; background-color: var(--background-secondary);
border-top: 1px solid #262626; border-top: 1px solid var(--border-primary);
box-shadow: none; box-shadow: none;
} }
afx-sys-panel .afx-panel-os-menu button afx-sys-panel .afx-panel-os-menu button
{ {
background-color: #5F548E; background-color: var(--antos-ant-color);
border-radius: 0; border-radius: 0;
border: 0; border: 0;
} }
@ -17,23 +17,22 @@ afx-sys-panel .afx-panel-os-menu button .label-text
} }
afx-sys-panel .afx-panel-os-menu { afx-sys-panel .afx-panel-os-menu {
color: white; color: var(--text-primary);
} }
afx-sys-panel .afx-panel-os-stray button{ afx-sys-panel .afx-panel-os-stray button{
border-radius: 0; border-radius: 0;
border: 0; border: 0;
} }
afx-sys-panel afx-overlay afx-sys-panel afx-overlay
{ {
background-color: #363636; background-color: var(--background-secondary);
border: 1px solid #262626; border: 1px solid var(--border-primary);
} }
afx-sys-panel afx-list-view[data-id="applist"], afx-sys-panel afx-list-view[data-id="applist"],
afx-sys-panel afx-tab-bar[data-id="catlist"] afx-sys-panel afx-tab-bar[data-id="catlist"]
{ {
border-top: 1px solid #262626; border-top: 1px solid var(--border-primary);
} }
afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li
{ {
@ -45,21 +44,21 @@ afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li
afx-sys-panel afx-hbox[data-id="btlist"] afx-button button afx-sys-panel afx-hbox[data-id="btlist"] afx-button button
{ {
border: 0; border: 0;
border-left: 1px solid #262626; border-left: 1px solid var(--border-primary);
border-top: 1px solid #262626; border-top: 1px solid var(--border-primary);
font-size: 24px; font-size: 24px;
} }
afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul .afx-list-item li:hover afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul .afx-list-item li:hover
{ {
background-color: #cecece; background-color: var(--antos-ant-color)/*#cecece*/;
color: #262626; color: var(--text-tertiary);
border-radius: 10px; border-radius: 10px;
} }
afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul .afx-list-item li.selected afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul .afx-list-item li.selected
{ {
background-color: #116cd6; background-color: var(--item-bg-active);
color:white; color:var(--text-tertiary);
} }
afx-sys-panel afx-tab-bar[data-id="catlist"] .afx-list-view i.label-text { afx-sys-panel afx-tab-bar[data-id="catlist"] .afx-list-view i.label-text {
@ -75,7 +74,7 @@ afx-sys-panel div[data-id="searchicon"]:before{
content: "\f002"; content: "\f002";
display: block; display: block;
background-color:transparent; background-color:transparent;
color:#afafaf; color:var(--text-disable);
font-family: "FontAwesome"; font-family: "FontAwesome";
padding-left:3px; padding-left:3px;
font-size: 25px; font-size: 25px;
@ -83,7 +82,7 @@ afx-sys-panel div[data-id="searchicon"]:before{
afx-sys-panel input{ afx-sys-panel input{
border:0; border:0;
height: 30px; height: 30px;
color:#afafaf; color:var(--text-disable);
font-size: 16px; font-size: 16px;
background-color: transparent; background-color: transparent;
} }

View File

@ -0,0 +1,14 @@
afx-tab-bar[dir="horizontal"] afx-list-view > div.list-container > ul > afx-list-item > li.selected
{
background-color: var(--background-tertiary);
color:var(--text-primary);
border-bottom:2px solid var(--border-tertiary); /* #262626;*/
}
afx-tab-bar[dir="vertical"] afx-list-view > div.list-container > ul > afx-list-item > li.selected
{
background-color: var(--background-tertiary);
color:var(--text-primary);
border-right:2px solid var(--border-tertiary); /* #262626;*/
}

View File

@ -0,0 +1,13 @@
afx-tree-view div.afx_tree_item_selected{
background-color: var(--item-bg-active);
color:var(--text-tertiary);
}
afx-tree-view div.afx_tree_item_selected:hover{
background-color: var(--item-bg-active);
color:var(--text-tertiary);
}
afx-tree-view .afx_folder_item{
font-weight: bold;
}

View File

@ -0,0 +1,66 @@
html,body{
color: var(--text-primary);
}
#desktop > div > ul afx-list-item {
color:var(--text-primary);
}
#desktop > div > ul afx-list-item li.selected {
background-color: var(--item-bg-active);
color:var(--text-tertiary);
border-radius: 6px;
}
#desktop > div > ul afx-list-item i.file:before{
content: "\f15b\a";
font-family: "FontAwesome";
font-size: 32px;
display: block;
color: var(--icon-primary);
font-style: normal;
font-weight: normal;
}
#desktop > div > ul afx-list-item i.dir:before{
display: block;
content: "\f07b\a";
font-family: "FontAwesome";
font-size: 32px;
color: var(--icon-tertiary);
font-weight: normal;
font-style: normal;
}
#systooltip {
border:1px solid var(--border-secondary);
border-radius: 3px;
padding-left:3px;
padding-right:3px;
box-shadow: none;
background-color: var(--background-tertiary);
}
input {
outline: none;
padding: 2px;
border: 1px solid var(--border-primary);
background-color:var(--background-tertiary);
color: var(--text-primary);
border-radius: 3px;
box-sizing: border-box;
}
textarea {
color: var(--text-primary);
background-color: var(--background-tertiary);
outline: none;
border: 1px solid var(--border-primary);
box-sizing: border-box;
}
a:link,
a:visited,
a:hover
{
color: var(--antos-ant-color);
}