Style info bar and calendar
Satyajit Sahoo
parent
005e5f8ee9
commit
cceeb065f8
|
|
@ -0,0 +1,24 @@
|
|||
@import "functions";
|
||||
@import "global";
|
||||
|
||||
|
||||
/**********
|
||||
! Calendar
|
||||
***********/
|
||||
|
||||
GtkCalendar {
|
||||
padding: $spacing;
|
||||
outline-offset: -1px;
|
||||
|
||||
&:inconsistent { color: mix($fg_color, $bg_color, 0.5); }
|
||||
|
||||
&.view, &.highlight, &.header, &.button {
|
||||
&, &:hover, &:insensitive {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight { color: $selected_bg_color; }
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
@import "functions";
|
||||
@import "global";
|
||||
|
||||
|
||||
/*********
|
||||
! Infobar
|
||||
**********/
|
||||
|
||||
GtkInfoBar {
|
||||
border: none;
|
||||
|
||||
$types: (
|
||||
info: ( $info_fg_color, $info_bg_color ),
|
||||
warning: ( $warning_fg_color, $warning_bg_color ),
|
||||
question: ( $question_fg_color, $question_bg_color ),
|
||||
error: ( $error_fg_color, $error_bg_color ),
|
||||
);
|
||||
|
||||
|
||||
@each $type, $colors in $types {
|
||||
$fg_color: nth($colors, 1);
|
||||
$bg_color: nth($colors, 2);
|
||||
|
||||
&.#{$type} {
|
||||
border: 1px solid shade($bg_color, 0.8);
|
||||
background-color: $bg_color;
|
||||
background-image: none;
|
||||
color: $fg_color;
|
||||
|
||||
.button {
|
||||
@include button($bg_color, $fg_color);
|
||||
|
||||
&.close {
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
|
||||
&:focus, &:hover {
|
||||
border: 1px solid alpha(black, 0.3);
|
||||
background-color: alpha(white, 0.2);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active, &:checked, &:active:hover, &:checked:hover {
|
||||
border: 1px solid alpha(black, 0.3);
|
||||
background-color: alpha(black, 0.1);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -12,247 +12,9 @@
|
|||
@import "progress";
|
||||
@import "spinner";
|
||||
@import "window";
|
||||
@import "calendar";
|
||||
@import "infobar";
|
||||
|
||||
/***********
|
||||
* calendar *
|
||||
************/
|
||||
GtkCalendar {
|
||||
padding: 4px;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
GtkCalendar:inconsistent {
|
||||
color: mix($fg_color, $bg_color, 0.5);
|
||||
}
|
||||
|
||||
GtkCalendar.view,
|
||||
GtkCalendar.header,
|
||||
GtkCalendar.button,
|
||||
GtkCalendar.button:hover,
|
||||
GtkCalendar.button:insensitive {
|
||||
border-width: 0;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.highlight,
|
||||
GtkCalendar.highlight {
|
||||
border-width: 0;
|
||||
background-color: transparent;
|
||||
color: $selected_bg_color;
|
||||
}
|
||||
|
||||
/***********
|
||||
* infobar *
|
||||
***********/
|
||||
GtkInfoBar {
|
||||
border-width: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.info {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: shade($info_bg_color, 0.8);
|
||||
background-color: $info_bg_color;
|
||||
background-image: none;
|
||||
color: $info_fg_color;
|
||||
}
|
||||
|
||||
.info .button {
|
||||
border-top-color: shade($info_bg_color, 0.8);
|
||||
border-right-color: shade($info_bg_color, 0.72);
|
||||
border-left-color: shade($info_bg_color, 0.72);
|
||||
border-bottom-color: shade($info_bg_color, 0.7);
|
||||
background-color: shade($info_bg_color, 1.08);
|
||||
color: $info_fg_color;
|
||||
}
|
||||
|
||||
.info .button:hover {
|
||||
border-top-color: shade($info_bg_color, 0.85);
|
||||
border-right-color: shade($info_bg_color, 0.78);
|
||||
border-left-color: shade($info_bg_color, 0.78);
|
||||
border-bottom-color: shade($info_bg_color, 0.7);
|
||||
background-color: shade($info_bg_color, 1.10);
|
||||
}
|
||||
|
||||
.info .button:active {
|
||||
border-color: shade($info_bg_color, 0.6);
|
||||
background-color: shade($info_bg_color, 0.95);
|
||||
}
|
||||
|
||||
.info .button:active:hover {
|
||||
border-top-color: shade($info_bg_color, 0.85);
|
||||
border-right-color: shade($info_bg_color, 0.78);
|
||||
border-left-color: shade($info_bg_color, 0.78);
|
||||
border-bottom-color: shade($info_bg_color, 0.7);
|
||||
}
|
||||
|
||||
.info .button.close {
|
||||
color: $info_fg_color;
|
||||
}
|
||||
|
||||
.info .button.close:hover {
|
||||
background-color: alpha(white, 0.2);
|
||||
}
|
||||
|
||||
.info .button.close:active {
|
||||
color: $info_fg_color;
|
||||
background-color: alpha(black, 0.1);
|
||||
}
|
||||
|
||||
.warning {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: shade($warning_bg_color, 0.8);
|
||||
background-color: $warning_bg_color;
|
||||
background-image: none;
|
||||
color: $warning_fg_color;
|
||||
}
|
||||
|
||||
.warning .button {
|
||||
border-top-color: shade($warning_bg_color, 0.8);
|
||||
border-right-color: shade($warning_bg_color, 0.72);
|
||||
border-left-color: shade($warning_bg_color, 0.72);
|
||||
border-bottom-color: shade($warning_bg_color, 0.7);
|
||||
background-color: shade($warning_bg_color, 1.08);
|
||||
color: $warning_fg_color;
|
||||
}
|
||||
|
||||
.warning .button:hover {
|
||||
border-top-color: shade($warning_bg_color, 0.85);
|
||||
border-right-color: shade($warning_bg_color, 0.78);
|
||||
border-left-color: shade($warning_bg_color, 0.78);
|
||||
border-bottom-color: shade($warning_bg_color, 0.7);
|
||||
background-color: shade($warning_bg_color, 1.10);
|
||||
}
|
||||
|
||||
.warning .button:active {
|
||||
border-color: shade($warning_bg_color, 0.6);
|
||||
background-color: shade($warning_bg_color, 0.95);
|
||||
}
|
||||
|
||||
.warning .button:active:hover {
|
||||
border-top-color: shade($warning_bg_color, 0.85);
|
||||
border-right-color: shade($warning_bg_color, 0.78);
|
||||
border-left-color: shade($warning_bg_color, 0.78);
|
||||
border-bottom-color: shade($warning_bg_color, 0.7);
|
||||
}
|
||||
|
||||
.warning .button.close {
|
||||
color: $warning_fg_color;
|
||||
}
|
||||
|
||||
.warning .button.close:hover {
|
||||
background-color: alpha(white, 0.2);
|
||||
}
|
||||
|
||||
.warning .button.close:active {
|
||||
color: $warning_fg_color;
|
||||
background-color: alpha(black, 0.1);
|
||||
}
|
||||
|
||||
.question {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: shade($question_bg_color, 0.8);
|
||||
background-color: $question_bg_color;
|
||||
background-image: none;
|
||||
color: $question_fg_color;
|
||||
}
|
||||
|
||||
.question .button {
|
||||
border-top-color: shade($question_bg_color, 0.8);
|
||||
border-right-color: shade($question_bg_color, 0.72);
|
||||
border-left-color: shade($question_bg_color, 0.72);
|
||||
border-bottom-color: shade($question_bg_color, 0.7);
|
||||
background-color: shade($question_bg_color, 1.08);
|
||||
color: $question_fg_color;
|
||||
}
|
||||
|
||||
.question .button:hover {
|
||||
border-top-color: shade($question_bg_color, 0.85);
|
||||
border-right-color: shade($question_bg_color, 0.78);
|
||||
border-left-color: shade($question_bg_color, 0.78);
|
||||
border-bottom-color: shade($question_bg_color, 0.7);
|
||||
background-color: shade($question_bg_color, 1.10);
|
||||
}
|
||||
|
||||
.question .button:active {
|
||||
border-color: shade($question_bg_color, 0.6);
|
||||
background-color: shade($question_bg_color, 0.95);
|
||||
}
|
||||
|
||||
.question .button:active:hover {
|
||||
border-top-color: shade($question_bg_color, 0.85);
|
||||
border-right-color: shade($question_bg_color, 0.78);
|
||||
border-left-color: shade($question_bg_color, 0.78);
|
||||
border-bottom-color: shade($question_bg_color, 0.7);
|
||||
}
|
||||
|
||||
.question .button.close {
|
||||
color: $question_fg_color;
|
||||
}
|
||||
|
||||
.question .button.close:hover {
|
||||
background-color: alpha(white, 0.2);
|
||||
}
|
||||
|
||||
.question .button.close:active {
|
||||
color: $question_fg_color;
|
||||
background-color: alpha(black, 0.1);
|
||||
}
|
||||
|
||||
.error {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: shade($error_bg_color, 0.8);
|
||||
background-color: $error_bg_color;
|
||||
background-image: none;
|
||||
color: $error_fg_color;
|
||||
}
|
||||
|
||||
.error .button {
|
||||
border-top-color: shade($error_bg_color, 0.8);
|
||||
border-right-color: shade($error_bg_color, 0.72);
|
||||
border-left-color: shade($error_bg_color, 0.72);
|
||||
border-bottom-color: shade($error_bg_color, 0.7);
|
||||
background-color: shade($error_bg_color, 1.08);
|
||||
color: $error_fg_color;
|
||||
}
|
||||
|
||||
.error .button:hover {
|
||||
border-top-color: shade($error_bg_color, 0.85);
|
||||
border-right-color: shade($error_bg_color, 0.78);
|
||||
border-left-color: shade($error_bg_color, 0.78);
|
||||
border-bottom-color: shade($error_bg_color, 0.7);
|
||||
background-color: shade($error_bg_color, 1.10);
|
||||
}
|
||||
|
||||
.error .button:active {
|
||||
border-color: shade($error_bg_color, 0.6);
|
||||
background-color: shade($error_bg_color, 0.95);
|
||||
}
|
||||
|
||||
.error .button:active:hover {
|
||||
border-top-color: shade($error_bg_color, 0.85);
|
||||
border-right-color: shade($error_bg_color, 0.78);
|
||||
border-left-color: shade($error_bg_color, 0.78);
|
||||
border-bottom-color: shade($error_bg_color, 0.7);
|
||||
}
|
||||
|
||||
.error .button.close {
|
||||
color: $error_fg_color;
|
||||
}
|
||||
|
||||
.error .button.close:hover {
|
||||
background-color: alpha(white, 0.2);
|
||||
}
|
||||
|
||||
.error .button.close:active {
|
||||
color: $error_fg_color;
|
||||
background-color: alpha(black, 0.1);
|
||||
}
|
||||
|
||||
/*****************
|
||||
* miscellaneous *
|
||||
|
|
|
|||
Loading…
Reference in New Issue