Add header height and notification tile style

This commit is contained in:
cutls
2021-04-15 05:02:33 +09:00
parent fcedefe815
commit 54031da417
16 changed files with 135 additions and 42 deletions

View File

@@ -260,7 +260,7 @@ iframe,
width: 100%;
display: grid;
grid-template-columns: 3.3rem 2fr 1fr;
grid-template-rows: auto 1.6rem 1fr auto 2.5rem;
grid-template-rows: auto 1.6rem 1fr auto 1.9rem;
grid-template-areas: 'notice notice notice' 'icon display_name display_name' 'space toot toot' 'space additional additional' 'vis actions side';
}
.hide-actions {
@@ -353,15 +353,26 @@ iframe,
.area-actions {
padding: 0;
margin: 0;
top: -0.4rem;
position: relative;
display: flex;
justify-content: space-around;
max-width: 100%;
grid-area: actions;
}
.area-actions .btn-flat {
height: 1rem;
line-height: 1rem;
}
.area-actions .btn-flat,
.area-vis i,
.area-side .btn-flat {
margin: 0;
}
.area-side i {
line-height: initial;
}
.area-vis {
margin: 0.4rem;
margin: 0.2rem;
grid-area: vis;
text-align: center;
}
@@ -534,6 +545,18 @@ p:not(:last-child) {
grid-template-rows: 2.3rem 2.3rem;
grid-template-areas: 'notice notice_name notice_name a2' 'notice a1 sta a3' 'notf-box notf-box notf-box notf-box';
}
.small-header.notice-box {
min-height: 2rem;
grid-template-columns: 2.3rem 1fr 5rem 2rem 2rem;
grid-template-rows: 1.8rem;
grid-template-areas: 'notice notice_name a1 a3 a2';
}
.small-header.has-notf.notice-box {
min-height: 2rem;
grid-template-columns: 2.3rem 1fr 8rem 5rem 2rem 2rem;
grid-template-rows: 1.8rem;
grid-template-areas: 'notice notice_name sta a1 a3 a2';
}
.emp {
font-weight: bold;
text-decoration: underline;
@@ -542,6 +565,25 @@ p:not(:last-child) {
.area-notice {
grid-area: notice;
}
.small-header .area-notice {
margin: 0;
}
.small-header .area-sta {
display: none;
}
.small-header.has-notf .area-sta {
overflow-x: scroll;
overflow-y: hidden;
height: 2rem;
width: 8rem;
display: flex;
}
.area-sta .hide {
display: inline-block !important;
}
.small-header .area-sta::-webkit-scrollbar {
height: 5px;
}
.area-notice_name {
grid-area: notice_name;
@@ -558,6 +600,10 @@ p:not(:last-child) {
grid-area: a1;
}
.area-sta {
display: none;
}
.has-notf .area-sta {
display: block;
text-align: center;
grid-area: sta;
}
@@ -624,8 +670,7 @@ p:not(:last-child) {
border: thin solid gray;
border-bottom: 2px solid white;
grid-area: notf-box;
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
0 5px 5px -3px rgba(0, 0, 0, 0.3), 0px -10px 10px 0px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3), 0px -10px 10px 0px rgba(0, 0, 0, 0.3) inset;
}
.notf-indv-box label span {
padding-left: 23px !important;
@@ -639,9 +684,12 @@ p:not(:last-child) {
height: 70px;
text-align: center;
}
.notf-exclude-btn {
border: 1px solid;
}
.notf-exclude-btn:hover {
background-color: inherit !important;
border: 1px solid;
filter: brightness(70%);
}
.type-b {
display: none;
@@ -756,7 +804,9 @@ p:not(:last-child) {
width: 100%;
height: 100%;
}
.fav_ct, .rt_ct, .rep_ct {
.fav_ct,
.rt_ct,
.rep_ct {
font-size: 1.1rem;
}
.shared.selectedToot {
@@ -856,6 +906,14 @@ audio {
.box .ui-resizable-se {
display: none !important;
}
.small-header .top-icon {
font-size: 2rem !important;
padding-top: 0%;
}
.top-icon {
font-size: 40px !important;
padding-top: 25%;
}
.announcement {
padding: 0.38rem;
border-bottom: 1px solid;
@@ -883,4 +941,4 @@ audio {
}
.reactionsPack {
display: flex;
}
}