.srs-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: inherit;
font-size: 1em;
line-height: 1.6;
color: inherit;
background: transparent;
} .srs-container.theme-adaptive {
background: transparent;
color: inherit;
} @media (prefers-color-scheme: dark) {
.srs-container:not(.theme-adaptive) {
background: #1a1a1a;
color: #e0e0e0;
}
} .srs-container h3 {
color: inherit;
font-size: 1.2em;
font-weight: bold;
margin: 2em 0 1em 0;
font-family: inherit;
opacity: 0.9;
} .srs-container h3:first-child,
.srs-statistics h3:first-child {
margin-top: 1em;
} .srs-statistics {
margin-bottom: 3em;
}
.srs-activity-filter {
margin: 1em 0 2em 0;
}
.srs-filter-btn {
background: none;
border: none;
color: var(--srs-inactive-color, #999);
font-size: 1em;
font-family: inherit;
cursor: pointer;
padding: 0;
margin-right: 1em;
text-decoration: none;
transition: all 0.2s ease;
}
.srs-filter-btn:hover {
text-decoration: underline;
opacity: 0.8;
}
.srs-filter-btn.active {
color: inherit;
font-weight: bold;
text-decoration: none;
opacity: 1;
}
.srs-stats-grid {
margin: 2em 0;
}
.srs-stat-item {
margin-bottom: 1em;
line-height: 1.4;
}
.srs-stat-label {
display: inline;
color: inherit;
font-size: 1em;
font-weight: normal;
margin-right: 0.5em;
opacity: 0.8;
}
.srs-stat-label::after {
content: ":";
}
.srs-stat-value {
display: inline;
font-size: 1em;
font-weight: bold;
color: inherit;
font-family: inherit;
opacity: 1;
} .srs-map-section {
margin-bottom: 3em;
}
#srs-map {
border: 1px solid var(--srs-border-color, #ddd);
margin: 1em 0;
position: relative;
border-radius: 4px;
overflow: hidden;
} .mapboxgl-ctrl-group {
background: #fff !important;
box-shadow: 0 0 0 2px rgba(0,0,0,0.1) !important;
}
.mapboxgl-ctrl button {
background-color: #fff !important;
border: none !important;
cursor: pointer !important;
display: block !important;
width: 30px !important;
height: 30px !important;
}
.mapboxgl-ctrl button:hover {
background-color: #f0f0f0 !important;
}
.mapboxgl-ctrl-icon {
display: block !important;
width: 100% !important;
height: 100% !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill:%23333333;' d='M 10 6 C 9.446 6 9 6.4459904 9 7 L 9 9 L 7 9 C 6.446 9 6 9.446 6 10 C 6 10.554 6.446 11 7 11 L 9 11 L 9 13 C 9 13.55401 9.446 14 10 14 C 10.554 14 11 13.55401 11 13 L 11 11 L 13 11 C 13.554 11 14 10.554 14 10 C 14 9.446 13.554 9 13 9 L 11 9 L 11 7 C 11 6.4459904 10.554 6 10 6 z'/%3E%3C/svg%3E") !important;
}
.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill:%23333333;' d='M 7 9 C 6.446 9 6 9.446 6 10 C 6 10.554 6.446 11 7 11 L 13 11 C 13.554 11 14 10.554 14 10 C 14 9.446 13.554 9 13 9 L 7 9 z'/%3E%3C/svg%3E") !important;
}
.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon style='fill:%23333333;' points='10,8 14,17 10,14 6,17'/%3E%3Cpolygon style='fill:%23CCCCCC;' points='10,12 14,3 10,6 6,3'/%3E%3C/svg%3E") !important;
} .srs-activities-section {
margin-bottom: 3em;
}
.srs-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin: 1em 0;
font-family: inherit;
font-size: 1em;
table-layout: fixed;
}
.srs-table th {
padding: 0.5em 0.3em;
text-align: left;
font-weight: bold;
color: inherit;
border-bottom: 1px solid var(--srs-border-color, #ddd);
font-size: 1em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.9;
}
.srs-table td {
padding: 0.5em 0.3em;
color: inherit;
border-bottom: 1px solid var(--srs-border-light-color, #eee);
vertical-align: top;
font-size: 1em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.85;
} .srs-table th:nth-child(1),
.srs-table td:nth-child(1) { width: 15%; } .srs-table th:nth-child(2),
.srs-table td:nth-child(2) { width: 12%; } .srs-table th:nth-child(3),
.srs-table td:nth-child(3) { width: 15%; } .srs-table th:nth-child(4),
.srs-table td:nth-child(4) { width: 15%; } .srs-table th:nth-child(5),
.srs-table td:nth-child(5) { width: 18%; } .srs-table th:nth-child(6),
.srs-table td:nth-child(6) { width: 13%; } .srs-table th:nth-child(7),
.srs-table td:nth-child(7) { width: 12%; } .srs-table tbody tr:hover {
background: var(--srs-hover-bg, rgba(0,0,0,0.05));
cursor: pointer;
}
.srs-table tbody tr.active {
background: var(--srs-active-bg, rgba(0,123,255,0.1));
}
.srs-table tbody tr:last-child td {
border-bottom: none;
} .srs-activity-type {
font-weight: normal;
font-size: inherit;
white-space: nowrap;
color: inherit;
opacity: 0.8;
} .srs-pagination {
text-align: left;
margin: 2em 0;
}
#srs-load-more {
background: none;
border: none;
color: var(--srs-link-color, #0073aa);
font-family: inherit;
font-size: 1em;
cursor: pointer;
padding: 0;
text-decoration: none;
transition: all 0.2s ease;
}
#srs-load-more:hover {
text-decoration: underline;
opacity: 0.8;
}
#srs-load-more:disabled {
color: inherit;
opacity: 0.4;
cursor: not-allowed;
text-decoration: none;
} @media (max-width: 768px) {
.srs-container {
padding: 15px;
}
h3 {
font-size: 1.1em;
margin: 1.5em 0 0.8em 0;
}
.srs-container h3:first-child,
.srs-statistics h3:first-child {
margin-top: 0.5em;
}
.srs-filter-btn {
display: inline-block;
margin-right: 0.8em;
margin-bottom: 0.5em;
}
.srs-stat-item {
margin-bottom: 0.8em;
} .srs-table {
font-size: 0.85em;
}
.srs-table th,
.srs-table td {
padding: 0.4em 0.2em;
} .srs-table th:nth-child(1),
.srs-table td:nth-child(1) { width: 18%; } .srs-table th:nth-child(2),
.srs-table td:nth-child(2) { width: 15%; } .srs-table th:nth-child(3),
.srs-table td:nth-child(3) { width: 18%; } .srs-table th:nth-child(4),
.srs-table td:nth-child(4) { width: 18%; } .srs-table th:nth-child(5),
.srs-table td:nth-child(5) { width: 31%; }  .srs-table th:nth-child(6),
.srs-table td:nth-child(6),
.srs-table th:nth-child(7),
.srs-table td:nth-child(7) {
display: none;
}
}
@media (max-width: 480px) {
.srs-container {
padding: 10px;
overflow-x: auto;
} .srs-table {
font-size: 0.8em;
min-width: 100%;
}
.srs-table th,
.srs-table td {
padding: 0.3em 0.15em;
} .srs-table th:nth-child(1),
.srs-table td:nth-child(1) { width: 25%; } .srs-table th:nth-child(2),
.srs-table td:nth-child(2) { width: 18%; } .srs-table th:nth-child(3),
.srs-table td:nth-child(3) { width: 22%; } .srs-table th:nth-child(4),
.srs-table td:nth-child(4) { width: 35%; }  .srs-table th:nth-child(5),
.srs-table td:nth-child(5),
.srs-table th:nth-child(6),
.srs-table td:nth-child(6),
.srs-table th:nth-child(7),
.srs-table td:nth-child(7) {
display: none;
} .srs-activity-type {
white-space: nowrap;
}
} @media (max-width: 375px) {
.srs-table {
font-size: 0.75em;
}
.srs-table th,
.srs-table td {
padding: 0.25em 0.1em;
} .srs-table th:nth-child(1),
.srs-table td:nth-child(1) { width: 22%; } .srs-table th:nth-child(2),
.srs-table td:nth-child(2) { width: 16%; } .srs-table th:nth-child(3),
.srs-table td:nth-child(3) { width: 27%; } .srs-table th:nth-child(4),
.srs-table td:nth-child(4) { width: 35%; } } .srs-container {
--srs-text-color: inherit;
--srs-bg-color: transparent;
--srs-border-color: #ddd;
--srs-border-light-color: #eee;
--srs-link-color: #0073aa;
--srs-inactive-color: #999;
--srs-hover-bg: rgba(0,0,0,0.05);
--srs-active-bg: rgba(0,123,255,0.1);
} @media (prefers-color-scheme: dark) {
.srs-container:not(.theme-adaptive) {
--srs-text-color: #e0e0e0;
--srs-bg-color: #1a1a1a;
--srs-border-color: #444;
--srs-border-light-color: #333;
--srs-link-color: #4fc3f7;
--srs-inactive-color: #666;
--srs-hover-bg: rgba(255,255,255,0.1);
--srs-active-bg: rgba(79,195,247,0.2);
}
} .srs-container * {
box-shadow: none !important;
background-image: none !important;
} #srs-map {
border-radius: 4px !important;
} .srs-statistics,
.srs-map-section {
border-bottom: 1px solid var(--srs-border-light-color, rgba(0,0,0,0.1));
padding-bottom: 2em;
margin-bottom: 2em;
}
.srs-activities-section {
border-bottom: none;
} .srs-container > *:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
} .srs-container:has(.srs-statistics):not(:has(.srs-map-section)):not(:has(.srs-activities-section)) .srs-statistics,
.srs-container:has(.srs-map-section):not(:has(.srs-statistics)):not(:has(.srs-activities-section)) .srs-map-section,
.srs-container:has(.srs-activities-section):not(:has(.srs-statistics)):not(:has(.srs-map-section)) .srs-activities-section {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}body .extendedwopts-show {
display: none;
}
body .widgetopts-hide_title .widget-title {
display: none;
}
body .extendedwopts-md-right {
text-align: right;
}
body .extendedwopts-md-left {
text-align: left;
}
body .extendedwopts-md-center {
text-align: center;
}
body .extendedwopts-md-justify {
text-align: justify;
}
@media screen and (min-width: 1181px) {
body .extendedwopts-hide.extendedwopts-desktop {
display: none !important;
}
body .extendedwopts-show.extendedwopts-desktop {
display: block;
}
body .widget.clearfix-desktop {
clear: both;
}
}
@media screen and (max-width: 1024px) and (orientation: Portrait) {
body .extendedwopts-hide.extendedwopts-tablet {
display: none !important;
}
body .extendedwopts-show.extendedwopts-tablet {
display: block;
}
body .widget.clearfix-desktop {
clear: none;
}
body .widget.clearfix-tablet {
clear: both;
}
}
@media screen and (max-width: 1180px) and (orientation: landscape) {
body .extendedwopts-hide.extendedwopts-tablet {
display: none !important;
}
body .extendedwopts-show.extendedwopts-tablet {
display: block;
}
body .widget.clearfix-desktop {
clear: none;
}
body .widget.clearfix-tablet {
clear: both;
}
}
@media screen and (max-width: 767px) and (orientation: Portrait) {
body .extendedwopts-hide.extendedwopts-tablet:not(.extendedwopts-mobile) {
display: block !important;
}
body .extendedwopts-show.extendedwopts-tablet:not(.extendedwopts-mobile) {
display: none !important;
}
body .extendedwopts-hide.extendedwopts-mobile {
display: none !important;
}
body .extendedwopts-show.extendedwopts-mobile {
display: block;
}
body .widget.clearfix-desktop,
body .widget.clearfix-tablet {
clear: none;
}
body .widget.clearfix-mobile {
clear: both;
}
}
@media screen and (max-width: 991px) and (orientation: landscape) {
body .extendedwopts-hide.extendedwopts-tablet:not(.extendedwopts-mobile) {
display: block !important;
}
body .extendedwopts-show.extendedwopts-tablet:not(.extendedwopts-mobile) {
display: none !important;
}
body .extendedwopts-hide.extendedwopts-mobile {
display: none !important;
}
body .extendedwopts-show.extendedwopts-mobile {
display: block;
}
body .widget.clearfix-desktop,
body .widget.clearfix-tablet {
clear: none;
}
body .widget.clearfix-mobile {
clear: both;
}
}
.panel-cell-style:after {
content: "";
display: block;
clear: both;
position: relative;
}.friends-plugin-container {
box-sizing: border-box;
width: 100%;
} .widget .friends-plugin-container,
.sidebar .friends-plugin-container {
max-width: none;
margin: 0;
padding: 10px 0;
}
.friends-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 15px;
}
.friend-card {
background: #fff;
border-radius: 6px;
padding: 15px;
border: 1px solid #eee;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.friend-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.friend-name {
margin: 0 0 8px 0;
font-size: 1em;
font-weight: 600;
}
.friend-name a {
color: #333;
text-decoration: none;
}
.friend-name a:hover {
color: #0073aa;
}
.friend-description {
margin: 0 0 12px 0;
font-size: 0.85em;
color: #666;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.friend-latest-post {
font-size: 0.85em;
color: #666;
border-top: 1px solid #f0f0f0;
padding-top: 12px;
}
.latest-post-title {
display: block;
color: #333;
text-decoration: none;
margin-bottom: 4px;
font-size: 0.9em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.latest-post-title:hover {
color: #0073aa;
}
.latest-post-date {
font-size: 0.8em;
color: #999;
}
.no-latest-post {
color: #999;
font-style: italic;
font-size: 0.85em;
} @media screen and (max-width: 480px) {
.friends-plugin-container {
padding: 10px;
}
.friends-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.friend-card {
padding: 12px;
}
.friend-name {
font-size: 0.95em;
}
.friend-description {
font-size: 0.8em;
-webkit-line-clamp: 3;
}
.friend-latest-post {
font-size: 0.8em;
padding-top: 10px;
}
.latest-post-title {
font-size: 0.85em;
}
.latest-post-date {
font-size: 0.75em;
}
} @media screen and (min-width: 481px) and (max-width: 768px) {
.friends-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
}
.friend-card {
padding: 14px;
}
.friend-name {
font-size: 0.95em;
}
.friend-description {
font-size: 0.82em;
}
.friend-latest-post {
font-size: 0.82em;
}
} @media screen and (min-width: 769px) and (max-width: 992px) {
.friends-grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.friend-description {
font-size: 0.88em;
}
} .friends-plugin-container.wide-container .friends-grid {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
}
.friends-plugin-container.wide-container .friend-card {
padding: 18px;
} .friends-plugin-container.narrow-container .friends-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
}
.friends-plugin-container.narrow-container .friend-card {
padding: 14px;
}
.friends-plugin-container.narrow-container .friend-name {
font-size: 0.95em;
}
.friends-plugin-container.narrow-container .friend-description {
font-size: 0.85em;
} .friends-plugin-container.very-narrow-container .friends-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
}
.friends-plugin-container.very-narrow-container .friend-card {
padding: 12px;
}
.friends-plugin-container.very-narrow-container .friend-name {
font-size: 0.9em;
}
.friends-plugin-container.very-narrow-container .friend-description {
font-size: 0.8em;
-webkit-line-clamp: 2;
}
.friends-plugin-container.very-narrow-container .latest-post-title {
font-size: 0.8em;
} @media (prefers-color-scheme: dark) {
.friend-card {
background: #222;
border-color: #333;
}
.friend-name a {
color: #e0e0e0;
}
.friend-description {
color: #999;
}
.friend-latest-post {
border-top-color: #333;
}
.latest-post-title {
color: #e0e0e0;
}
.latest-post-date,
.no-latest-post {
color: #666;
}
}