NewsBlur/media/css/controls/controls.css

172 lines
4 KiB
CSS
Raw Normal View History

ul.segmented-control {
list-style-type: none;
2013-01-31 16:50:08 -08:00
width: auto;
padding: 1px;
margin: 0 auto;
2013-01-31 16:50:08 -08:00
clear: none;
display: inline-block;
color: white;
text-align: center;
border-radius: 4px;
2020-12-16 13:09:51 -05:00
transition: 0.14s ease-in-out background;
}
.segmented-control ::-moz-selection {
background: transparent;
}
.segmented-control ::selection {
background: transparent;
}
2020-12-16 13:09:51 -05:00
.segmented-control:hover {
background-color: #e5e6e2;
}
.segmented-control li {
background: none;
float: left;
2020-12-16 13:09:51 -05:00
margin: 0 2px 0 0;
cursor: pointer;
padding: 0;
2013-01-31 16:50:08 -08:00
clear: none;
text-align: center;
2020-12-16 13:09:51 -05:00
border-radius: 4px;
2013-03-19 12:45:50 -07:00
color: #61635e;
text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
2020-12-16 13:09:51 -05:00
transition: 0.14s ease-in-out background;
}
2020-12-16 13:09:51 -05:00
.segmented-control li:last-child {
margin-right: 0;
}
2020-12-17 10:07:01 -05:00
.segmented-control li:active:not(.NB-disabled),
.segmented-control-active li:active {
color: #303030;
text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
2020-12-17 10:07:01 -05:00
}
.segmented-control li.NB-active,
.segmented-control-active li {
2020-12-16 13:09:51 -05:00
color: #131313;
background-color: #d5d6d2;
}
2013-02-01 16:01:54 -08:00
2020-12-16 13:09:51 -05:00
.segmented-control:hover li.NB-active {
background-color: #c5c6c2;
}
.segmented-control li:hover:not(.NB-disabled):not(.NB-active) {
background-color: #d5d6d2;
}
2013-02-01 16:01:54 -08:00
.segmented-control li.NB-disabled {
opacity: .9;
color: rgba(0, 0, 0, .1);
text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
cursor: default;
}
.segmented-control li.NB-disabled .NB-task-image {
opacity: .3;
}
.segmented-control li:first-child,
.segmented-control li.NB-first {
margin-left: 0;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.segmented-control li:last-child,
.segmented-control li.NB-last {
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-right: none;
}
/* ============================== */
/* = Vertical segmented control = */
/* ============================== */
ul.segmented-control-vertical {
list-style-type: none;
width: auto;
padding: 1px;
margin: 0 auto;
clear: none;
display: inline-block;
text-align: center;
}
.segmented-control-vertical li {
float: left;
cursor: pointer;
2020-12-17 10:07:01 -05:00
margin-bottom: 2px;
width: 100%;
padding: 0;
clear: none;
text-align: center;
color: #61635e;
text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}
2020-12-17 10:07:01 -05:00
.segmented-control-vertical li:last-child {
margin-bottom: 0;
}
.segmented-control-vertical li:active:not(.NB-disabled),
.segmented-control-vertical-active li:active {
color: #303030;
text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}
.segmented-control-vertical li.NB-active,
.segmented-control-vertical li.NB-active:active,
.segmented-control-vertical-active li {
color: #303030;
}
.segmented-control-vertical li.NB-disabled {
opacity: .9;
color: rgba(0, 0, 0, .1);
text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
cursor: default;
}
.segmented-control-vertical li.NB-disabled .NB-task-image {
opacity: .3;
}
.segmented-control-vertical li:first-child,
.segmented-control-vertical li.NB-first {
margin-left: 0;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.segmented-control-vertical li:last-child,
.segmented-control-vertical li.NB-last {
border-bottom: none;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
2020-12-16 13:09:51 -05:00
}