Zmiana wyglądu widgetu changelogu
Utworzono:
2016-09-12
Ostatnia aktualizacja: 2021-11-23
Ostatnia aktualizacja: 2021-11-23
Liczba odwiedzin posta: 1971
Widget changelogu można dostosowywać graficznie do swoich potrzeb za pomocą CSS. Aby dodać swoje style CSS należy przejść do edycji widgetu changelogu i w polu "własny css" dopisać swój kod.
Poniżej znajduje się oryginalny kod CSS widgetu Changelogu. Można go modyfikować dopisując własne style CSS.
Poniżej znajduje się oryginalny kod CSS widgetu Changelogu. Można go modyfikować dopisując własne style CSS.
.sugester-changelog {
position: relative;
}
.sugester-changelog>a {
display: block;
float: right;
width: 20px;
}
html .sugester-changelog-popover, html .popover.sugester-changelog-popover {
min-width: 330px!important;
font-size: 12px;
font-family: 'lucida grande', 'lucida sans unicode', arial;
position: absolute;
}
.popover-content.sugester-changelog-inside {
padding: 0
}
h3.sugester-changelog-title {
border-bottom: 1px solid #ddd;
margin: 10px 0;
padding: 0 15px 10px;
font-size: 15px;
}
.sugester-changelog-item {
border-top: 1px solid #ddd;
margin: 4px 8px;
padding-top: 8px;
}
.sugester-changelog-list :first-child+div {
border-top: 0;
padding-top: 0
}
a.sugester-changelog-item-content span:first-child {
margin-right: 5px
}
a.sugester-changelog-item-content {
text-decoration: none;
color: #000;
display: inline;
color: #333
}
a.sugester-changelog-item-content:hover strong+span, a.sugester-changelog-item-content:hover strong {
text-decoration: underline;
color: #337ab7
}
.sugester-changelog-more {
border-top: 1px solid #ddd;
padding: 5px;
margin-top: 0;
background: #f7f7f7;
font-size: 10px;
text-align: center
}
.sugester-changelog-more a {
color: #337ab7
}
.popover-content.sugester-changelog-inside .sugester-bubble-close {
background: #fff none repeat scroll 0 0;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 500px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
color: #999;
display: block;
font-size: .9em;
height: auto;
line-height: 9px;
padding: 2px 3px 4px;
position: absolute;
right: -7px;
text-align: center;
text-decoration: none;
top: -7px;
width: auto;
outline: 0
}
.popover-content.sugester-changelog-inside .sugester-bubble-close:hover {
color: #ed5565;
}
.sugester-changelog>a {
outline: 0
}
/*popover start*/
.popover.sugester-changelog-popover {
position: absolute;
top: -8px;
right: -36px;
left: auto;
z-index: 1060;
display: none;
max-width: 276px;
padding: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
line-break: auto
}
.popover.sugester-changelog-popover.top {
margin-top: -10px
}
.popover.sugester-changelog-popover.right {
margin-left: 10px
}
.popover.sugester-changelog-popover.bottom {
margin-top: 10px
}
.popover.sugester-changelog-popover.left {
margin-left: -10px
}
.popover.sugester-changelog-popover-title {
padding: 8px 14px;
margin: 0;
font-size: 14px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: 5px 5px 0 0
}
.popover.sugester-changelog-popover-content {
padding: 9px 14px
}
.popover.sugester-changelog-popover>.arrow, .popover>.arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid
}
.popover.sugester-changelog-popover>.arrow {
border-width: 11px
}
.popover.sugester-changelog-popover>.arrow:after {
content: "";
border-width: 10px
}
.popover.sugester-changelog-popover.top>.arrow {
bottom: -11px;
left: 50%;
margin-left: -11px;
border-top-color: #999;
border-top-color: rgba(0, 0, 0, .25);
border-bottom-width: 0
}
.popover.sugester-changelog-popover.top>.arrow:after {
bottom: 1px;
margin-left: -10px;
content: " ";
border-top-color: #fff;
border-bottom-width: 0
}
.popover.sugester-changelog-popover.right>.arrow {
top: 50%;
left: -11px;
margin-top: -11px;
border-right-color: #999;
border-right-color: rgba(0, 0, 0, .25);
border-left-width: 0
}
.popover.sugester-changelog-popover.right>.arrow:after {
bottom: -10px;
left: 1px;
content: " ";
border-right-color: #fff;
border-left-width: 0
}
.popover.sugester-changelog-popover.bottom>.arrow {
border-bottom-color: rgba(0, 0, 0, 0.25);
border-top-width: 0;
left: auto;
margin-left: -11px;
right: 32px;
top: -11px;
}
.popover.sugester-changelog-popover.bottom>.arrow:after {
top: 1px;
margin-left: -10px;
content: " ";
border-top-width: 0;
border-bottom-color: #fff
}
.popover.sugester-changelog-popover.left>.arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: #999;
border-left-color: rgba(0, 0, 0, .25)
}
.popover.sugester-changelog-popover.left>.arrow:after {
right: 1px;
bottom: -10px;
content: " ";
border-right-width: 0;
border-left-color: #fff
}
html .popover.sugester-changelog-popover.bottom {
margin-top: 33px
}
/*popover end*/
/*label*/
.sugester-changelog-popover .sugester-changelog-label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em
}
.sugester-changelog-popover a.sugester-changelog-label:focus, .sugester-changelog-popover a.sugester-changelog-label:hover {
color: #fff;
text-decoration: none;
cursor: pointer
}
.sugester-changelog-popover .sugester-changelog-label:empty {
display: none
}
.sugester-changelog-popover .sugester-changelog-label-default {
background-color: #777
}
.sugester-changelog-popover .sugester-changelog-label-default[href]:focus, .sugester-changelog-popover .sugester-changelog-label-default[href]:hover {
background-color: #5e5e5e
}
.sugester-changelog-popover .sugester-changelog-label-primary {
background-color: #337ab7
}
.sugester-changelog-popover .sugester-changelog-label-primary[href]:focus, .sugester-changelog-popover .sugester-changelog-label-primary[href]:hover {
background-color: #286090
}
.sugester-changelog-popover .sugester-changelog-label-success {
background-color: #5cb85c
}
.sugester-changelog-popover .sugester-changelog-label-success[href]:focus, .sugester-changelog-popover .sugester-changelog-label-success[href]:hover {
background-color: #449d44
}
.sugester-changelog-popover .sugester-changelog-label-info {
background-color: #5bc0de
}
.sugester-changelog-popover .sugester-changelog-label-info[href]:focus, .sugester-changelog-popover .sugester-changelog-label-info[href]:hover {
background-color: #31b0d5
}
.sugester-changelog-popover .sugester-changelog-label-warning {
background-color: #f0ad4e
}
.sugester-changelog-popover .sugester-changelog-label-warning[href]:focus, .sugester-changelog-popover .sugester-changelog-label-warning[href]:hover {
background-color: #ec971f
}
.sugester-changelog-popover .sugester-changelog-label-danger {
background-color: #d9534f
}
.sugester-changelog-popover .sugester-changelog-label-danger[href]:focus, .sugester-changelog-popover .sugester-changelog-label-danger[href]:hover {
background-color: #c9302c
}
/*label*/
/*Badge*/
.sugester-changelog-badge {
border-radius: 100px;
padding-top: 3px;
background-color: #D1DADE;
color: #5E5E5E;
font-family: 'lucida grande', 'lucida sans unicode', arial;
font-size: 9px;
font-weight: 600;
padding-bottom: 4px;
padding-left: 6px;
padding-right: 6px;
text-shadow: none;
display: block;
min-height: 20px;
min-width: 20px;
text-align: center;
}
.sugester-changelog-badge.badge-active {
background-color: #ED5565;
color: #FFF
}
.sugester-changelog-badge.badge-inactive {
background-color: #ddd;
color: #fff
}
.sugester-changelog>a, .sugester-changelog-badge>a {
text-decoration: none;
}
/*badge*/
Zarządzaj całą swoją firmą w jednej aplikacji. Wypróbuj Sugester przez 30 dni za darmo!
Rozpocznij darmowy okres testowyPowrót
Dodaj komentarz