simplify grid-template-areas
This commit is contained in:
parent
4f157596eb
commit
8db7d376d4
|
@ -6,7 +6,7 @@
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
.status-media {
|
.status-media {
|
||||||
grid-area: status-media;
|
grid-area: media;
|
||||||
display: grid;
|
display: grid;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
|
@ -25,13 +25,13 @@
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
".............. status-header"
|
"....... header"
|
||||||
"status-sidebar status-author"
|
"sidebar author"
|
||||||
"status-sidebar status-spoiler"
|
"sidebar spoiler"
|
||||||
"status-sidebar status-spoiler-button"
|
"sidebar spoiler-button"
|
||||||
"status-sidebar status-content"
|
"sidebar content"
|
||||||
"status-media status-media"
|
"media media"
|
||||||
".............. status-toolbar";
|
"....... toolbar";
|
||||||
grid-template-columns: 58px 1fr;
|
grid-template-columns: 58px 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
.status-author {
|
.status-author {
|
||||||
grid-area: status-author;
|
grid-area: author;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 0 10px 0 5px;
|
margin: 0 10px 0 5px;
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
<style>
|
<style>
|
||||||
.status-content {
|
.status-content {
|
||||||
margin: 10px 10px 10px 5px;
|
margin: 10px 10px 10px 5px;
|
||||||
grid-area: status-content;
|
grid-area: content;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
|
|
|
@ -41,7 +41,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-header {
|
.status-header {
|
||||||
grid-area: status-header;
|
grid-area: header;
|
||||||
margin: 5px 10px 5px 5px;
|
margin: 5px 10px 5px 5px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -35,7 +35,7 @@
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<style>
|
<style>
|
||||||
.status-sensitive-media-container {
|
.status-sensitive-media-container {
|
||||||
grid-area: status-media;
|
grid-area: media;
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
size="small" />
|
size="small" />
|
||||||
<style>
|
<style>
|
||||||
:global(.status-sidebar) {
|
:global(.status-sidebar) {
|
||||||
grid-area: status-sidebar;
|
grid-area: sidebar;
|
||||||
margin: 0 10px 0 0;
|
margin: 0 10px 0 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
.status-spoiler {
|
.status-spoiler {
|
||||||
grid-area: status-spoiler;
|
grid-area: spoiler;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
|
@ -17,7 +17,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-spoiler-button {
|
.status-spoiler-button {
|
||||||
grid-area: status-spoiler-button;
|
grid-area: spoiler-button;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
.status-toolbar {
|
.status-toolbar {
|
||||||
grid-area: status-toolbar;
|
grid-area: toolbar;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue