Apply skin colors to buttons, and other small improvements

pull/5742/merge
Aleksander Machniak 8 years ago
parent 32917f5944
commit 55cd6b190b

@ -44,7 +44,7 @@
@color-taskmenu-button-background-hover: lighten(@color-taskmenu-background, 10%);
@color-taskmenu-button-action-background-hover: lighten(@color-taskmenu-button-action-background, 10%);
@color-taskmenu-button-special-background-hover:lighten(@color-taskmenu-button-special-background, 10%);
@color-taskmenu-button-logout-hover: #ff1a1a;
@color-taskmenu-button-logout-hover: @color-error;
// Toolbar
@ -56,14 +56,14 @@
// Toolbar menu
@color-toolbarmenu-hover: #fff;
@color-toolbarmenu-hover-background: darken(@color-main, 20%);
@color-toolbarmenu-hover-background: @color-main;
// Listings
@color-list: @color-font;
@color-list-selected: inherit;
@color-list-selected-background: tint(@color-main, 96%);
@color-list-flagged: #ff5c33;
@color-list-flagged: @color-error;
@color-list-deleted: #ccc;
@color-list-secondary: #666;
@color-list-droptarget-background: #ffffcc;
@ -133,6 +133,14 @@
@color-image-upload-background: #f6f6f6;
@color-btn-secondary: #fff;
@color-btn-secondary-background: #7f8a90;
@color-btn-primary: #fff;
@color-btn-primary-background: @color-main;
@color-btn-danger: #fff;
@color-btn-danger-background: @color-error;
@color-blockquote-background: #f6f6f6;
@color-blockquote-0: blue;
@color-blockquote-1: green;

@ -120,3 +120,68 @@ html.touch {
box-shadow: none;
}
}
/*** Bootstrap button style overrides ***/
.btn-secondary {
color: @color-btn-secondary;
background: @color-btn-secondary-background;
border-color: @color-btn-secondary-background;
&:focus {
box-shadow: 0 0 0 .2rem fade(@color-btn-secondary-background, 50%);
}
&:hover {
background: darken(@color-btn-secondary-background, 8%);
border-color: darken(@color-btn-secondary-background, 10%);
}
&:not([disabled]):not(.disabled):active {
background: darken(@color-btn-secondary-background, 11%);
border-color: darken(@color-btn-secondary-background, 13%);
box-shadow: 0 0 0 .2rem fade(@color-btn-secondary-background, 53%);
}
}
.btn-primary {
color: @color-btn-primary;
background: @color-btn-primary-background;
border-color: @color-btn-primary-background;
&:focus {
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 50%);
}
&:hover {
background: darken(@color-btn-primary-background, 8%);
border-color: darken(@color-btn-primary-background, 10%);
}
&:not([disabled]):not(.disabled):active {
background: darken(@color-btn-primary-background, 11%);
border-color: darken(@color-btn-primary-background, 13%);
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 53%);
}
}
.btn-danger {
color: @color-btn-danger;
background: @color-btn-danger-background;
border-color: @color-btn-danger-background;
&:focus {
box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 50%);
}
&:hover {
background: darken(@color-btn-danger-background, 8%);
border-color: darken(@color-btn-danger-background, 10%);
}
&:not([disabled]):not(.disabled):active {
background: darken(@color-btn-danger-background, 11%);
border-color: darken(@color-btn-danger-background, 13%);
box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 53%);
}
}

@ -586,7 +586,9 @@ html.touch .popupmenu.form {
margin: 0 !important;
}
.input-group-addon {
a.input-group-addon {
padding: .375rem .5rem;
&.reset:before {
&:extend(.font-icon-class);
content: @fa-var-trash-o;

@ -42,8 +42,6 @@
border-bottom: 1px solid @color-dialog-header-border;
button {
margin-right: .25rem;
&:before {
margin: 0;
}
@ -64,7 +62,8 @@
right: 0;
top: 0;
position: absolute;
height: @layout-header-height;
height: (@layout-header-height - .7rem);
margin: .25rem;
cursor: pointer;
&:before {
@ -90,6 +89,11 @@
button {
.overflow-ellipsis;
min-width: 5rem;
margin: .65rem .3rem;
&:last-child {
margin-right: 0;
}
}
}
}

@ -16,6 +16,7 @@
height: 100%;
a {
.overflow-ellipsis;
text-decoration: none;
padding: .45rem 0;
display: block;
@ -80,6 +81,7 @@
span.inner {
font-size: 90%;
padding: 0 .1em;
}
}
@ -150,12 +152,6 @@
}
@media screen and (max-width: @screen-width-xs) {
a {
height: auto;
margin-top: 1rem;
background: transparent;
}
a,
a:before {
height: 2.25rem;
@ -164,6 +160,12 @@
font-size: 1.25em;
}
a {
height: auto;
margin-top: 1rem;
background: transparent;
}
a:hover {
background: transparent !important;
}
@ -183,12 +185,6 @@
}
}
@media screen and (min-width: (@screen-width-xs + 1px)) {
.menu-header {
display: none;
}
}
.menu-header {
border-bottom: 1px solid @color-taskmenu-button;
height: @layout-touch-header-height;
@ -206,6 +202,7 @@
line-height: @layout-touch-header-height;
height: @layout-touch-header-height;
width: auto;
margin-right: .25rem;
}
&:hover {
@ -213,4 +210,10 @@
}
}
}
@media screen and (min-width: (@screen-width-xs + 1px)) {
.menu-header {
display: none;
}
}
}

Loading…
Cancel
Save