|
|
@use '../style/variable' as *; |
|
|
@use '../style/mixin' as *; |
|
|
|
|
|
#resources { |
|
|
@include overflow-auto(y); |
|
|
padding: 10px; |
|
|
font-size: 14px; |
|
|
.section { |
|
|
margin-bottom: 10px; |
|
|
overflow: hidden; |
|
|
border: 1px solid var(--border); |
|
|
&.warn { |
|
|
border: 1px solid var(--console-warn-border); |
|
|
.title { |
|
|
background: var(--console-warn-background); |
|
|
color: var(--console-warn-foreground); |
|
|
} |
|
|
} |
|
|
&.danger { |
|
|
border: 1px solid var(--console-error-border); |
|
|
.title { |
|
|
background: var(--console-error-background); |
|
|
color: var(--console-error-foreground); |
|
|
} |
|
|
} |
|
|
&.local-storage, |
|
|
&.session-storage, |
|
|
&.cookie { |
|
|
border: none; |
|
|
.title { |
|
|
border: 1px solid var(--border); |
|
|
border-bottom: none; |
|
|
} |
|
|
} |
|
|
} |
|
|
.title { |
|
|
padding: $padding; |
|
|
line-height: 18px; |
|
|
color: var(--primary); |
|
|
background: var(--darker-background); |
|
|
@include right-btn(); |
|
|
} |
|
|
.link-list { |
|
|
font-size: $font-size-s; |
|
|
color: var(--foreground); |
|
|
li { |
|
|
padding: 10px; |
|
|
word-break: break-all; |
|
|
a { |
|
|
color: var(--link-color) !important; |
|
|
} |
|
|
} |
|
|
} |
|
|
.image-list { |
|
|
color: var(--foreground); |
|
|
font-size: $font-size-s; |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
padding-left: $padding; |
|
|
padding-top: $padding; |
|
|
&::after { |
|
|
content: ''; |
|
|
flex-grow: 1000; |
|
|
} |
|
|
li { |
|
|
flex-grow: 1; |
|
|
cursor: pointer; |
|
|
overflow-y: hidden; |
|
|
margin-right: $padding; |
|
|
margin-bottom: $padding; |
|
|
border: 1px solid var(--border); |
|
|
&.image { |
|
|
height: 100px; |
|
|
font-size: 0; |
|
|
} |
|
|
img { |
|
|
height: 100px; |
|
|
min-width: 100%; |
|
|
object-fit: cover; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.safe-area #resources { |
|
|
@include safe-area(padding-bottom, 10px); |
|
|
} |
|
|
|
