about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/styles/monsterfork/components/status.scss
blob: 6c14e2b494d0a1a02184dff4cbe3b242ec1e3150 (plain) (blame)
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
.status__notice-wrapper {
  margin-bottom: 1em;
}

.status__notice-wrapper:empty {
  display: none;
}

.status__notice {
  & > span {
    color: $dark-text-color;
    line-height: normal;
    font-style: italic;
    font-size: 12px;
    padding-left: 8px;
    position: relative;
    bottom: 0.2em;
  }

  & > i {
    color: lighten($dark-text-color, 4%);
  }
}

.status__permissions {
  font-size: 12px;
  margin-top: 1em;

  & > summary {
    font-size: 12px;

    &:focus, &:active {
      outline: none;
    }
  }

  & > summary > span,
  & > ul > li > span {
    color: lighten($dark-text-color, 4%);
    padding-left: 8px;
  }

  & > ul > li > span > span:first-child {
    display: inline-block;
    text-transform: capitalize;
    min-width: 5em;
  }

  & > summary > i {
    color: #999966;
  }

  & > ul > li.permission-status > i {
    color: #99cccc;
  }

  & > ul > li.permission-account > i {
    color: #cc99cc;
  }

  & > ul > li > span > span,
  & > ul > li > span > code {
    color: lighten($primary-text-color, 30%);
  }
}

.status, .detailed-status {
  &.unpublished {
    background: darken($ui-base-color, 4%);

    &:focus {
      background: lighten($ui-base-color, 4%);
    }
  }

  &[data-local-only="true"] {
    background: lighten($ui-base-color, 4%);
  }
}

div[data-nest-level] {
  border-style: solid;
}

@for $i from 0 through 15 {
  div[data-nest-level="#{$i}"] {
    border-left-width: #{$i * 3}px;
    border-left-color: darken($ui-base-color, 8%);
  }
}

div[data-nest-deep="true"] {
  border-left-width: 75px;
  border-left-color: darken($ui-base-color, 8%);
}

.status__content {
  .status__content__text,
  .e-content {
    img:not(.emojione) {
      max-width: 100%;
      margin: 1em auto;
    }
  }
}

div.media-caption {
  p {
    font-size: 12px !important;
    margin-bottom: 0;
    text-align: center;
  }
  a {
		color: $secondary-text-color;
		text-decoration: none;
		font-weight: bold;

		&:hover {
			text-decoration: underline;

			.fa {
				color: lighten($dark-text-color, 7%);
			}
		}

		&.mention {
			&:hover {
				text-decoration: none;

				span {
					text-decoration: underline;
				}
			}
		}

		.fa {
			color: $dark-text-color;
		}
	}
}