Zergling_man/thedesk
Zergling_man/thedesk
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve: font-size-change

Browse Source
This commit is contained in:
cutls 2020-05-15 12:47:01 +09:00
parent 917cd322fc
commit cf6e5b5dd5
14 changed files with 350 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
app/css/master.css
View File

@ -5,10 +5,12 @@ body {
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
cursor: default; cursor: default;
font-size: 13px;
height: 100vh; height: 100vh;
color: var(--color); color: var(--color);
} }
html {
font-size: 13px;
}
.titlebar, .titlebar,
.menubar-menu-container, .menubar-menu-container,
.action-menu-item { .action-menu-item {
@ -20,7 +22,8 @@ body {
filter: brightness(80%) !important; filter: brightness(80%) !important;
} }
.btn { .btn {
margin: 5px; font-size: 1.1rem;
margin: 0.4rem;
text-transform: none; text-transform: none;
} }
.markdown { .markdown {
@ -89,7 +92,7 @@ option {
} }
.badge { .badge {
min-width: 0 !important; min-width: 0 !important;
margin-left: 5px !important; margin-left: 0.4rem !important;
} }
.unvisible { .unvisible {
opacity: 0; opacity: 0;
@ -163,16 +166,16 @@ pre {
display: block; display: block;
border-left: 5px solid; border-left: 5px solid;
border-color: #079903; border-color: #079903;
padding-left: 10px; padding-left: 0.75rem;
margin-top: 5px; margin-top: 0.75rem;
margin-bottom: 5px; margin-bottom: 0.75rem;
margin-left: 5px; margin-left: 0.75rem;
background-color: #000; background-color: #000;
padding: 1em 1em 1em; padding: 1em 1em 1em;
position: relative; position: relative;
border-top-left-radius: 10px; border-top-left-radius: 0.75rem;
border-bottom-right-radius: 10px; border-bottom-right-radius: 0.75rem;
border-bottom-left-radius: 10px; border-bottom-left-radius: 0.75rem;
} }
blockquote, blockquote,
.quote p { .quote p {
@ -184,9 +187,9 @@ blockquote,
background-color: #ddd; background-color: #ddd;
padding: 1em 1em 1em; padding: 1em 1em 1em;
position: relative; position: relative;
border-top-left-radius: 10px; border-top-left-radius: 0.75rem;
border-bottom-right-radius: 10px; border-bottom-right-radius: 0.75rem;
border-bottom-left-radius: 10px; border-bottom-left-radius: 0.5rem;
} }
blockquote:before, blockquote:before,
.quote:before { .quote:before {
@ -204,9 +207,9 @@ blockquote:before,
background-color: #fff; background-color: #fff;
padding: 1em 1em 1em; padding: 1em 1em 1em;
position: relative; position: relative;
border-top-left-radius: 10px; border-top-left-radius: 0.75rem;
border-bottom-right-radius: 10px; border-bottom-right-radius: 0.75rem;
border-bottom-left-radius: 10px; border-bottom-left-radius: 0.75rem;
border-left: 5px solid #0096fa; border-left: 5px solid #0096fa;
} }
.pixiv-post :before { .pixiv-post :before {
@ -223,7 +226,7 @@ blockquote:before,
display: none; display: none;
position: fixed; position: fixed;
width: 100vw; width: 100vw;
height: calc(100vh - 40px); height: calc(100vh - 3rem);
background-color: var(--bg); background-color: var(--bg);
color: var(--color); color: var(--color);
z-index: 99999; z-index: 99999;
@ -318,7 +321,7 @@ blockquote:before,
} }
.font { .font {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: 5px; margin-bottom: 0.4rem;
} }
.font:hover { .font:hover {
background-color: #999; background-color: #999;
@ -339,9 +342,9 @@ blockquote:before,
width: 540px; width: 540px;
top: calc(50% - 150px); top: calc(50% - 150px);
left: calc(50% - 250px); left: calc(50% - 250px);
padding: 5px; padding: 0.4rem;
border: thin solid gray; border: thin solid gray;
border-radius: 5px; border-radius: 0.4rem;
overflow: hidden; overflow: hidden;
} }
#menu-wrapper { #menu-wrapper {
@ -351,12 +354,12 @@ blockquote:before,
overflow: hidden; overflow: hidden;
} }
#left-menu { #left-menu {
width: 230px; width: 17.7rem;
} }
#left-menu a { #left-menu a {
padding-left: 5px; padding-left: 0.4rem;
width: 100%; width: 100%;
height: 50px; height: 3rem;
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
@ -366,7 +369,7 @@ blockquote:before,
background-color: var(--beforehover); background-color: var(--beforehover);
} }
#left-menu span { #left-menu span {
margin-left: 5px; margin-left: 0.4rem;
} }
#left-menu a.active { #left-menu a.active {
background-color: var(--emphasized); background-color: var(--emphasized);
@ -375,7 +378,7 @@ blockquote:before,
width: 100%; width: 100%;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
padding: 5px; padding: 0.4rem;
} }
#tltype { #tltype {
display: flex; display: flex;
@ -385,13 +388,13 @@ blockquote:before,
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
width: 170px; width: 13rem;
height: 40px; height: 3.1rem;
cursor: pointer; cursor: pointer;
color: var(--color); color: var(--color);
} }
#tltype .type span { #tltype .type span {
width: calc(100% - 30px); width: calc(100% - 2.3rem);
} }
#tltype .type:hover { #tltype .type:hover {
background-color: var(--beforehover); background-color: var(--beforehover);
@ -400,28 +403,28 @@ blockquote:before,
background-color: var(--emphasized); background-color: var(--emphasized);
} }
#tltype i { #tltype i {
font-size: 30px; font-size: 2.3rem;
} }
#tltype i.sub-icon { #tltype i.sub-icon {
font-size: 20px; font-size: 1.53rem;
position: absolute; position: absolute;
color: var(--beforehover); color: var(--beforehover);
left: 10px; left: 0.9rem;
bottom: 5px; bottom: 0.4rem;
background-color: #fff; background-color: #fff;
} }
.drag-bar { .drag-bar {
cursor: move; cursor: move;
text-align: center; text-align: center;
width: calc(100% + 10px); width: calc(100% + 0.8rem);
border-radius: 5px; border-radius: 5px;
background-color: var(--box); background-color: var(--box);
filter: brightness(80%); filter: brightness(80%);
margin-left: -5px; margin-left: -0.4rem;
margin-right: -5px; margin-right: -0.4rem;
margin-top: -5px; margin-top: -0.4rem;
font-size: 16px; font-size: 1.3rem;
padding: 4px; padding: 0.3rem;
} }
#something-wrong { #something-wrong {
flex-direction: column; flex-direction: column;
@ -438,10 +441,10 @@ blockquote:before,
width: 100vw; width: 100vw;
background-color: var(--box); background-color: var(--box);
z-index: 9999; z-index: 9999;
padding: 10px; padding: 0.8rem;
display: grid; display: grid;
grid-template-columns: 3fr 1fr 1fr; grid-template-columns: 3fr 1fr 1fr;
grid-template-rows: 1fr 36px; grid-template-rows: 1fr 2.7rem;
grid-template-areas: 'note middle right' 'note close close'; grid-template-areas: 'note middle right' 'note close close';
} }
#support-btm-en, #support-btm-en,
@ -458,7 +461,7 @@ blockquote:before,
grid-area: close; grid-area: close;
} }
.select-wrapper .dropdown-content { .select-wrapper .dropdown-content {
width: 250px !important; width: 19.2rem !important;
} }
input, input,
textarea { textarea {
@ -474,7 +477,7 @@ textarea {
color: var(--color) !important; color: var(--color) !important;
} }
#src-contents svg { #src-contents svg {
margin-right: 5px; margin-right: 0.4rem;
} }
.contributor { .contributor {
cursor: pointer; cursor: pointer;
@ -484,11 +487,11 @@ textarea {
} }
.tagComp { .tagComp {
display: grid; display: grid;
grid-template-columns: 60px 80px 1fr; grid-template-columns: 4.6rem 6.15rem 1fr;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
grid-template-areas: 'svg toot user' 'svg toot tag' 'svg toots tag'; grid-template-areas: 'svg toot user' 'svg toot tag' 'svg toots tag';
border-top: dotted 0.5px var(--gray); border-top: dotted 0.5px var(--gray);
padding: 5px; padding: 0.4rem;
} }
.tagCompSvg { .tagCompSvg {
grid-area: svg; grid-area: svg;
@ -506,7 +509,7 @@ textarea {
} }
.tagCompTag { .tagCompTag {
grid-area: tag; grid-area: tag;
padding-top: 10px; padding-top: 0.4rem;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@ -517,15 +520,15 @@ textarea {
#pageSrc { #pageSrc {
position: absolute; position: absolute;
top: 0; top: 0;
left: calc(50vw - 150px); left: calc(50vw - 11.53rem);
width: 300px; width: 23rem;
max-width: 100%; max-width: 100%;
background-color: var(--box); background-color: var(--box);
z-index: 501; z-index: 501;
padding: 5px; padding: 0.4rem;
} }
#pageSrcInput { #pageSrcInput {
width: 160px; width: 12.3rem;
} }
.voice { .voice {
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
@ -576,7 +579,7 @@ textarea {
font-family: 'Material Icons'; font-family: 'Material Icons';
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-size: 24px; font-size: 1.84rem;
line-height: 1; line-height: 1;
letter-spacing: normal; letter-spacing: normal;
text-transform: none; text-transform: none;

151
app/css/post.css
View File

@ -1,145 +1,148 @@
/*トゥートボックス向けCSS*/ /*トゥートボックス向けCSS*/
#post-box { #post-box {
display: none; display: none;
position: fixed; position: fixed;
left: calc(50vw - 150px); left: calc(50vw - 150px);
top: 50vh; top: 50vh;
background-color: var(--postbox); background-color: var(--postbox);
border: thin solid gray; border: thin solid gray;
z-index: 501; z-index: 501;
max-width: 100%; max-width: 100%;
padding: 5px; padding: 0.4rem;
border-radius: 5px; border-radius: 0.4rem;
overflow: hidden; overflow: hidden;
} }
textarea { textarea {
min-height: 100px !important; min-height: 7.7rem !important;
font-family: inherit; font-family: inherit;
} }
#post-box .ui-resizable-s, #post-box .ui-resizable-se{ #post-box .ui-resizable-s,
display: none !important; #post-box .ui-resizable-se {
display: none !important;
} }
.cancel { .cancel {
font-size: 0.5rem; font-size: 0.5rem;
color: gray; color: gray;
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
right: 2px; right: 2px;
top: 4px; top: 4px;
} }
.more-show { .more-show {
display: none; display: none;
} }
#drag { #drag {
width: 100%; width: 100%;
height: 100px; height: 100px;
} }
#post-btn { #post-btn {
display: none; display: none;
} }
#vis { #vis {
text-transform: capitalize; text-transform: capitalize;
} }
#cw-text { #cw-text {
display: none; display: none;
} }
#sch-box { #sch-box {
display: none; display: none;
} }
#sch-box input { #sch-box input {
width: auto; width: auto;
} }
.picker__close, .picker__close,
.picker__today, .picker__today,
.picker__clear { .picker__clear {
color: #26a69a !important; color: #26a69a !important;
} }
.cw { .cw {
display: none; display: none;
} }
.sensitive { .sensitive {
filter: blur(50px); filter: blur(50px);
} }
#emoji { #emoji {
} }
#suggest { #suggest {
max-height: 300px; max-height: 23rem;
overflow-y: scroll; overflow-y: scroll;
} }
#emoji-list { #emoji-list {
width: 100%; width: 100%;
height: 200px; height: 15.4rem;
overflow-y: scroll; overflow-y: scroll;
} }
#preview-field { #preview-field {
display: none; display: none;
} }
.preview-img { .preview-img {
width: 50px; width: 4rem;
max-height: 100px; max-height: 7.6rem;
} }
.pi-wrap { .pi-wrap {
display: inline-block; display: inline-block;
width: 50px; width: 3.8rem;
max-height: 100px; max-height: 7.7rem;
} }
#default-emoji a { #default-emoji a {
color: var(--color); color: var(--color);
margin-right: 2px; margin-right: 0.15rem;
} }
.character-counter { .character-counter {
position: relative; position: relative;
top: -25px; top: -1.9rem;
} }
.trendtag { .trendtag {
overflow-y: scroll; overflow-y: scroll;
max-height: 100px; max-height: 7.7rem;
} }
#toot-btn-field { #toot-btn-field {
display: flex; display: flex;
} }
#toot-post-btn { #toot-post-btn {
width: calc(100% - 10px); width: calc(100% - 0.7rem);
padding: 0; padding: 0;
margin-top: 10px; margin-top: 0.7rem;
height: 2.7rem;
} }
#toot-sec-btn { #toot-sec-btn {
width: 30px; width: 2.3rem;
padding: 0; padding: 0;
margin-top: 10px; margin-top: 0.7rem;
} }
#left-side { #left-side {
float: left; float: left;
overflow-x: hidden; overflow-x: hidden;
height: calc(100% - 32px); height: calc(100% - 2.5rem);
} }
#right-side { #right-side {
display: none; display: none;
float: left; float: left;
width: 300px; width: 23rem;
padding: 5px; padding: 0.4rem;
overflow-x: hidden; overflow-x: hidden;
height: calc(100% - 32px); height: calc(100% - 2.5rem);
} }
#posttgl,#toot-post-btn { #posttgl,
background-color: var(--accentbtn); #toot-post-btn {
color: var(--color); background-color: var(--accentbtn);
color: var(--color);
} }
/*mini*/ /*mini*/
.mini-post .mize { .mini-post .mize {
display: none !important; display: none !important;
} }
.mini-post #textarea { .mini-post #textarea {
padding: 0; padding: 0;
} }
.mini-post #post-box { .mini-post #post-box {
width: 200px; width: 15.4rem;
min-width: 100px; min-width: 7.7rem;
} }
.mini-post #toot-field { .mini-post #toot-field {
padding: 0; padding: 0;
} }
.mini-post #toot-btn-field { .mini-post #toot-btn-field {
padding: 0; padding: 0;
} }

14
app/css/sort.css
View File

@ -3,29 +3,29 @@
cursor: move; cursor: move;
user-select: none; user-select: none;
background-color: var(--modalfooter); background-color: var(--modalfooter);
margin: 5px; margin: 0.4rem;
border-radius: 5px; border-radius: 0.4rem;
color: var(--color); color: var(--color);
padding: 3px; padding: 3px;
display: grid; display: grid;
grid-template-columns: 43px 1fr 60px; grid-template-columns: 3.3rem 1fr 4.6rem;
grid-template-areas: "sorticon sorttitle sorttitle" "sorticon sortacct sortaction"; grid-template-areas: "sorticon sorttitle sorttitle" "sorticon sortacct sortaction";
} }
.sorticon { .sorticon {
grid-area: sorticon; grid-area: sorticon;
} }
.sorticon i { .sorticon i {
font-size: 43px; font-size: 3.3rem;
} }
.sorttitle { .sorttitle {
margin-left: 5px; margin-left: 0.4rem;
grid-area: sorttitle; grid-area: sorttitle;
} }
.sortacct { .sortacct {
margin-left: 5px; margin-left: 0.4rem;
grid-area: sortacct; grid-area: sortacct;
} }
.sortaction { .sortaction {
margin-left: 5px; margin-left: 0.4rem;
grid-area: sortaction; grid-area: sortaction;
} }

261
app/css/tl.css
View File

@ -1,7 +1,7 @@
/*TL CSS(ただしBBCode pulse:master.css/spin:font-awesome*/ /*TL CSS(ただしBBCode pulse:master.css/spin:font-awesome*/
#main { #main {
width: 100vw; width: 100vw;
height: calc(100vh - 40px); height: calc(100% - 3rem);
} }
#timeline-container { #timeline-container {
overflow-x: scroll; overflow-x: scroll;
@ -11,18 +11,19 @@
} }
#bottom { #bottom {
position: absolute; position: absolute;
overflow: hidden;
bottom: 0; bottom: 0;
width: 100vw; width: 100vw;
height: 40px; height: 3rem;
padding: 3px; padding: 0.23rem;
padding-right: 0; padding-right: 0;
padding-left: 40px; padding-left: 3rem;
background-color: var(--sidebar); background-color: var(--sidebar);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
z-index: 500; z-index: 500;
box-shadow: 10px 0 10px 10px rgba(0, 0, 0, 0.2); box-shadow: 0.77rem 0 0.77rem, 0.77rem rgba(0, 0, 0, 0.2);
} }
#demobottom { #demobottom {
width: 500px; width: 500px;
@ -30,24 +31,24 @@
} }
#bottom.reverse { #bottom.reverse {
padding-left: 0; padding-left: 0;
padding-right: 40px; padding-right: 3rem;
} }
.reverse { .reverse {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
#bottom #dambox { #bottom #dambox {
width: 300px; width: 23rem;
margin-right: 10px; margin-right: 0.76rem;
} }
#bottom.reverse #dambox { #bottom.reverse #dambox {
margin-right: 0; margin-right: 0;
} }
#bottom .trendtag { #bottom .trendtag {
height: 40px; height: 3rem;
} }
#bottom #group, #bottom #group,
#demogroup { #demogroup {
margin-right: 40px; margin-right: 3rem;
} }
#bottom .leftside { #bottom .leftside {
display: flex; display: flex;
@ -57,41 +58,41 @@
align-items: center; align-items: center;
} }
#bottom #tips img { #bottom #tips img {
vertical-align: -3px; vertical-align: -0.23rem;
} }
#bottom a, #bottom a,
#demogroup a { #demogroup a {
color: var(--color); color: var(--color);
} }
#bottom i { #bottom i {
font-size: 30px; font-size: 2.3rem;
} }
.exc-icons { .exc-icons {
font-size: 20px; font-size: 1.53rem;
} }
.exc-chb { .exc-chb {
padding-left: 24px !important; padding-left: 1.84rem !important;
} }
.btnsgroup { .btnsgroup {
border: 1px solid; border: 1px solid;
padding-top: 1px; padding-top: 1px;
padding-left: 5px; padding-left: 0.4rem;
padding-right: 5px; padding-right: 0.4rem;
margin-right: 15px; margin-right: 1.15rem;
border-radius: 5px; border-radius: 0.4rem;
height: 35px; height: 2.7rem;
} }
.bgReport { .bgReport {
height: 34px; height: 2.61rem;
padding-top: 0.45rem; padding-top: 0.45rem;
text-decoration: underline; text-decoration: underline;
padding-left: 5px; padding-left: 0.4rem;
padding-right: 5px; padding-right: 0.4rem;
} }
#spot-box { #spot-box {
display: grid; display: grid;
grid-template-columns: 40px 30px 2.5fr 1fr 60px; grid-template-columns: 3rem 2.3rem 2.5fr 1fr 4.6rem;
grid-template-rows: 22px 20px; grid-template-rows: 1.7rem 1.5rem;
grid-template-areas: 'cover name name artist refresh' 'cover progress progress progress time'; grid-template-areas: 'cover name name artist refresh' 'cover progress progress progress time';
} }
#spot-refresh { #spot-refresh {
@ -105,14 +106,14 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
line-height: 25px; line-height: 1.92rem;
} }
#spot-artist { #spot-artist {
grid-area: artist; grid-area: artist;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
line-height: 25px; line-height: 1.92rem;
} }
#spot-img { #spot-img {
width: 90%; width: 90%;
@ -126,7 +127,7 @@
} }
.btnsgroup .grouptitle { .btnsgroup .grouptitle {
font-family: Open Sans; font-family: Open Sans;
font-size: 15px; font-size: 1.1rem;
} }
@media screen and (max-width: 890px) { @media screen and (max-width: 890px) {
.btnsgroup .grouptitle { .btnsgroup .grouptitle {
@ -140,7 +141,7 @@
iframe, iframe,
.cvo video { .cvo video {
max-width: 100%; max-width: 100%;
max-height: 300px; max-height: 23rem;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.mobile #timeline-container { .mobile #timeline-container {
@ -156,12 +157,12 @@ iframe,
} }
.box { .box {
overflow: hidden; overflow: hidden;
min-width: 300px; min-width: 23rem;
flex: 1; flex: 1;
border-top: none; border-top: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: -10px; margin-bottom: -0.75rem;
} }
.img_FTL { .img_FTL {
display: none; display: none;
@ -215,16 +216,16 @@ iframe,
} }
.emoji, .emoji,
.emoji-img { .emoji-img {
width: 15px; width: 1.153rem;
} }
.area-toot .emoji, .area-toot .emoji,
.area-toot .emoji-img { .area-toot .emoji-img {
width: 20px; width: 1.538rem;
vertical-align: middle; vertical-align: middle;
margin: -1px 0; margin: -1px 0;
} }
.bigemoji { .bigemoji {
width: 100px !important; width: 7.7rem !important;
height: auto !important; height: auto !important;
position: relative; position: relative;
z-index: 9999; z-index: 9999;
@ -253,13 +254,13 @@ iframe,
} }
.cvo { .cvo {
user-select: text; user-select: text;
padding-left: 5px; padding-left: 0.4rem;
border-bottom: 0.5px solid; border-bottom: 0.5px solid;
padding-right: 2px; padding-right: 0.15rem;
word-break: break-word; word-break: break-word;
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 43px 2fr 1fr; 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 2.5rem;
grid-template-areas: 'notice notice notice' 'icon display_name display_name' 'space toot toot' 'space additional additional' 'vis actions side'; grid-template-areas: 'notice notice notice' 'icon display_name display_name' 'space toot toot' 'space additional additional' 'vis actions side';
} }
@ -285,21 +286,21 @@ iframe,
} }
.area-notice { .area-notice {
margin: 2px; margin: 0.15rem;
grid-area: notice; grid-area: notice;
} }
.area-icon { .area-icon {
width: 40px; width: 3rem;
margin: 2px; margin: 0.15rem;
grid-area: icon; grid-area: icon;
} }
.area-display_name { .area-display_name {
user-select: text; user-select: text;
height: 1.5em; height: 1.5em;
margin: 2px; margin: 0.15rem;
margin-left: 5px; margin-left: 0.4rem;
overflow: hidden; overflow: hidden;
grid-area: display_name; grid-area: display_name;
white-space: nowrap; white-space: nowrap;
@ -310,7 +311,7 @@ iframe,
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.flex-name { .flex-name {
max-width: calc(100% - 60px); max-width: calc(100% - 4.6rem);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@ -318,9 +319,9 @@ iframe,
.area-toot { .area-toot {
cursor: text; cursor: text;
user-select: auto; user-select: auto;
margin-top: 5px; margin-top: 0.4rem;
margin-bottom: 5px; margin-bottom: 0.4rem;
margin-left: 5px; margin-left: 0.4rem;
grid-area: toot; grid-area: toot;
} }
@ -353,7 +354,7 @@ iframe,
.area-actions { .area-actions {
padding: 0; padding: 0;
margin: 0; margin: 0;
top: -5px; top: -0.4rem;
position: relative; position: relative;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
@ -361,28 +362,28 @@ iframe,
grid-area: actions; grid-area: actions;
} }
.area-vis { .area-vis {
margin: 2px; margin: 0.4rem;
grid-area: vis; grid-area: vis;
text-align: center; text-align: center;
} }
.area-side { .area-side {
display: flex; display: flex;
top: -5px; top: -0.4rem;
position: relative; position: relative;
justify-content: flex-end; justify-content: flex-end;
margin: 2px; margin: 0.15rem;
grid-area: side; grid-area: side;
} }
.cusr { .cusr {
user-select: text; user-select: text;
padding-left: 5px; padding-left: 0.4rem;
border-bottom: 0.5px solid; border-bottom: 0.5px solid;
padding-right: 2px; padding-right: 0.15rem;
word-break: break-word; word-break: break-word;
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 43px 2fr 1fr; grid-template-columns: 3.3rem 2fr 1fr;
grid-template-rows: auto 1.6rem 2fr auto; grid-template-rows: auto 1.6rem 2fr auto;
grid-template-areas: 'notice notice notice' 'icon display_name display_name' 'space status status' 'space actions actions'; grid-template-areas: 'notice notice notice' 'icon display_name display_name' 'space status status' 'space actions actions';
} }
@ -391,12 +392,12 @@ iframe,
grid-area: status; grid-area: status;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 5px; margin-bottom: 0.75rem;
} }
.cusr .cbadge { .cusr .cbadge {
margin-top: 6px; margin-top: 0.46rem;
margin-left: 6px; margin-left: 0.46rem;
} }
.quote-inline { .quote-inline {
@ -404,16 +405,16 @@ iframe,
} }
.quote-renote { .quote-renote {
display: grid; display: grid;
grid-template-columns: 43px 2fr 25px; grid-template-columns: 3.3rem 2fr 1.92rem;
grid-template-areas: 'ricon ruser rdet' 'ricon rtext rdet'; grid-template-areas: 'ricon ruser rdet' 'ricon rtext rdet';
border: 1px solid; border: 1px solid;
margin-top: 3px; margin-top: 0.23rem;
padding: 1px; padding: 1px;
border-radius: 3px; border-radius: 0.23rem;
} }
.renote-icon { .renote-icon {
grid-area: ricon; grid-area: ricon;
padding: 5px; padding: 0.4rem;
} }
.renote-details { .renote-details {
grid-area: rdet; grid-area: rdet;
@ -432,17 +433,17 @@ iframe,
color: var(--color); color: var(--color);
} }
.area-side i { .area-side i {
margin-left: 10px; margin-left: 0.75rem;
} }
.viabadge { .viabadge {
margin-top: 10px; margin-top: 0.75rem;
} }
.action i { .action i {
font-size: 1.2rem; font-size: 1.2rem;
margin-right: 2px; margin-right: 0.15rem;
} }
.action .fa-quote-right { .action .fa-quote-right {
margin-top: 2px; margin-top: 0.15rem;
} }
.actct { .actct {
color: var(--beforehover); color: var(--beforehover);
@ -461,24 +462,24 @@ iframe,
position: fixed; position: fixed;
background-color: var(--box); background-color: var(--box);
z-index: 9999; z-index: 9999;
border-radius: 5px; border-radius: 0.4rem;
padding: 5px; padding: 0.4rem;
} }
.contextMenu.bottom:before { .contextMenu.bottom:before {
content: ''; content: '';
position: absolute; position: absolute;
top: 100%; top: 100%;
right: 27px; right: 2rem;
border: 15px solid transparent; border: 1.2rem solid transparent;
border-top: 15px solid var(--box); border-top: 1.2rem solid var(--box);
} }
.contextMenu.top:before { .contextMenu.top:before {
content: ''; content: '';
position: absolute; position: absolute;
top: -30px; top: -2.3rem;
right: 27px; right: 2rem;
border: 15px solid transparent; border: 1.5rem solid transparent;
border-bottom: 15px solid var(--box); border-bottom: 1.5rem solid var(--box);
} }
.contextMenu .btn-flat { .contextMenu .btn-flat {
text-transform: none !important; text-transform: none !important;
@ -501,26 +502,26 @@ iframe,
} }
.toot img:not(.emoji-img) { .toot img:not(.emoji-img) {
max-width: 100%; max-width: 100%;
max-height: 300px; max-height: 23rem;
} }
.cbadge { .cbadge {
display: inline-block; display: inline-block;
min-width: 10px; min-width: 0.76rem;
max-width: 100px; max-width: 7.7rem;
padding: 3px 7px; padding: 0.23rem 0.5rem;
font-size: 0.8em; font-size: 0.8em;
margin-right: 5px; margin-right: 0.4rem;
line-height: 1; line-height: 1;
color: #fff; color: #fff;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
background-color: #777; background-color: #777;
border-radius: 10px; border-radius: 0.75rem;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
height: calc(0.8em + 8px); height: calc(0.8em + 0.6rem);
user-select: none; user-select: none;
} }
.cbadge-hover { .cbadge-hover {
@ -534,10 +535,10 @@ iframe,
p { p {
margin: 0; margin: 0;
margin-bottom: 0px; margin-bottom: 0px;
line-height: 20px; line-height: 1.53rem;
} }
p:not(:last-child) { p:not(:last-child) {
margin-bottom: 10px; margin-bottom: 0.76rem;
} }
.shared { .shared {
background-color: var(--shared); background-color: var(--shared);
@ -553,14 +554,14 @@ p:not(:last-child) {
background-color: var(--notfbox); background-color: var(--notfbox);
filter: brightness(110%); filter: brightness(110%);
position: relative; position: relative;
margin-right: 10px; margin-right: 0.7rem;
width: 100%; width: 100%;
min-height: 60px; min-height: 4.6rem;
z-index: 500; z-index: 500;
padding: 5px; padding: 0.4rem;
display: grid; display: grid;
grid-template-columns: 40px 65px 1fr 24px; grid-template-columns: 3rem 5rem 1fr 1.8rem;
grid-template-rows: 30px 30px; 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'; grid-template-areas: 'notice notice_name notice_name a2' 'notice a1 sta a3' 'notf-box notf-box notf-box notf-box';
} }
.emp { .emp {
@ -604,8 +605,8 @@ p:not(:last-child) {
} }
#tools { #tools {
position: fixed; position: fixed;
top: 10px; top: 0.76rem;
right: 10px; right: 0.76rem;
float: right; float: right;
} }
.setting { .setting {
@ -618,14 +619,14 @@ p:not(:last-child) {
} }
.notf-box { .notf-box {
position: fixed; position: fixed;
right: 70px; right: 5.4rem;
background-color: var(--box); background-color: var(--box);
border: thin solid gray; border: thin solid gray;
z-index: 501; z-index: 501;
width: 400px; width: 30rem;
padding: 5px; padding: 0.4rem;
min-height: 100px; min-height: 7.7rem;
max-height: 500px; max-height: 38.4rem;
} }
.column-hide { .column-hide {
display: none; display: none;
@ -633,17 +634,21 @@ p:not(:last-child) {
height: 0; height: 0;
} }
.prof-img { .prof-img {
border-radius: 3px; border-radius: 0.23rem;
width: 3rem;
}
.prof-img-sml {
width: 1.5rem;
} }
.notf-icon { .notf-icon {
position: relative; position: relative;
top: -20px; top: -1.53rem;
width: 20px; width: 1.5rem;
left: 20px; left: 1.5rem;
} }
.notf-indv-box { .notf-indv-box {
width: 100%; width: 100%;
max-height: 400px; max-height: 30.7rem;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
border: thin solid gray; border: thin solid gray;
@ -676,44 +681,44 @@ p:not(:last-child) {
.vote { .vote {
width: 100%; width: 100%;
border: 1px solid; border: 1px solid;
margin-top: 3px; margin-top: 0.23rem;
padding: 1px; padding: 1px;
border-radius: 3px; border-radius: 0.23rem;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
.fa-2x > .emoji-img { .fa-2x > .emoji-img {
width: 36px !important; width: 2.3rem !important;
height: 36px !important; height: 2.3rem !important;
} }
.fa-3x > .emoji-img { .fa-3x > .emoji-img {
width: 54px !important; width: 4.15rem !important;
height: 54px !important; height: 4.15rem !important;
} }
.fa-4x > .emoji-img { .fa-4x > .emoji-img {
width: 72px !important; width: 4.6rem !important;
height: 72px !important; height: 4.6rem !important;
} }
.fa-5x > .emoji-img { .fa-5x > .emoji-img {
width: 90px !important; width: 6.9rem !important;
height: 90px !important; height: 6.9rem !important;
} }
#lists-user { #lists-user {
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
max-height: 200px; max-height: 15.4rem;
} }
.votebtn { .votebtn {
border: 1px solid; border: 1px solid;
color: var(--bg); color: var(--bg);
background-color: var(--beforehover); background-color: var(--beforehover);
cursor: pointer; cursor: pointer;
width: 50px; width: 3.8rem;
padding: 2px; padding: 1.5rem;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
margin-top: 5px; margin-top: 0.38rem;
border-radius: 10px; border-radius: 0.75rem;
transition-duration: 0.5s; transition-duration: 0.5s;
} }
.votebtn:hover { .votebtn:hover {
@ -722,8 +727,8 @@ p:not(:last-child) {
.leadPoll { .leadPoll {
position: absolute; position: absolute;
background-color: var(--box); background-color: var(--box);
height: 20px; height: 1.5rem;
border-radius: 3px; border-radius: 0.23rem;
} }
.lpAnime { .lpAnime {
animation-duration: 1s; animation-duration: 1s;
@ -740,7 +745,7 @@ p:not(:last-child) {
width: 1.2rem !important; width: 1.2rem !important;
position: relative; position: relative;
top: -1px; top: -1px;
margin-left: 5px !important; margin-left: 0.38rem !important;
} }
.jump { .jump {
display: inline-block; display: inline-block;
@ -778,18 +783,18 @@ audio {
white-space: normal; white-space: normal;
} }
.cw_btn { .cw_btn {
margin: 3px; margin: 0.23rem;
background-color: var(--emphasized); background-color: var(--emphasized);
color: var(--color); color: var(--color);
padding-left: 3px; padding-left: 0.23rem;
padding-right: 3px; padding-right: 0.23rem;
border-radius: 3px; border-radius: 0.23rem;
border: 1px solid var(--color); border: 1px solid var(--color);
user-select: none; user-select: none;
} }
.vis-data { .vis-data {
font-size: 1rem !important; font-size: 1rem !important;
margin: 5px; margin: 0.4rem;
user-select: none; user-select: none;
} }
@keyframes jump { @keyframes jump {
@ -863,29 +868,29 @@ audio {
display: none !important; display: none !important;
} }
.announcement { .announcement {
padding: 5px; padding: 0.38rem;
border-bottom: 1px solid; border-bottom: 1px solid;
} }
.announReaction { .announReaction {
width: 35px; width: 2.7rem;
height: 1.7rem; height: 1.7rem;
font-size: 1.1rem; font-size: 1.1rem;
margin: 3px; margin: 0.23rem;
cursor: pointer; cursor: pointer;
border: solid 1px; border: solid 1px;
padding-left: 2px; padding-left: 0.15rem;
background-color: var(--notfbox); background-color: var(--notfbox);
border-radius: 2px; border-radius: 0.15rem;
} }
.announReaction img { .announReaction img {
position: relative; position: relative;
top: 3px; top: 0.23rem;
} }
.announReaction.reactioned { .announReaction.reactioned {
background-color: var(--emphasized); background-color: var(--emphasized);
} }
.announReaction.add { .announReaction.add {
width: 19px; width: 1.46rem;
} }
.reactionsPack { .reactionsPack {
display: flex; display: flex;

48
app/css/userdata.css
View File

@ -16,27 +16,27 @@
} }
#his-prof { #his-prof {
float: left; float: left;
width: 100px; width: 7.7rem;
margin-right: 5px; margin-right: 0.4rem;
} }
.his-float { .his-float {
overflow-y: scroll; overflow-y: scroll;
padding: 5px; padding: 0.4rem;
} }
#his-float-data { #his-float-data {
height: 100%; height: 100%;
overflow-y: hidden; overflow-y: hidden;
} }
#his-leftside { #his-leftside {
width: 500px; width: 38.4rem;
} }
#his-float-timeline { #his-float-timeline {
max-width: 775px; max-width: 59.6rem;
height: 100%; height: 100%;
overflow-y: hidden; overflow-y: hidden;
} }
#his-basic-prof { #his-basic-prof {
min-height: 130px; min-height: 10rem;
} }
#his-field { #his-field {
vertical-align: baseline; vertical-align: baseline;
@ -51,14 +51,14 @@
padding: 0; padding: 0;
background-color: #757575; background-color: #757575;
text-align: center; text-align: center;
padding: 5px; padding: 0.4rem;
margin-bottom: 1px; margin-bottom: 1px;
width: 30%; width: 30%;
} }
.his-field-content { .his-field-content {
height: 1.5rem; height: 1.5rem;
padding: 0; padding: 0;
padding-left: 5px; padding-left: 0.4rem;
} }
.his-var-content a span.ellipsis:after { .his-var-content a span.ellipsis:after {
content: "..."; content: "...";
@ -72,13 +72,13 @@
display: inline !important; display: inline !important;
} }
#his-data-show { #his-data-show {
margin: 20px; margin: 1.5rem;
margin-left: 50px; margin-left: 3.8rem;
margin-right: 50px; margin-right: 3.8rem;
background-color: var(--his-data); background-color: var(--his-data);
height: calc(100% - 20px); height: calc(100% - 1.5rem);
margin-bottom: 0; margin-bottom: 0;
padding: 5px; padding: 0.4rem;
} }
#his-data-wrap { #his-data-wrap {
display: flex; display: flex;
@ -86,39 +86,39 @@
.his-var-content { .his-var-content {
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
height: calc(100% - 45px); height: calc(100% - 3.4rem);
} }
#my-data-nav .btn { #my-data-nav .btn {
width: 140px; width: 10.7rem;
} }
.active-back { .active-back {
background-color: var(--active); background-color: var(--active);
} }
#his-name .emojione, #his-name .emojione,
#his-name .emoji-img { #his-name .emoji-img {
width: 20px; width: 1.538rem;
} }
#his-plus-action .btn { #his-plus-action .btn {
padding-right: 5px; padding-right: 0.4rem;
padding-left: 5px; padding-left: 0.4rem;
} }
.tabs { .tabs {
display: flex; display: flex;
} }
.tabs .tab a { .tabs .tab a {
padding: 8px 12px; padding: 0.6rem 0.9rem;
} }
#his-des { #his-des {
max-height: 250px; max-height: 17.7rem;
overflow-y: scroll; overflow-y: scroll;
} }
#his-sign-action { #his-sign-action {
border: 1px solid; border: 1px solid;
border-radius: 5px; border-radius: 0.4rem;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 10px; padding-left: 0.75rem;
padding-right: 10px; padding-right: 0.75rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
#his-sign-action .btn { #his-sign-action .btn {
@ -129,7 +129,7 @@
cursor: pointer; cursor: pointer;
} }
#his-table{ #his-table{
max-height: 150px; max-height: 11.538rem;
overflow-y: scroll; overflow-y: scroll;
} }
#his-float-blocked { #his-float-blocked {

4
app/js/emoji/default-emoji.js
View File

@ -51,7 +51,7 @@ function defaultEmoji(target) {
emojis + emojis +
`${def} `${def}
<span style=" <span style="
width: 20px; height: 20px; display: inline-block; background-image: url('../../img/sheet.png'); background-size: 4900%; width: 1.538rem; height: 1.538rem; display: inline-block; background-image: url('../../img/sheet.png'); background-size: 4900%;
background-position:${emoji['css']};"></span> background-position:${emoji['css']};"></span>
</a>` </a>`
}) })
@ -95,7 +95,7 @@ function faicon() {
emojis + emojis +
'<a onclick="emojiInsert(\'[faicon]' + '<a onclick="emojiInsert(\'[faicon]' +
eje + eje +
'[/faicon]\')" class="pointer white-text" style="font-size:24px"><i class="fa ' + '[/faicon]\')" class="pointer white-text" style="font-size:1.8rem"><i class="fa ' +
emoji + emoji +
'"></i></a>' '"></i></a>'
}) })

2
app/js/post/status.js
View File

@ -430,7 +430,7 @@ function redraft(id, acct_id) {
$('#preview').append( $('#preview').append(
'<img src="' + '<img src="' +
json.media_attachments[i].preview_url + json.media_attachments[i].preview_url +
'" style="width:50px; max-height:100px;">' '" style="width:3.8rem; max-height:7.7rem;">'
) )
} else { } else {
break break

4
app/js/tl/misskeyparse.js
View File

@ -186,7 +186,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
noticeavatar = '<a onclick="udg(\'' + toot.user.id + noticeavatar = '<a onclick="udg(\'' + toot.user.id +
'\',' + acct_id + ');" user="' + toot.user.username + '" class="udg notf-icon">' + '\',' + acct_id + ');" user="' + toot.user.username + '" class="udg notf-icon">' +
'<img src="' + noticeavatar + '<img src="' + noticeavatar +
'" width="20" class="prof-img" user="' + toot.user.username + '" class="prof-img prof-img-sml" user="' + toot.user.username +
'"></a>'; '"></a>';
if (toot.type == "reply") { if (toot.type == "reply") {
var what = lang.lang_parse_mentioned; var what = lang.lang_parse_mentioned;
@ -773,7 +773,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
'<div class="area-icon"><a onclick="udg(\'' + toot.user.id + '<div class="area-icon"><a onclick="udg(\'' + toot.user.id +
'\',' + acct_id + ');" user="' + toot.user.username + '" class="udg">' + '\',' + acct_id + ');" user="' + toot.user.username + '" class="udg">' +
'<img src="' + avatar + '<img src="' + avatar +
'" width="40" class="prof-img" user="' + toot.user.username + '" class="prof-img" user="' + toot.user.username +
'" onerror="this.src=\'../../img/loading.svg\'"></a></div>' + '" onerror="this.src=\'../../img/loading.svg\'"></a></div>' +
'<div class="area-display_name"><div class="flex-name"><span class="user">' + '<div class="area-display_name"><div class="flex-name"><span class="user">' +
dis_name + dis_name +

13
app/js/tl/parse.js
View File

@ -241,7 +241,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
noticeavatar = toot.account.avatar_static noticeavatar = toot.account.avatar_static
} }
noticeavatar = `<a onclick="udg('${toot.account.id}','${acct_id}');" user="${toot.account.acct}" class="udg"> noticeavatar = `<a onclick="udg('${toot.account.id}','${acct_id}');" user="${toot.account.acct}" class="udg">
<img draggable="false" src="${noticeavatar}" width="20" class="notf-icon prof-img" user="${toot.account.acct}" alt=""> <img draggable="false" src="${noticeavatar}" class="notf-icon prof-img prof-img-sml" user="${toot.account.acct}" alt="">
</a>` </a>`
if (toot.type == 'mention') { if (toot.type == 'mention') {
var what = lang.lang_parse_mentioned var what = lang.lang_parse_mentioned
@ -394,7 +394,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
noticeavatar = toot.account.avatar_static noticeavatar = toot.account.avatar_static
} }
noticeavatar = `<a onclick="udg('${toot.account.id}','${acct_id}');" user="${toot.account.acct}" class="notf-icon udg" aria-hidden="true"> noticeavatar = `<a onclick="udg('${toot.account.id}','${acct_id}');" user="${toot.account.acct}" class="notf-icon udg" aria-hidden="true">
<img draggable="false" src="${noticeavatar}" width="20" class="prof-img" <img draggable="false" src="${noticeavatar}" class="prof-img prof-img-sml"
user="${toot.account.acct}" onerror="this.src=\'../../img/loading.svg\'"> user="${toot.account.acct}" onerror="this.src=\'../../img/loading.svg\'">
</a>` </a>`
var rebtxt = lang.lang_parse_btedsimple var rebtxt = lang.lang_parse_btedsimple
@ -1286,20 +1286,19 @@ function userparse(obj, auth, acct_id, tlid, popup) {
} }
var latest = date(toot.last_status_at, 'relative') var latest = date(toot.last_status_at, 'relative')
if (toot.last_status_at) { if (toot.last_status_at) {
var latesthtml = `<div class="cbadge" style="width:100px;">Last <span class="voice">toot</span>: ${latest}</div>` var latesthtml = `<div class="cbadge" style="width:7.7rem;">Last <span class="voice">toot</span>: ${latest}</div>`
} else { } else {
var latesthtml = '' var latesthtml = ''
} }
templete = templete =
templete + templete +
`<div class="cusr" style="padding-top:5px;" user-id="${toot.id}"> `<div class="cusr" style="padding-top:0.4rem;" user-id="${toot.id}">
<div class="area-notice">${notftext}</div> <div class="area-notice">${notftext}</div>
<div class="area-icon"> <div class="area-icon">
${udg} ${udg}
<img <img
draggable="false" draggable="false"
src="${avatar}" src="${avatar}"
width="40"
class="prof-img" class="prof-img"
user="${toot.acct}" user="${toot.acct}"
onerror="this.src='../../img/loading.svg'" onerror="this.src='../../img/loading.svg'"
@ -1317,10 +1316,10 @@ function userparse(obj, auth, acct_id, tlid, popup) {
</div> </div>
</div> </div>
<div class="area-status"> <div class="area-status">
<div class="cbadge" style="width:100px;"> <div class="cbadge" style="width:7.7rem;">
${lang.lang_status_follow}:${toot.following_count} ${lang.lang_status_follow}:${toot.following_count}
</div> </div>
<div class="cbadge" style="width:100px;"> <div class="cbadge" style="width:7.7rem;">
${lang.lang_status_followers}:${toot.followers_count} ${lang.lang_status_followers}:${toot.followers_count}
</div> </div>
${latesthtml} ${latesthtml}

2
app/js/tl/tag.js
View File

@ -133,7 +133,7 @@ function trendTag() {
</span> ` </span> `
}) })
$('#taglist').append( $('#taglist').append(
'<div class="trendtag">アイマストドントレンドタグ<i class="material-icons pointer" onclick="trendTag()" style="font-size:12px">refresh</i>:' + '<div class="trendtag">アイマストドントレンドタグ<i class="material-icons pointer" onclick="trendTag()" style="font-size:0.9rem">refresh</i>:' +
tags + tags +
'</div>' '</div>'
) )

26
app/js/ui/layout.js
View File

@ -28,9 +28,7 @@ function parseColumn(target, dontclose) {
console.log('%c Parse column', 'color:red;font-size:125%') console.log('%c Parse column', 'color:red;font-size:125%')
var size = localStorage.getItem('size') var size = localStorage.getItem('size')
if (size) { if (size) {
$('#timeline-container').css('font-size', size + 'px') $('html').css('font-size', size + 'px')
$('.toot-reset').css('font-size', size + 'px')
$('.cont-series').css('font-size', size + 'px')
} }
if (localStorage.getItem('menu-done')) { if (localStorage.getItem('menu-done')) {
$('#fukidashi').addClass('hide') $('#fukidashi').addClass('hide')
@ -262,11 +260,11 @@ function parseColumn(target, dontclose) {
<i class="fas fa-tasks exc-icons"></i> <i class="fas fa-tasks exc-icons"></i>
</span> </span>
</label> </label>
<button class="btn waves-effect" style="width:60px; padding:0;" onclick="exclude('${key}')">Filter</button>` <button class="btn waves-effect" style="width:4.6rem; padding:0;" onclick="exclude('${key}')">Filter</button>`
if (checkNotfFilter(key)) { if (checkNotfFilter(key)) {
exclude = exclude =
exclude + exclude +
`<button class="btn red waves-effect" style="width:60px; padding:0;" onclick="resetNotfFilter('${key}')"> `<button class="btn red waves-effect" style="width:4.6rem; padding:0;" onclick="resetNotfFilter('${key}')">
Clear all Clear all
</button>` </button>`
} }
@ -275,7 +273,7 @@ function parseColumn(target, dontclose) {
notfKey = 'dummy' notfKey = 'dummy'
} else if (acct.type == 'home') { } else if (acct.type == 'home') {
var exclude = `<a onclick="ebtToggle('${key}')" class="setting nex"> var exclude = `<a onclick="ebtToggle('${key}')" class="setting nex">
<i class="fas fa-retweet waves-effect nex" title="${lang.lang_layout_excludingbt}" style="font-size:24px"></i> <i class="fas fa-retweet waves-effect nex" title="${lang.lang_layout_excludingbt}" style="font-size:1.84rem"></i>
<span id="sta-bt-${key}">Off</span> <span id="sta-bt-${key}">Off</span>
</a> </a>
${lang.lang_layout_excludingbt} ${lang.lang_layout_excludingbt}
@ -292,7 +290,7 @@ function parseColumn(target, dontclose) {
var any = '' var any = ''
var none = '' var none = ''
} }
if_tag = `<div class="column-hide notf-indv-box" id="tag-box_${key}" style="padding:5px;"> if_tag = `<div class="column-hide notf-indv-box" id="tag-box_${key}" style="padding:0.4rem;">
Base: ${name}<br> Base: ${name}<br>
<div id="tagManager-${key}"> <div id="tagManager-${key}">
all: <input type="text" id="all_tm-${key}"" value="${all}"> all: <input type="text" id="all_tm-${key}"" value="${all}">
@ -302,7 +300,7 @@ function parseColumn(target, dontclose) {
<button onclick="addTag('${key}')" class="btn waves-effect" style="width: 100%">Refresh</button> <button onclick="addTag('${key}')" class="btn waves-effect" style="width: 100%">Refresh</button>
</div>` </div>`
if_tag_btn = `<a onclick="setToggleTag('${key}')" class="setting nex" if_tag_btn = `<a onclick="setToggleTag('${key}')" class="setting nex"
title="${lang.lang_layout_tagManager}" style="width:30px"> title="${lang.lang_layout_tagManager}" style="width:2.4rem">
<i class="material-icons waves-effect nex">note_add</i> <i class="material-icons waves-effect nex">note_add</i>
</a>` </a>`
unread = '' unread = ''
@ -371,7 +369,7 @@ function parseColumn(target, dontclose) {
<div class="notice-box z-depth-2" id="menu_${key}" style="${insert}"> <div class="notice-box z-depth-2" id="menu_${key}" style="${insert}">
<div class="area-notice"> <div class="area-notice">
<i class="material-icons waves-effect ${isMisRed}" id="notice_icon_${key}" ${notf_attr} <i class="material-icons waves-effect ${isMisRed}" id="notice_icon_${key}" ${notf_attr}
style="font-size:40px; padding-top:25%;" style="font-size:3rem; padding-top:25%;"
onclick="checkStr('${acct.type}','${data}','${acct.domain}', '${key}', '${delc}','${voice}',null)" onclick="checkStr('${acct.type}','${data}','${acct.domain}', '${key}', '${delc}','${voice}',null)"
title="${lang.lang_layout_gotop}" aria-hidden="true"> title="${lang.lang_layout_gotop}" aria-hidden="true">
</i> </i>
@ -417,7 +415,7 @@ function parseColumn(target, dontclose) {
<div id="notifications_${notfKey}" data-notf="${notfDomain}" data-type="notf" class="notf-timeline"> <div id="notifications_${notfKey}" data-notf="${notfDomain}" data-type="notf" class="notf-timeline">
</div> </div>
</div> </div>
<div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:5px;"> <div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:0.4rem;">
${unread} ${unread}
${exclude}${left_hold} ${exclude}${left_hold}
${mediaFil}<br> ${mediaFil}<br>
@ -779,7 +777,7 @@ function webviewParse(url, key, insert, icnsert, css) {
var html = `<div class="box" id="timeline_box_${key}_box" tlid="${key}" style="${css}"> var html = `<div class="box" id="timeline_box_${key}_box" tlid="${key}" style="${css}">
<div class="notice-box z-depth-2" id="menu_${key}" style="${insert}"> <div class="notice-box z-depth-2" id="menu_${key}" style="${insert}">
<div class="area-notice"> <div class="area-notice">
<i class="fab fa-twitter waves-effect" id="notice_icon_${key}" style="font-size:40px; padding-top:25%;"></i> <i class="fab fa-twitter waves-effect" id="notice_icon_${key}" style="font-size:3rem; padding-top:25%;"></i>
</div> </div>
<div class="area-notice_name tl-title">WebView('${url}')</div> <div class="area-notice_name tl-title">WebView('${url}')</div>
<div class="area-sta"></div> <div class="area-sta"></div>
@ -795,7 +793,7 @@ function webviewParse(url, key, insert, icnsert, css) {
</div> </div>
</div> </div>
<div class="column-hide notf-indv-box z-depth-4" id="notf-box_${key}"></div> <div class="column-hide notf-indv-box z-depth-4" id="notf-box_${key}"></div>
<div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:5px;"> <div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:0.4rem;">
${lang.lang_layout_headercolor} ${lang.lang_layout_headercolor}
<br> <br>
<div id="picker_${key}" class="color-picker"></div> <div id="picker_${key}" class="color-picker"></div>
@ -833,7 +831,7 @@ function unstreamingTL(type, key, basekey, insert, icnsert, left_fold, css, anim
var html = `<div class="boxIn" id="timeline_box_${key}_box" tlid="${key}"> var html = `<div class="boxIn" id="timeline_box_${key}_box" tlid="${key}">
<div class="notice-box z-depth-2" id="menu_${key}" style="${insert} "> <div class="notice-box z-depth-2" id="menu_${key}" style="${insert} ">
<div class="area-notice"> <div class="area-notice">
<i class="material-icons waves-effect" id="notice_icon_${key}" style="font-size:40px; padding-top:25%;" <i class="material-icons waves-effect" id="notice_icon_${key}" style="font-size:3rem; padding-top:25%;"
onclick="${type}('${key}','${dataHtml}');" title="${lang.lang_layout_gotop}"></i> onclick="${type}('${key}','${dataHtml}');" title="${lang.lang_layout_gotop}"></i>
</div> </div>
<div class="area-notice_name"> <div class="area-notice_name">
@ -852,7 +850,7 @@ function unstreamingTL(type, key, basekey, insert, icnsert, left_fold, css, anim
</a> </a>
</div> </div>
</div> </div>
<div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:5px;"> <div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:0.4rem;">
${left_hold} ${left_hold}
<a onclick="mediaToggle('${key}')" class="setting nex"> <a onclick="mediaToggle('${key}')" class="setting nex">
<i class="material-icons waves-effect nex" title="${lang.lang_layout_mediafil}">perm_media</i> <i class="material-icons waves-effect nex" title="${lang.lang_layout_mediafil}">perm_media</i>

12
app/js/ui/tips.js
View File

@ -26,7 +26,7 @@ function tips(mode) {
if (mode == 'ver') { if (mode == 'ver') {
tipsToggle() tipsToggle()
$('#tips-text').html( $('#tips-text').html(
'<img src="../../img/desk.png" width="20" onclick="todo(\'TheDesk is a nice client!: TheDesk ' + '<img src="../../img/desk.png" class="prof-img-sml" onclick="todo(\'TheDesk is a nice client!: TheDesk ' +
localStorage.getItem('ver') + localStorage.getItem('ver') +
' git: ' + ' git: ' +
gitHash + gitHash +
@ -34,7 +34,7 @@ function tips(mode) {
localStorage.getItem('ver') + localStorage.getItem('ver') +
' {' + ' {' +
gitHash.slice(0, 7) + gitHash.slice(0, 7) +
'} [<i class="material-icons" style="font-size:1.2rem;top: 3px;position: relative;">supervisor_account</i><span id="persons">1+</span>]' '} [<i class="material-icons" style="font-size:1.2rem;top: 0.23rem;position: relative;">supervisor_account</i><span id="persons">1+</span>]'
) )
localStorage.setItem('tips', 'ver') localStorage.setItem('tips', 'ver')
} else if (mode == 'clock') { } else if (mode == 'clock') {
@ -117,7 +117,7 @@ function trendTagonTip() {
</span><br>` </span><br>`
}) })
$('#tips-text').html( $('#tips-text').html(
'<div class="trendtag">トレンドタグ<i class="material-icons pointer" onclick="trendTagonTip()" style="font-size:12px">refresh</i>:<br>' + '<div class="trendtag">トレンドタグ<i class="material-icons pointer" onclick="trendTagonTip()" style="font-size:0.9rem">refresh</i>:<br>' +
tags + tags +
'</div>' '</div>'
) )
@ -193,8 +193,8 @@ function spotifytips() {
var html = ` var html = `
<div id="spot-box"> <div id="spot-box">
<div id="spot-refresh"> <div id="spot-refresh">
<i class="material-icons pointer" onclick="spotifytips()" style="font-size:20px">refresh</i> <i class="material-icons pointer" onclick="spotifytips()" style="font-size:1.5rem">refresh</i>
<i class="material-icons pointer" onclick="nowplaying('spotify');show()" style="font-size:20px">send</i> <i class="material-icons pointer" onclick="nowplaying('spotify');show()" style="font-size:1.5rem">send</i>
</div> </div>
<div id="spot-cover"> <div id="spot-cover">
<img src="${img}" id="spot-img"> <img src="${img}" id="spot-img">
@ -277,7 +277,7 @@ function clockStart() {
(nowTime.getMonth() + 1) + (nowTime.getMonth() + 1) +
'/' + '/' +
nowTime.getDate() + nowTime.getDate() +
'<span style="font-size:20px; font-family:Open Sans">' + '<span style="font-size:1.5rem; font-family:Open Sans">' +
nowHour + nowHour +
':' + ':' +
nowMin + nowMin +

4
app/js/userdata/his-data.js
View File

@ -709,7 +709,7 @@ function udAdd(acct_id, id, start) {
.then(function(json) { .then(function(json) {
var fields = json; var fields = json;
for (var i = 0; i < fields.length; i++) { for (var i = 0; i < fields.length; i++) {
var html = '<a href="' + fields[i].proof_url + '" target="_blank" class="cbadge teal waves-effect" style="max-width:200px;" title="' + lang.lang_hisdata_key.replace("{{set}}", escapeHTML(fields[i].provider)) + '"><i class="fas fa-key" aria-hidden="true"></i>' + escapeHTML(fields[i].provider) + ":" + escapeHTML(fields[i].provider_username) + "</a>"; var html = '<a href="' + fields[i].proof_url + '" target="_blank" class="cbadge teal waves-effect" style="max-width:15.4rem;" title="' + lang.lang_hisdata_key.replace("{{set}}", escapeHTML(fields[i].provider)) + '"><i class="fas fa-key" aria-hidden="true"></i>' + escapeHTML(fields[i].provider) + ":" + escapeHTML(fields[i].provider_username) + "</a>";
$("#his-proof-prof").append(html); $("#his-proof-prof").append(html);
} }
}); });
@ -734,7 +734,7 @@ function udAdd(acct_id, id, start) {
}) })
.then(function(json) { .then(function(json) {
if (json.user.public_view) { if (json.user.public_view) {
var html = '<a href="' + json.user.url + '" target="_blank" class="cbadge purple waves-effect" style="max-width:200px;" title="Notestock">Notestock</a>'; var html = '<a href="' + json.user.url + '" target="_blank" class="cbadge purple waves-effect" style="max-width:15.4rem;" title="Notestock">Notestock</a>';
$("#his-proof-prof").append(html); $("#his-proof-prof").append(html);
} }
}); });

48
app/view/make/index.sample.html
View File

@ -69,16 +69,16 @@
<div id="demobottom"> <div id="demobottom">
<button <button
class="btn waves-effect" class="btn waves-effect"
style="width: 300px;height: 2.5rem;line-height: 0;margin: 0; background-color: var(--accentbtn);" style="width: 23rem;height: 2.5rem;line-height: 0;margin: 0; background-color: var(--accentbtn);"
> >
<i <i
class="material-icons" class="material-icons"
style="position: relative; top: 5px; font-size: 1.5rem; text-align: center; margin-right: 10px;" style="position: relative; top: 0.4rem; font-size: 1.5rem; text-align: center; margin-right: 0.7rem;"
>edit</i >edit</i
>@@toot@@ >@@toot@@
</button> </button>
<div class="leftside reverse" id="demogroup"> <div class="leftside reverse" id="demogroup">
<div class="btnsgroup" style="margin-left: 5px;"> <div class="btnsgroup" style="margin-left: 0.4rem;">
<a href="#" class="nex waves-effect"> <a href="#" class="nex waves-effect">
<i class="material-icons nex big-icon" title="@@acctMan@@(Ctrl+Shift+M)" <i class="material-icons nex big-icon" title="@@acctMan@@(Ctrl+Shift+M)"
>account_circle</i >account_circle</i
@ -138,11 +138,11 @@
id="acct-sel-prof" id="acct-sel-prof"
title="@@showSelectProf@@(Ctrl+Shift+P)" title="@@showSelectProf@@(Ctrl+Shift+P)"
data-trans-title="post_box_prof" data-trans-title="post_box_prof"
width="24px" width="1.8rem"
/> />
</a> </a>
</div> </div>
<div class="input-field mize" style="float:left; width:calc(100% - 24px); margin-top:0;"> <div class="input-field mize" style="float:left; width:calc(100% - 1.8rem); margin-top:0;">
<select id="post-acct-sel" class="acct-sel" onchange="mdCheck()"></select> <select id="post-acct-sel" class="acct-sel" onchange="mdCheck()"></select>
</div> </div>
<span class="cancel"> <span class="cancel">
@ -260,7 +260,7 @@
> >
<input <input
id="size" id="size"
style="width: calc(50% - 20px); margin: 0; height: 24px;" style="width: calc(50% - 1.5rem); margin: 0; height: 1.8rem;"
value="12" value="12"
/>px />px
<i <i
@ -271,7 +271,7 @@
> >
<input <input
id="colorhex" id="colorhex"
style="width: calc(50% - 50px); margin: 0; height: 24px;" style="width: calc(50% - 3.8rem); margin: 0; height: 1.8rem;"
type="color" type="color"
/> />
<br /> <br />
@ -283,12 +283,12 @@
> >
<input <input
id="linkt" id="linkt"
style="width: calc(50% - 20px); margin: 0; height: 24px;" style="width: calc(50% - 1.5rem); margin: 0; height: 1.8rem;"
placeholder="リンクテキスト" placeholder="リンクテキスト"
/>&nbsp; />&nbsp;
<input <input
id="link2" id="link2"
style="width: calc(50% - 20px); margin: 0; height: 24px;" style="width: calc(50% - 1.5rem); margin: 0; height: 1.8rem;"
placeholder="リンクアドレス" placeholder="リンクアドレス"
/> />
<br /> <br />
@ -300,12 +300,12 @@
> >
<input <input
id="image" id="image"
style="width: calc(50% - 20px); margin: 0; height: 24px;" style="width: calc(50% - 1.5rem); margin: 0; height: 1.8rem;"
placeholder="代替テキスト" placeholder="代替テキスト"
/>&nbsp; />&nbsp;
<input <input
id="image2" id="image2"
style="width: calc(50% - 20px); margin: 0; height: 24px;" style="width: calc(50% - 1.5rem); margin: 0; height: 1.8rem;"
placeholder="画像アドレス" placeholder="画像アドレス"
/> />
</div> </div>
@ -383,7 +383,7 @@
>clear</i >clear</i
> >
</div> </div>
<div class="col s12 mize" style="margin-bottom:5px; padding:0;"> <div class="col s12 mize" style="margin-bottom:0.4rem; padding:0;">
<div id="taglist"></div> <div id="taglist"></div>
<div id="preview" class="mize"></div> <div id="preview" class="mize"></div>
<span class=" sml mize" <span class=" sml mize"
@ -417,7 +417,7 @@
</div> </div>
<!-- 公開範囲 Dropdown Structure --> <!-- 公開範囲 Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content"> <ul id="dropdown1" class="dropdown-content">
<li style="font-size: 16px; display: block; line-height: 22px; padding: 14px 16px;"> <li style="font-size: 1.2rem; display: block; line-height: 1.69rem; padding: 1.1rem 1.23rem;">
@@selectVis@@ @@selectVis@@
</li> </li>
<li> <li>
@ -767,7 +767,7 @@
<span id="his-follow"></span> <span id="his-follow"></span>
</span> </span>
<span class="cbadge">@@follower@@: <span id="his-follower"></span> </span><br /> <span class="cbadge">@@follower@@: <span id="his-follower"></span> </span><br />
<span class="cbadge" style="max-width:150px; width:150px; " <span class="cbadge" style="max-width:11.5rem; width:11.5rem; "
>Since: >Since:
<span id="his-since"></span> <span id="his-since"></span>
</span> </span>
@ -1072,7 +1072,7 @@
<br /> <br />
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<div style="float: left;padding-top:3px;line-height: normal;"> <div style="float: left;padding-top:0.23rem;line-height: normal;">
<span id="imgprog"></span>% <br /> <span id="imgprog"></span>% <br />
<span id="imgsec"></span>ms <br /><span id="imgbyte"></span>KB <span id="imgsec"></span>ms <br /><span id="imgbyte"></span>KB
</div> </div>
@ -1362,7 +1362,7 @@
id="noauth-url" id="noauth-url"
type="text" type="text"
class="validate" class="validate"
style="width:calc( 70% - 40px);" style="width:calc( 70% - 3rem);"
placeholder="e.g:mstdn.jp" placeholder="e.g:mstdn.jp"
/> />
</div> </div>
@ -1370,7 +1370,7 @@
</div> </div>
<button <button
class="btn waves-effect blue " class="btn waves-effect blue "
style="width:calc( 100% - 10px);" style="width:calc( 100% - 0.7rem);"
onclick="addColumn()" onclick="addColumn()"
data-trans-i="add" data-trans-i="add"
> >
@ -1385,11 +1385,11 @@
<select id="src-acct-sel" class="acct-sel" onchange="trend()"></select> <select id="src-acct-sel" class="acct-sel" onchange="trend()"></select>
</div> </div>
<div class="input-field"> <div class="input-field">
<input id="src" type="text" class="validate" style="width:60%" /> <input id="src" type="text" class="validate" style="width:57%" />
<label for="src" data-trans="src">@@search@@</label> <label for="src" data-trans="src">@@search@@</label>
<button <button
class="btn waves-effect indigo" class="btn waves-effect indigo"
style="width: 36%;padding: 0;padding-left: 15px;" style="width: 36%;padding: 0;padding-left: 1.15rem;"
onclick="src()" onclick="src()"
data-trans-i="src" data-trans-i="src"
> >
@ -1412,12 +1412,12 @@
id="dirNoAuth-url" id="dirNoAuth-url"
type="text" type="text"
class="validate" class="validate"
style="width:calc( 70% - 40px);" style="width:calc( 70% - 3rem);"
placeholder="e.g:mastodon.social" placeholder="e.g:mastodon.social"
/> />
<button <button
class="btn waves-effect indigo" class="btn waves-effect indigo"
style="width: 120px;padding: 0;padding-left: 15px;" style="width: 9.23rem;padding: 0;padding-left: 1.15rem;"
onclick="directory()" onclick="directory()"
> >
<i class="material-icons left" style="margin:0">search</i>@@show@@ <i class="material-icons left" style="margin:0">search</i>@@show@@
@ -1638,7 +1638,7 @@
> >
<i <i
class="material-icons" class="material-icons"
style="position: relative; top: 5px; font-size: 1.5rem; text-align: center; margin-right: 10px;" style="position: relative; top: 0.38rem; font-size: 1.5rem; text-align: center; margin-right: 0.76rem;"
>edit</i >edit</i
>@@toot@@ >@@toot@@
</button> </button>
@ -1676,7 +1676,7 @@
</div> </div>
<div> <div>
<div id="tips-menu"> <div id="tips-menu">
<div class="btnsgroup" style="height:34px"> <div class="btnsgroup" style="height:2.61rem">
<span class="grouptitle">Tips:</span> <span class="grouptitle">Tips:</span>
<a onclick="tips('ver')" class="nex waves-effect"> <a onclick="tips('ver')" class="nex waves-effect">
<i class="material-icons nex" title="@@verTips@@" data-trans-title="ver">info</i> <i class="material-icons nex" title="@@verTips@@" data-trans-title="ver">info</i>
@ -1708,7 +1708,7 @@
>bubble_chart</i >bubble_chart</i
> >
</a> </a>
<div id="tips-text" style="width:300px;"></div> <div id="tips-text" style="width:23rem;"></div>
</div> </div>
</div> </div>
</div> </div>