+// Bootstrap grid utilities require functions, variables and mixins
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+@import 'node_modules/bootstrap/scss/grid';
+
@import '_variables';
@import '_mixins';
.sub-menu {
@include sub-menu-with-actor;
-}
\ No newline at end of file
+
+ .actor {
+ width: 100%;
+ }
+}
+
+.margin-content {
+ // margin-content is required, but child views have their own margins
+ // that match views outside the scope of accounts, so we only align
+ // them with the margins of .sub-menu when required.
+ margin: 0;
+}
+
+.right-buttons {
+ display: flex;
+ height: max-content;
+ margin-left: auto;
+ margin-top: 10px;
+
+ @include media-breakpoint-down(lg) {
+ flex-flow: column-reverse;
+
+ a {
+ margin-top: 0.25rem;
+ margin-right: 0 !important;
+ }
+ }
+
+ a {
+ @include peertube-button-outline;
+ }
+
+ my-subscribe-button {
+ min-height: 30px;
+ }
+}
+
+my-user-moderation-dropdown,
+.badge {
+ margin-left: 10px;
+
+ position: relative;
+ top: 3px;
+}
+
+.badge {
+ font-size: 13px;
+}
+
+.copy-button {
+ border: none;
+ padding: 5px;
+ margin-top: -2px;
+}
+
+@media screen and (max-width: $mobile-view) {
+ .sub-menu {
+ .actor {
+ flex-direction: column;
+ align-items: center;
+
+ img,
+ .actor-info .actor-names .actor-display-name {
+ margin-right: 0;
+ }
+
+ .actor-info {
+ .actor-names {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ my-user-moderation-dropdown {
+ margin-left: 0;
+ }
+
+ .actor-followers {
+ text-align: center;
+ }
+ }
+
+ .right-buttons {
+ margin-left: 0;
+ }
+ }
+ }
+}