@import '_variables';
@import '_mixins';
-.subscribe-button {
+.btn-group-subscribe {
@include peertube-button;
- @include orange-button;
-}
+ @include disable-default-a-behaviour;
-.unsubscribe-button {
- @include peertube-button;
- @include grey-button
-}
+ float: right;
+ padding: 0;
-.subscribe-button,
-.unsubscribe-button {
- padding: 3px 7px;
-}
+ & > .btn,
+ & > .dropdown > .dropdown-toggle {
+ font-size: 15px;
+ }
-.unsubscribe-button {
- .subscribed {
- display: inline;
+ // Unlogged
+ & > .dropdown > .dropdown-toggle span {
+ padding-right: 3px;
}
- .unsubscribe {
- display: none;
+ // Logged
+ & > .btn {
+ padding-right: 4px;
+
+ & + .dropdown > button {
+ padding-left: 2px;
+
+ &::after {
+ position: relative;
+ top: 1px;
+ }
+ }
}
- &:hover {
- .subscribed {
- display: none;
+ &.subscribe-button {
+ .btn {
+ @include orange-button;
+ font-weight: 600;
}
- .unsubscribe {
- display: inline;
+ span.followers-count {
+ padding-left: 5px;
}
}
-}
\ No newline at end of file
+ &.unsubscribe-button {
+ .btn {
+ @include grey-button;
+ font-weight: 600;
+ }
+ }
+
+ .dropdown-menu {
+ cursor: default;
+
+ button {
+ cursor: pointer;
+ }
+ }
+
+ .dropdown-header {
+ padding-left: 1rem;
+ }
+
+ ::ng-deep form {
+ padding: 0.25rem 1rem;
+ }
+
+ input {
+ @include peertube-input-text(100%);
+ }
+}