Skip to content

Instantly share code, notes, and snippets.

@hasitanai

hasitanai/ももなCSS

Last active July 29, 2018 21:18
Show Gist options
  • Save hasitanai/d94311da5c2113c32b7338d0b8c7d6d3 to your computer and use it in GitHub Desktop.
Save hasitanai/d94311da5c2113c32b7338d0b8c7d6d3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ももなCSS
/*レイアウト配置*/
.drawer {
width: 30% !important;
height: 310px !important;
}
.emoji-dialog {
z-index: 1 !important;
position: fixed !important;
top: 5% !important;
left: 0px !important;
margin-left: 25% !important;
height: 90% !important;
}
.column {
flex: 1 1 0 !important;
}
div.column-icon.collapsable + div {
overflow: scroll !important;
}
.drawer__header {
position: absolute !important;
left: 45% !important;
width: 20% !important;
margin-left: 1em !important;
}
.search {
position: absolute !important;
width: 15% !important;
margin-left: 5px !important;
left: 30% !important;
}
@media (min-width:2560px) {
.drawer, .column {
margin: 0;
height: 100vh;
}
}
.muted .status__content a,
.muted .status__content p,
.muted .status__display-name strong {
color: #f24;
font-size: 6px;
}
div.notification__message > span > a {
color: #f00;
font-size: 15px;
font-weight: bold;
}
.nico-video-player {
color: #f46;
position: fixed !important;
margin-top: 60px !important;
left: 30% !important;
top: 5px !important;
width: 34.7% !important;
z-index: 1;
}
.nico-video-player__header {
margin: 0 5px;
}
.nico-video-player__item {
max-width: 100%;
margin: 0 5px;
}
.nico-video-player__item>p {
display: none;
}
.nico-video-player__item iframe {
width: 100%;
height: 100%;
transform: scale(1);
margin-bottom: 0;
}
/*トゥート欄内の配置調整*/
.status {
padding: 0px;
padding-left: 68px;
}
.status__info {
margin: 2px 0 2px;
font-size: 13px;
}
.status__action-bar {
margin: 0px 0px;
}
.status__display-name{
font-size: 1em;
}
.notification__message {
padding: 2px;
font-size: 5px;
}
/*ニコルソン対策用*/
.fa.fa-fw.fa-nicoru--status{
position: absolute !important;
bottom:12px;
right:5px
}
/* Homeの上に空間を開ける */
.column:nth-child(2) {
width: 30% !important;
position: fixed !important;
top: 300px !important;
padding-left: 10px !important;
bottom: 0px !important;
padding-bottom: 10px !important;
}
.column:nth-child(3) {
margin-top: 300px !important;
width: 30% !important;
}
.compose-form {
margin-top: -30px;
}
/* アナウンスを消す */
.announcements {
display: none !important;
}
/*トゥート欄上のニコニコ連携を非表示。あんま使わないでしょ？？*/
span.nico-connect-account__label {
display: none !important;
}
/*検索欄の白いポップアップ消します*/
.search-popout {
display: none;
}
/*direct色分け*/
.status-direct {
background: rgba(100, 20, 20, 0.3)!important;
}
/*非公開色分け*/
.status-private {
background: rgba(100, 200, 250, 0.3)!important;
}
/*未収載色分け*/
.status-unlisted {
background: rgba(150, 230, 170, 0.3)!important;
}
.status a:not([href^="https://friends.nico/"]) .display-name:before {
color: #000;
content: '【連合】';
}
.status a[href*=".m.to/"] .display-name:before {
color: #AA0;
content: '【m.to】';
}
.status a[href^="https://knzk.me/"] .display-name:before {
color: #A00;
content: '【神崎】';
}
.status a[href^="https://mstdn.jp/"] .display-name:before {
color: #080;
content: '【JP】';
}
.status a[href^="https://pawoo.net/"] .display-name:before {
color: #0AF;
content: '【Pawoo】';
}
/*ももなの発言をもとにUIの表記を変更しています（*'∀'人）*/
/*ニコニコ動画プレーヤー*/
div.compose__extra__header.nico-video-player__header {
font-size: 0px;
}
/*まず元の文字を消す*/
div.compose__extra__header.nico-video-player__header i.fa.fa-nico:after {
/*テレビちゃんのアイコンのあとに*/
content: "動画流すよーーーー♪♪（*'∀'人）";
/*m文字を挿入*/
display: block;
margin-left: 20px;
width: 320px;
/*文字が取れる幅取って*/
font-size: 16px;
}
/*できあがり。以下同じね*/
/*ついでに中身も*/
div.nico-video-player__item {
font-size: 0;
}
div.nico-video-player__item__controls:before {
content: "動画リンクをクリック◝(●˙꒳˙●)◜";
display: block;
font-size: 13px;
margin-top: -34px;
margin-left: 10%;
margin-bottom: 12px;
}
/*お気に入りタグ*/
div.favourite-tags__header__name {
font-size: 0px;
}
div.favourite-tags__header__name:before {
content: "タグです(✿´ ꒳ ` )";
font-size: 16px;
}
/*トゥートボタン*/
button.button.button--block {
font-size: 0px;
}
button.button.button--block:before {
content: "話すよ❤";
font-size: 16px;
}
/*プロフィール編集*/
div.navigation-bar__profile a.navigation-bar__profile-edit span {
font-size: 0px;
}
div.navigation-bar__profile a.navigation-bar__profile-edit span:after {
content: "( 〃 ❛ᴗ❛ 〃 )プロフ変えるよ！！";
font-size: 14px;
}
div.autosuggest-textarea__textarea>element.style.attr {
font-size: 0px;
}
div.autosuggest-textarea > label > span {
content: "(๑˃́ꇴ˂̀๑)今なにしてるーー？？";
}
div.autosuggest-textarea__textarea{
min-height: 72px
}
/*フォント変更*/
.status__content {
font-size: 18px;
margin: 0 0
}
/*絵文字を前に出す*/
div.emoji-picker-dropdown__menu{
z-index: 3;
}
/*背景＆UI色設定*/
body.app-body {
--main-color1: #f12;
--main-color2: #f24;
--main-color3: #f46;
--main-color4: #f8a;
--main-color5: #fab;
--main-color6: #fbc;
--main-color7: #fde;
--sub-color1: #a24;
--sub-color2: #e68;
--sub-color3: #e8a;
--ac-color1: #c34;
--ac-color2: #668;
--ac-color3: #f38;
--ac-color4: #d24;
--ac-color5: #fff8f8;
background: var(--sub-color2);
}
.account__action-bar {
border-top: 1px solid var(--main-color2);
border-bottom: 1px solid var(--main-color2);
}
.account__action-bar__tab>strong{
color: var(--main-color2);
}
.account__action-bar__tab>span{
color: var(--main-color4);
}
.notification.notification-favourite.focusable{
background-color: rgba(100,255,100,.1);
}
.notification.notification-reblog.focusable{
background-color: rgba(100,100,255,.1);
}
.column-header.active .column-header__icon {
color: var(--ac-color5);
text-shadow: 0 0 10px rgba(255, 230, 250, .3) ;
}
.status__content {
color: var(--ac-color1);
}
.drawer__inner {
background-color: var(--main-color6);
color: var(--main-color3);
}
.ui,
.tabs-bar {
background: var(--sub-color1);
background-color: var(--sub-color2);
}
.status {
border-bottom: 1px solid var(--main-color2);
}
.status__relative-time,
.status__display-name,
.status__prepend,
.notification__message {
color: var(--sub-color2);
}
.account__display-name strong,
.status__display-name strong {
color: var(--main-color1);
font-weight: 500
}
.status__prepend .status__display-name strong {
color: var(--main-color1);
}
.detailed-status {
background: var(--main-color6);
}
.focusable:focus {
background: rgba(255, 240, 240, 0.4);
}
.detailed-status__action-bar {
background: var(--main-color5);
border-top: 1px solid var(--main-color1);
border-bottom: 1px solid var(--main-color1);
}
.scrollable,
.drawer__inner.darker,
.search-results__section *,
.tabs-bar__link:hover,
.drawer__header>a:hover,
.drawer__header>a:hover *,
.empty-column-indicator,
.suggestion-tags__body>ul>li,
.suggestion-tags__body>ul>li * {
background-color: var(--main-color7) !important;
color: var(--ac-color1) !important;
}
-webkit-scrollbar {
background: var(--main-color3);
}
-webkit-scrollbar:hover {
background: var(--main-color1);
}
::-webkit-scrollbar-thumb {
background: var(--main-color2);
}
::-webkit-scrollbar-thumb:hover {
background: var(--main-color3);
}
::-webkit-scrollbar-track {
background: rgba(255, 0, 0, .1);
}
::-webkit-scrollbar-track:hover {
background: var(--main-color5);
;
}
.icon-button.inverted,
.text-icon-button,
.navigation-bar__profile-edit {
color: var(--main-color3)
}
.compose-form__buttons .active {
background-color: var(--main-color5);
}
.status__content .status__content__spoiler-link {
background: var(--main-color5);
}
.status__content .status__content__spoiler-link:hover {
background: var(--main-color2);
}
.account__header div *:not(.account__header__avatar),
.account__header span,
.account__header__content,
.account__header .fa,
.muted a.status__content__spoiler-link,
.status__content__spoiler-link:hover >span,
.drawer__tab > .fa,
.drawer__tab:hover > .fa,
.drawer__block {
background: rgba(0, 0, 0, 0) !important;
}
.account__header>div {
background: rgba(245, 245, 255, 0.7)!important;
}
.account__header * {
color: var(--main-color3) !important;
}
.status__content a,
.status__content a>span,
span.ellipsis,
.active,
.search__icon * {
color: var(--main-color2);
}
.button {
background-color: var(--main-color3);
opacity: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
.button:hover {
background-color: var(--main-color4);
opacity: 0.8;
}
.search *,
.compose-form__buttons .active {
border-radius: 0.4em;
}
.search__input,
.search__input:focus,
.compose-form__buttons,
.autosuggest-textarea__textarea,
.compose-form__modifiers {
background-color: var(--ac-color5);
}
.column-header,
.column-header *,
.getting-started__wrapper,
.getting-started__wrapper *,
.column-icon,
.tabs-bar,
.drawer__header,
.drawer__header *,
.column-back-button,
.search-results__header,
.favourite-tags *,
.trend-tags__header,
.column-header__collapsible-inner {
background-color: var(--main-color5);
color: var(--main-color3);
}
.column-header__collapsible-inner * {
color: var(--main-color3);
}
.status__content__spoiler-link {
border-bottom: 2px dashed var(--main-color3);
}
.status__content__spoiler-link:hover {
border-bottom-color: var(--ac-color4);
}
.status__content__spoiler-link span {
color: var(--main-color3) !important;
}
.status__content__spoiler-link:hover span {
color: var(--main-color7) !important;
}
*::-webkit-input-placeholder,
*::-moz-placeholder {
color: var(--main-color3);
opacity: 1;
}
*:-ms-input-placeholder {
color: var(--main-color3);
}
.column-subheading,
.column-link:hover,
.active.column-header__button,
.active.column-header__button:hover {
background: rgba(0, 0, 0, 0.3);
color: #fff;
}
.column-link>i,
.column-header__button>i {
background: transparent;
}
.tabs-bar__link {
border-bottom: 6px solid --main-color2;
}
.active.tabs-bar__link {
border-bottom: 6px solid rgba(1, 0, 0, 0.3);
}
.active.tabs-bar__link * {
color: var(--ac-color3);
}
.compose__extra__header {
background: var(--main-color5);
}
.reply-indicator,
div.media-gallery > button {
background: var(--main-color4);
}
div.media-gallery > button > span.media-spoiler__warning {
color: var(--main-color1)
}
.react-toggle-track {
background-color: var(--ac-color2);
}
.react-toggle--checked .react-toggle-track {
background-color: var(--main-color3);
}
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track,
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: rgba(255, 0, 0, 0.2);
}
.account__header>div {
background: rgba(255, 230, 250, .3)!important;
}
.account-section-headline {
color: var(--main-color4);
background: var(--main-color3);
border-bottom: 1px solid var(--main-color1);
}
.account-gallery__item a {
background-color: var(--sub-color3);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment