ideas/themes/offby1/scss/_custom_rules.scss at 3beae285cf536a8ad4ccfc4e2a024cf6bb28a66a · offbyone/ideas · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
// Override CSS rules with that file
.markdown-body {
  pre {
    line-height: $lh-condensed !important;
  }

  .highlight {
    // stylelint-disable-next-line primer/spacing
    padding: 0.2em 0.4em;
    margin: 15;
    // stylelint-disable-next-line primer/typography
    font-size: 85%;
    // stylelint-disable-next-line primer/colors
    background-color: var(--color-bg);
    opacity: 90%;
    border-radius: $border-radius;

    br {
      display: none;
    }

    margin-bottom: $spacer-3;

    pre {
      word-break: normal;
      padding: 1em;
      box-shadow: rgba(4, 21, 31, 0.2) 0px 3px 6px,
        rgba(4, 21, 31, 0.3) 0px 3px 6px;
    }

    > pre {
      // stylelint-disable-next-line primer/typography
      font-size: 100%;
      word-break: normal;
      white-space: pre;
      background: transparent;
      border: 0;
    }
  }
}

// Federated comments styling
.comments {
  // Basic comment styles
  .mastodon-comment {
    margin-bottom: 1rem;

    .author {
      margin-bottom: 0.25rem;

      .disabled {
        opacity: 0.7;
        font-size: 0.9em;
      }
    }
  }

  // Nested reply styles - more subtle indentation and vertical line
  .mastodon-comment-replies {
    margin-left: 10px;
    border-left: 1px solid rgba(128, 128, 128, 0.2);
    padding-left: 8px;
    margin-top: 0.5rem;

    // Add slight transition for the border
    transition: border-left 0.15s ease-in-out;

    &:hover {
      border-left: 1px solid rgba(128, 128, 128, 0.3);
    }

    .mastodon-comment {
      margin-top: 8px;
      margin-bottom: 8px;
    }

    // Handle deeply nested replies with subtle color changes
    .mastodon-comment-replies {
      border-left-color: rgba(100, 100, 200, 0.15);

      &:hover {
        border-left-color: rgba(100, 100, 200, 0.25);
      }

      .mastodon-comment-replies {
        border-left-color: rgba(100, 200, 100, 0.15);

        &:hover {
          border-left-color: rgba(100, 200, 100, 0.25);
        }
      }
    }
  }

  // Match the theme colors in dark mode
  @media (prefers-color-scheme: dark) {
    .mastodon-comment-replies {
      border-left-color: rgba(200, 200, 200, 0.1);

      &:hover {
        border-left-color: rgba(200, 200, 200, 0.2);
      }

      // Handle deeply nested replies with subtle colors in dark mode
      .mastodon-comment-replies {
        border-left-color: rgba(150, 150, 220, 0.1);

        &:hover {
          border-left-color: rgba(150, 150, 220, 0.2);
        }

        .mastodon-comment-replies {
          border-left-color: rgba(150, 220, 150, 0.1);

          &:hover {
            border-left-color: rgba(150, 220, 150, 0.2);
          }
        }
      }
    }
  }
}