Unify color variable names

pull/5742/merge
Aleksander Machniak 8 years ago
parent 4617402688
commit c4598d378b

@ -1,40 +1,45 @@
// Left menu // Left menu
@taskmenu-background-color: #222; @color-taskmenu-background: #222;
@taskmenu-button-color: skyblue; @color-taskmenu-button: skyblue;
@taskmenu-selected-button-color: #1a7599; @color-taskmenu-selected-button: #1a7599;
@taskmenu-action-button-color: #ffffb3; @color-taskmenu-action-button: #ffffb3;
@taskmenu-special-button-color: grey; @color-taskmenu-special-button: grey;
@color-taskmenu-button-hover: lighten(@color-taskmenu-button, 10%);
@color-taskmenu-action-button-hover: lighten(@color-taskmenu-action-button, 10%);
@color-taskmenu-special-button-hover: lighten(@color-taskmenu-special-button, 10%);
@color-taskmenu-logout-button-hover: red;
@taskmenu-button-hover-color: lighten(@taskmenu-button-color, 10%);
@taskmenu-action-button-hover-color: lighten(@taskmenu-action-button-color, 10%);
@taskmenu-special-button-hover-color: lighten(@taskmenu-special-button-color, 10%);
@taskmenu-logout-button-hover-color: red;
// Layout elements // Layout elements
@layout-border-color: #ddd; @color-layout-border: #ddd;
@layout-sidebar-background-color: #fff; @color-layout-sidebar-background: #fff;
@layout-list-background-color: #fff; @color-layout-list-background: #fff;
@layout-content-background-color: #fff; @color-layout-content-background: #fff;
@layout-header-background-color: #f9f9f9; @color-layout-header-background: #f9f9f9;
@color-layout-header-button: #0275d8;
@layout-header-button-color: #0275d8; @color-searchbar-icon-active: green;
@badge-font-color: #fff; // Listings
@searchbar-icon-active-color: green; @color-list: black;
@color-list-selected: inherit;
@color-list-selected-background: #f9f9f9;
@color-list-focus-indicator: #ccc;
@color-list-badge: #fff;
@color-list-recent: blue;
@color-list-recent-badge: #fff;
@color-list-recent-badge-background: @color-list-recent;
// Listings
@list-color: black;
@list-selected-color: inherit;
@list-selected-color-background: #f9f9f9;
@list-focus-indicator-color: #ccc;
// Toolbar menu // Toolbar menu
@toolbarmenu-hover-color: white; @color-toolbarmenu-hover: white;
@toolbarmenu-hover-color-background: blue; @color-toolbarmenu-hover-background: blue;
// Drag-n-drop layer // Drag-n-drop layer
@drag-layer-color: white; @color-drag-layer: white;
@drag-layer-color-background: #444; @color-drag-layer-background: #444;

@ -62,7 +62,7 @@ body > #layout {
flex-direction: column; flex-direction: column;
min-width: 300px; min-width: 300px;
max-width: 30%; max-width: 30%;
border-right: 1px solid @layout-border-color; border-right: 1px solid @color-layout-border;
} }
&.content { &.content {
@ -70,7 +70,7 @@ body > #layout {
flex-grow: 6; flex-grow: 6;
flex-direction: column; flex-direction: column;
min-width: 50%; min-width: 50%;
background-color: @layout-content-background-color; background-color: @color-layout-content-background;
& > iframe, & > iframe,
& > .content, & > .content,
@ -85,17 +85,17 @@ body > #layout {
&.sidebar { &.sidebar {
min-width: 220px; min-width: 220px;
background-color: @layout-sidebar-background-color; background-color: @color-layout-sidebar-background;
} }
&.list { &.list {
min-width: 300px; min-width: 300px;
background-color: @layout-list-background-color; background-color: @color-layout-list-background;
} }
&.menu { &.menu {
width: @taskmenu-width; width: @taskmenu-width;
background-color: @taskmenu-background-color; background-color: @color-taskmenu-background;
a, a,
a:before { a:before {
@ -114,7 +114,7 @@ body > #layout {
& > .header, & > .header,
& > .footer { & > .footer {
background-color: @layout-header-background-color; background-color: @color-layout-header-background;
font-size: 1rem; font-size: 1rem;
font-weight: bold; font-weight: bold;
line-height: 2.5rem; line-height: 2.5rem;

@ -142,9 +142,9 @@ html.iframe body {
min-width: 260px; min-width: 260px;
width: auto !important; width: auto !important;
width: 260px; width: 260px;
background: @drag-layer-color-background; background: @color-drag-layer-background;
z-index: 250; z-index: 250;
color: @drag-layer-color; color: @color-drag-layer;
white-space: nowrap; white-space: nowrap;
opacity: 0.92; opacity: 0.92;
} }

@ -20,7 +20,7 @@ a.button {
} }
.header > .buttons > button.btn { .header > .buttons > button.btn {
color: @layout-header-button-color; color: @color-layout-header-button;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
padding: 0 0.25em; padding: 0 0.25em;

@ -18,7 +18,7 @@
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
line-height: 2.4em; line-height: 2.4em;
color: @list-color; color: @color-list;
} }
tbody td { tbody td {
@ -28,8 +28,8 @@
li.selected, li.selected,
tr.selected td { tr.selected td {
color: @list-selected-color; color: @color-list-selected;
background-color: @list-selected-color-background; background-color: @color-list-selected-background;
} }
td.selection { td.selection {
@ -47,7 +47,7 @@
border-left: 2px solid transparent; border-left: 2px solid transparent;
} }
&.focus tbody tr.focused > td:first-child { &.focus tbody tr.focused > td:first-child {
border-left: 2px solid @list-focus-indicator-color; border-left: 2px solid @color-list-focus-indicator;
} }
} }
@ -219,8 +219,8 @@ ul.treelist li {
} }
&.selected > a { &.selected > a {
color: @list-selected-color; color: @color-list-selected;
background-color: @list-selected-color-background; background-color: @color-list-selected-background;
} }
&.selected { &.selected {
@ -264,6 +264,17 @@ ul.treelist li {
.folderlist { .folderlist {
li { li {
&.mailbox { &.mailbox {
&.unread {
/* TODO */
& > a {
padding-right: 2.5em;
}
}
&.recent {
color: @color-list-recent;
}
.unreadcount { .unreadcount {
position: absolute; position: absolute;
top: 0; top: 0;
@ -274,28 +285,18 @@ ul.treelist li {
padding: 0 0.3em; padding: 0 0.3em;
background: /* todo */ #1e70bf; background: /* todo */ #1e70bf;
border-radius: 0.4em; border-radius: 0.4em;
color: @badge-font-color; color: @color-list-badge;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
&.selected .unreadcount { &.selected .unreadcount {
background: /* todo */; /* todo */;
} }
&.recent > .unreadcount { &.recent > .unreadcount {
background: /* todo */; background: @color-list-recent-badge;
} color: @color-list-recent-badge-background;
&.unread {
/* TODO */
& > a {
padding-right: 2.5em;
}
}
&.recent {
/* TODO */
} }
} }

@ -5,7 +5,7 @@
display: table; display: table;
text-align: right; text-align: right;
position: absolute; position: absolute;
background-color: @layout-header-background-color; background-color: @color-layout-header-background;
z-index: 10; z-index: 10;
top: 0; top: 0;
right: 0; right: 0;
@ -39,7 +39,7 @@
a { a {
&.button.search.active { &.button.search.active {
color: @searchbar-icon-active-color; color: @color-searchbar-icon-active;
} }
&.button.reset:before { &.button.reset:before {
content: @fa-var-remove; content: @fa-var-remove;

@ -10,14 +10,14 @@
display: block; display: block;
width: 60px; width: 60px;
text-align: center; text-align: center;
color: @taskmenu-button-color; color: @color-taskmenu-button;
&:hover { &:hover {
color: @taskmenu-button-hover-color; color: @color-taskmenu-button-hover;
} }
&.selected { &.selected {
color: @taskmenu-selected-button-color; color: @color-taskmenu-selected-button;
} }
&:before { &:before {
@ -45,7 +45,7 @@
content: @fa-var-question; content: @fa-var-question;
} }
&.logout:hover { &.logout:hover {
color: @taskmenu-logout-button-hover-color; color: @color-taskmenu-logout-button-hover;
} }
&.refresh:before { &.refresh:before {
content: @fa-var-refresh; content: @fa-var-refresh;
@ -65,20 +65,20 @@
} }
a { a {
color: @taskmenu-special-button-color; color: @color-taskmenu-special-button;
&:hover { &:hover {
color: @taskmenu-special-button-hover-color; color: @color-taskmenu-special-button-hover;
} }
} }
} }
.action-buttons { .action-buttons {
a { a {
color: @taskmenu-action-button-color; color: @color-taskmenu-action-button;
&:hover { &:hover {
color: @taskmenu-action-button-hover-color; color: @color-taskmenu-action-button-hover;
} }
} }
} }

@ -170,8 +170,8 @@
opacity: 1; opacity: 1;
&:hover { &:hover {
color: @toolbarmenu-hover-color; color: @color-toolbarmenu-hover;
background-color: @toolbarmenu-hover-color-background; background-color: @color-toolbarmenu-hover-background;
} }
} }
} }

Loading…
Cancel
Save